Navigate to a tabbed page in a xamarin shell application

Question

Hi there
I have been using the Xamarin Shell and tab content with the routes. I like the concept and it seems like a nice clean interface.
Is it possible to have nested tabbed pages or for a navigated page to have tabs by default?

When the application starts in the example you can have top and bottom tabs for animals cats and dogs.

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <TabBar>
       <Tab Title="Domestic"
            Icon="paw.png">
           <ShellContent Title="Cats"
                         ContentTemplate="{DataTemplate views:CatsPage}" />
           <ShellContent Title="Dogs"
                         ContentTemplate="{DataTemplate views:DogsPage}" />
       </Tab>
       <Tab Title="Monkeys"
            Icon="monkey.png">
           <ShellContent ContentTemplate="{DataTemplate views:MonkeysPage}" />
       </Tab>
    </TabBar>
</Shell>

If a user selects a "cat" to navigate to another page using Shell.Current.GoToAsync("page"). Can the navigated page then have tabs in the same way?

I've been looking through the tutorial and documentation and it hints that it might be possible but i'm not sure how or if it is.

If a user was to tap "cat", could I navigate to a page with the same bottom tab bar. But have a new page with the tabs "Extinct", "Endangered", "Common" for example?

If the user was to click the back arrow they would be navigated back to the previous page?

I have seen you can use "//" to navigate to a new location. I guess I could create multiple shells and maybe switch between them? not sure how the back button would work with that either.

The other alternative I can think of is to create a page and then in the shell.Content add the pages dynamically somehow?

The basic idea I have tried is to have an additional tab on the shell such as

<Tab Title="Cat"
             Icon="icon_feed.png"
             Route="CatDetailPage"
             IsVisible="True">
            <ShellContent Title="Extinct" Icon="icon_about.png" Route="CatDetailPage" ContentTemplate="{DataTemplate local:CatsPage}" />
            <ShellContent Title="Endangered" Icon="icon_about.png" Route="CatDetailPage" ContentTemplate="{DataTemplate local:CatsPage}" />
            <ShellContent Title="Common" Icon="icon_about.png" Route="CatDetailPage" ContentTemplate="{DataTemplate local:CatsPage}" />
        </Tab>

I can then toggle the visibility, but this doesn't feel quite right especially with back navigation etc.

Any pointers would be greatly appreciated.

Sorry if I have not explained very well.

Many thanks

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

Do you want to achieve the result like this screenshot? If you want to make the tabbar to bottom for tabbedpage, you can refer to this thread

Navigate page Previous Page:

Firstly, you can create a TabbedPage.

   <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"  
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
                x:Class="App143.Views.TabbedPage1">  
     <!--Pages can be added as references or inline-->  
     <ContentPage Title="Tab 1" />  
     <ContentPage Title="Tab 2" />  
     <ContentPage Title="Tab 3" />  
   </TabbedPage>  
     
     
       [XamlCompilation(XamlCompilationOptions.Compile)]  
       public partial class TabbedPage1 : TabbedPage  
       {  
           public TabbedPage1()  
           {  
               InitializeComponent();  
           }  
       }  

Then, register this tabbedpage in AppShell.xaml.cs

   public AppShell()  
           {  
               InitializeComponent();  
               Routing.RegisterRoute(nameof(ItemDetailPage), typeof(ItemDetailPage));  
               Routing.RegisterRoute(nameof(NewItemPage), typeof(NewItemPage));  
     
               //register tabbedpage here  
     
               Routing.RegisterRoute(nameof(TabbedPage1), typeof(TabbedPage1));  
     
           }  

If I need to navigate to the tabbedpage. I could use await Shell.Current.GoToAsync("TabbedPage1") to execute it

Best Regards,

Leon Lu

---

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Awesome thanks. I wasn't sure if I could navigate to a tabbed page like this.