i just want to ask about carousel page flow direction. I know that Carousel View has the option of flow direction, but i cant seem to find that carousel page would have the same.
So I am trying to come up with something that would solve my issue.
I have a main page with 2 buttons one of them takes me to Carousel 1 and with swipe to the right side i get carousel 2 and the other to carousel two with swipe to the right to carousel 1. however i am requested to changed the flow so if i go to carousel 2 i swipe left to get carousel 1.
I have tried switch case but for some reason the first page doesnt load properly
// System.Threading.Thread.Sleep(500);
// //model.Busy = false;
// Device.BeginInvokeOnMainThread(async () =>
// {
// switch (_pages)
// {
// case Pages.Reading:
// await Navigation.PushAsync(new CarouselLearning(false), false);
// break;
// case Pages.Listening:
// await Navigation.PushAsync(new CarouselLearning(true), false);
// break;
// }
// Navigation.RemovePage(this);
// });
//});
and then i tried just simple navigation which of course dosent work
private async void OnListeningButtonClicked(object sender, EventArgs e)
{
await Navigation.PushAsync(new CarouselLearning(Listening));
}
Do you have any experience with this?
In Carousel Page, you choose to go to Carousel 1 or Carousel 2 by setting CurrentPage, for example:
public MainPageCS(bool isReading) {
var greenContentPage = new ContentPage
{
Padding = padding,
Content = new StackLayout {
...
}
};
var blueContentPage = new ContentPage
{
Padding = padding,
Content = new StackLayout {
...
}
};
Children.Add(blueContentPage );
Children.Add(greenContentPage);
if (isReading)
{
this.CurrentPage = greenContentPage;
}
else
{
this.CurrentPage = blueContentPage ;
}
}
If you go to Carousel 1, then swipe right to go to Carousel 2, if you go to Carousel 2, then swipe left to go to Carousel 1.
BTW, you can also use CarouselView to achieve what you want.
Set the CurrentItem to Carousel 1 or Carousel 2 when you navigate to the CarouselLearning Page.
Or use FlowDirection of CarouselView to
Related
I am attempting to change the size of the back arrow in the navigation bar.
Using information from this article, I have added the following code:
protected override Task<bool> OnPushAsync(Page view, bool animated)
{
var result = base.OnPushAsync(view, animated);
var activity = (Activity) Context;
var toolbar = activity.FindViewById<Toolbar>(Resource.Id.toolbar);
if (toolbar != null)
{
if (toolbar.NavigationIcon != null)
{
if (toolbar.NavigationIcon is DrawerArrowDrawable navigationIcon)
{
// Code goes here?
}
}
}
return result;
}
If this is indeed the correct path, what code goes in the area marked by the comment "Code goes here?"?
* UPDATE *
I realized that what I am trying to figure out was not exactly described in my original question.
More specifically, when I mentioned that I am trying to resize the navigation bar back arrow, what I am really trying to do is to resize the button that the icon appears on.
For example, if I shrink the height of the navigation bar using code like the following:
On<Android>().SetBarHeight(100);
The button that the icon appears on will be clipped.
Ultimately, what I am trying to accomplish is resizing the icon AND the button that the icon appears on. I have already figured out how to do the former.
I am attempting to change the size of the back arrow in the navigation bar.
If you want to change size of the back button in the navigation bar, you can get new icon from Drawable in resource for toolbar.NavigationIcon.
public class NavigationPageRenderer : Xamarin.Forms.Platform.Android.AppCompat.NavigationPageRenderer
{
public AppCompToolbar toolbar;
public Activity context;
protected override Task<bool> OnPushAsync(Page view, bool animated)
{
var retVal = base.OnPushAsync(view, animated);
context = (Activity)Forms.Context;
toolbar = context.FindViewById<AppCompToolbar>(Droid.Resource.Id.toolbar);
if (toolbar != null)
{
if (toolbar.NavigationIcon != null)
{
if (toolbar.NavigationIcon is DrawerArrowDrawable navigationIcon)
{
// Code goes here?
toolbar.NavigationIcon = Android.Support.V7.Content.Res.AppCompatResources.GetDrawable(context, Resource.Drawable.back);
toolbar.Title = "Back";
}
}
}
return retVal;
}
}
Here is the sample you can take a look:
https://github.com/hachi1030-Allen/XamarinCustomNavBar
<NavigationPage.TitleView> will help you out there. This is a XAML approach.
Example:
<NavigationPage.TitleView>
<StackLayout>
....
</StackLayout>
</NavigationPage.TitleView>
Using this approach you will be able to set HeightRequest and WidthRequest of whatever element you place inside the StackLayout and whatever else you want to amend.
Also, note that if you are having icon size problems it may be worth looking into whether or not your drawable/ icons are the right size for the right resolution.
I have a pop up sign-in box which is shown when a person hover over the particular icon. How can I make it touch screen friendly in the Angular application?
This is the logic from my component:
private isPopupDisplayed: boolean = false;
mouseOver(event) {
this.isPopupDisplayed = true;
// console.log(`mouseOver ${this.isPopupDisplayed}`);
}
mouseLeave(event) {
this.isPopupDisplayed = false;
// console.log(`mouseLeave ${this.isPopupDisplayed}`);
}
after i finished slide down menu (which is a stacklayout containing buttons) on button click on my Pcl i am trying to hide this menu when the user taps any part of the page out of my menu
i used TapGestureRecongnizer and added it to content but it doesnot work on other children elements
TapGestureRecognizer ContentGesture = new TapGestureRecognizer();
ContentGesture.Tapped +=(s,o)=>{
if (CornerFrame.IsVisible == true)
{ CornerFrame.IsVisible = false; }
};
this.Content.GestureRecognizers.Add(ContentGesture);
Try this
Below code in your stack layout page
public event EventHandler<bool> ItemChanged;
TapGestureRecognizer ContentGesture = new TapGestureRecognizer();
ContentGesture.Tapped +=(s,o)=>{
ItemChanged?.Invoke(this, true);
};
this.Content.GestureRecognizers.Add(ContentGesture);
Below code in your main page where you add CornerFrame in page
CornerFrame.ItemChanged += (object sender, bool arg) =>
{
if (CornerFrame.IsVisible == true)
{ CornerFrame.IsVisible = false; }
};
I have a master detail page, and I want to define menu to be a navigation page, so when I select some item in menu, it will open another menu with animation. I tried to create a master as navigation page, and push async new page when selecting an item - but it doesn't work for some reason.
Is it possible at all, or there is other way?
You can have a look at this : https://www.syntaxismyui.com/xamarin-forms-masterdetail-page-navigation-recipe/
This is also a good one to look into
Xamarin.Forms - Master/detail page and navigation history issue
You have to wrap your detail page inside a navigation page so that you get the navigation properties. Is that the bit you are missing?
public class RootPage : MasterDetailPage
{
public RootPage ()
{
var menuPage = new MenuPage ();
menuPage.Menu.ItemSelected += (sender, e) => NavigateTo (e.SelectedItem as MenuItem);
Master = menuPage;
Detail = new NavigationPage (new ContractsPage ());
}
void NavigateTo (MenuItem menu)
{
Page displayPage = (Page)Activator.CreateInstance (menu.TargetType);
Detail = new NavigationPage (displayPage);
}
}
When we login,I dont want to display top bar in login_page,from second_page after login I would like to display slide menu.Is it possible to display slide from second page in xamarin.forms?
public class RootPage : MasterDetailPage
{
public RootPage()
{
var menuPage = new MenuPage();
menuPage.Menu.ItemSelected += (sender, e) => NavigateTo(e.SelectedItem as MenuItem);
Master = menuPage;
Detail = new NavigationPage(new DashBoardPage());
}
void NavigateTo(MenuItem menu)
{
Page displayPage = (Page)Activator.CreateInstance(menu.TargetType);
Detail = new NavigationPage(displayPage);
IsPresented = false;
}
}
In App.cs i am using loginpage and in loginpage i dont want ot display top menu.after login i want to display.how to display after login page
public static Page GetMainPage()
{
return new LoginPage();
}
Finally i got the solution for this question:
use:
await Navigation.PushModalAsync(new RootPage());
in place of
await Navigation.PushAsync(new RootPage());