Forum Xamarin.Forms

Nested navigation tabbed page

Hi all,

I have a view with as root item a TabbedPage. To this TabbedPage I add multiple children (the tabs) but nested in a Navigation page. (so each tab will contain its own navigation hierarchy, so the tabs will be displayed always) The code for this looks like this:
this.Children.Add(new NavigationPage(new MyViewList()))

The problem comes when I want to show a page that is not a tab (in my case a Search button in the toolbar). So I want to click on the toolbaritem and show a new page (the tabs do not need to be visible there) with a back button which brings you back to the TabbedPage view. For this it is needed that the TabbedPage is also in a NavigationPage which allows you to push and pop screens, to view other pages.

So I did this, but the UI cannot handle this (two toolbars nested because of the two navigation pages nested) which makes sense. After that I was stuck, because I cannot find another solution for this problem.

What I basically want is to show a new screen from a tabbed page (which contains navigation pages as children) which allows the user to go back in the normal way (so on iOS by showing a back button in the left top corner). So solutions where I need to set Application.Current.MainPage to a new screen will not be possible I think.

Do any of you have a solution for this?

Thanks in advance!

Gerco Brandwijk


  • GercoBrandwijkGercoBrandwijk USMember ✭✭

    I found a solution by myself. I am starting the TabbedPage as a NavigationPage, so like:
    Application.Current.MainPage = new NavigationPage(new MyTabbedPage());

    And in this TabbedPage object (constructor method after calling the InitializeComponent) I am using this line to disable the navigationbar for this NavigationPage:
    NavigationPage.SetHasNavigationBar(this, false);

    Now that navigation bar of the first navigation page is not showed anymore, but you can still use the Navigation property on the TabbedPage like:
    tabbedPage.Navigation.PushAsync(new MyViewThatIsNotATab());

  • GercoBrandwijkGercoBrandwijk USMember ✭✭

    The problem with this is that Android does not allow nested navigationpages.. So this solution is breaking on Android right now. Does anyone knows a solution for this?

  • OmarSOmarS USMember ✭✭

    Here is a cheap solution, but maybe you could:

    Do a PushModalAsync on each of your tabbedPage.

    On your new page, add a StackLayout and a ScrollView inside which you put your page content.

    On the StackLayout, add a button on the left and put " < Back" or whatever as text.

    On the button.Clicked, do PopModalAsync();

    This way, you have fake NavigationPages. It's limited by the fact that you have a SrollView so you can't do everything you want, but I used it in one of my project, and it works well.

  • GercoBrandwijkGercoBrandwijk USMember ✭✭

    Creating an own Back button is not the way I want it. But thanks for sharing your thoughts.

    The solution I have now is to check on which platform we are and decide than if I want nested NavigationPages or not. But by doing that I cannot see the tabs on every page on Android anymore, so that's also not a solution.

    Is there a reason why Xamarin.Android does not support nested Navigation Pages while Xamarin.iOS supports it? Perhaps someone from the Xamarin team can answer this?

  • AdamPAdamP AUUniversity ✭✭✭✭✭
    edited April 2015

    Android only supports one navigation page at a time. This is an Android limitation. Windows and iOS support multiple.

    Unfortunately the Xamarin team can't do anything about this because it's a limitation of the platform.

  • GercoBrandwijkGercoBrandwijk USMember ✭✭
    edited April 2015

    In which Android element is the NavigationPage converted to on the Android platform?

    Found it myself:

  • SupreetTare.9314SupreetTare.9314 GBUniversity ✭✭

    Hey @GercoBrandwijk can you please share some code that you used to solve this issue?

  • GercoBrandwijkGercoBrandwijk USMember ✭✭
    edited June 2015

    I have a splash screen called ViewSplash. After a certain period I start a view called ViewMain with the following code:

    Application.Current.MainPage = new NavigationPage(new ViewMain() { Title = "App title" });

    (so the NavigationPage is created right now)

    My ViewMain class is derived from TabbedPage. In the ViewMain class I have the following code:

    if (Device.OS.Equals(TargetPlatform.iOS))
            // Don't show first navigation bar
            NavigationPage.SetHasNavigationBar(this, false);
            // Add a child that is a NavigationPage with a View inside. An extra NavigationPage is possible on iOS. So every tab has its own navigation stack
            this.Children.Add(new NavigationPage(new View()));
            // Add a child that is a view. So no Navigation Page, because we already created that one in the ViewSplash
            this.Children.Add(new View());

    I hope that this helps you. Feel free to ask otherwise.

  • SupreetTare.9314SupreetTare.9314 GBUniversity ✭✭

    Hi @GercoBrandwijk Thanks for the sample. I did exactly the same thing in my app yesterday.
    But with this you don't get navigation within the tabs in Android. From what I read, since the Android does not support multiple navigation stacks, that may not be possible at all.

    Let me know if that's the case for you too


  • GercoBrandwijkGercoBrandwijk USMember ✭✭

    That's correct. Android is not supporting double navigation stacks like you said, so the sample code I showed is making an extra navigation stack only on iPhone (where it is possible) and not on Android.

Sign In or Register to comment.