Display different buttons on each page with Xamarin Forms

Question

I have 2 pages in a Xamarin Forms application. On the first page there are 4 icons on the toolbar. My second page is the login page and has a check mark and a cross in the toolbar.

I can’t get the login page to show any badges unless I make it a navigation page. I also have to clear ToolBarItems on the first page before calling PushAsync (), otherwise it complains that there are too many toolbar elements.

If I call PopAsync () on the login page, it does not return to the first page. I assume this is due to the fact that they are 2 navigation pages. I also tried PopToRootAsync (). However, the back button works.

My question is: how to show different icons on two different pages in such a way that navigation can work?

I am testing this on Windows Phone 8.0

Here is the code that calls the login page:

private async void ShowLoginPage() { ToolbarItems.Clear(); var page = new NavigationPage(new LoginPage()); await Navigation.PushAsync(page); } 

and here is the code to return to the first page:

  private void Cancel() { Navigation.PopToRootAsync(); } 

I am running Xamarin.Forms v1.2.2.6243

Answer 1

One option that I have, and one that I implemented in my own application, is a native renderer that removes the navigation header from the application, and then you can create your own custom header. With this approach, you lose part of your own application, and you must implement most of the transition functions yourself. However, it gives you more control over your appearance.

CustomRenderer, which removes the navigation bar:

 //add using statements // add all view here that need this custom header, might be able to build a //base page that others inherit from, so that this will work on all pages. [assembly: ExportRenderer(typeof(yourView), typeof(HeaderRenderer))] class HeaderRenderer : PageRenderer { public override void ViewWillAppear(bool animated) { base.ViewWillAppear(animated); this.NavigationController.SetNavigationBarHidden(true, true); } } 

After that, you can create a header view that can be placed at the top of each page (I use xaml), so I don’t know if it is relevant in your application.

Edit: You may need to change this renderer for different types of pages.

Answer 2

One thing you can try is to save your NavigationPage login page, and then instead of launching PopAsync() on the login page after successfully logging in, simply replace MainPage with your previous navigation page:

In your App class:

 public NavigationPage AppNavPage = new NavigationPage(new FirstPage()); public App() { MainPage = AppNavPage; } 

In your FirstPage:

 private async void ShowLoginPage() { ToolbarItems.Clear(); var page = new NavigationPage(new LoginPage()); await Navigation.PushAsync(page); } 

On the login page:

 private async void OnCreateClicked(object sender, EventArgs e) { bool loginInfoIsGood = CheckLoginInfo(); //Check their login info if(loginInfoIsGood) { Application.Current.MainPage = App.AppNavPage; } } 

Otherwise, I also made my own renderer for the NavigationRenderer on iOS to insert toolbar items on the right side of the navigation bar and override some Menu related files on Android to change the text / colors of the icon.