Is Shell incompatible with TabbedPage?

Question

According to this is Shell incompatible with TabbedPage?

P. S. This tags selecting is weird thing. Why I can't enter tags like Shell or TabbedPage?

Answer 1

I'd imagine the intent is that if you want tabs when using Shell you use a TabBar or multiple ShellContent children under a FlyoutItem.

https://forums.xamarin.com/discussion/185102/shell-bottom-tabs-for-sub-section-under-flyout

Answer 2

Hello,

Welcome to our Microsoft Q&A platform!

Do you want tabs embedded in some pages of your shell app?

Then you can refer to the official document :https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/introduction

The

<FlyoutItem Route="animals"  
            Title="Animals"  
            FlyoutDisplayOptions="AsMultipleItems">  
    <Tab Title="Domestic"  
         Route="domestic"  
         Icon="paw.png">  
        <ShellContent Route="cats"  
                      Style="{StaticResource DomesticShell}"  
                      Title="Cats"  
                      Icon="cat.png"  
                      ContentTemplate="{DataTemplate views:CatsPage}" />  
        <ShellContent Route="dogs"  
                      Style="{StaticResource DomesticShell}"  
                      Title="Dogs"  
                      Icon="dog.png"  
                      ContentTemplate="{DataTemplate views:DogsPage}" />  
    </Tab>  

    <ShellContent Route="monkeys"  
                  Style="{StaticResource MonkeysShell}"  
                  Title="Monkeys"  
                  Icon="monkey.png"  
                  ContentTemplate="{DataTemplate views:MonkeysPage}" />  
    <ShellContent Route="elephants"  
                  Style="{StaticResource ElephantsShell}"  
                  Title="Elephants"  
                  Icon="elephant.png"  
                  ContentTemplate="{DataTemplate views:ElephantsPage}" />  
    <ShellContent Route="bears"  
                  Style="{StaticResource BearsShell}"  
                  Title="Bears"  
                  Icon="bear.png"  
                  ContentTemplate="{DataTemplate views:BearsPage}" />  
</FlyoutItem>  

The result is:

Note: Page CatsPage and page DogsPage are two ContentPages in Tab.

<Tab Title="Domestic"  
     Route="domestic"  
     Icon="paw.png">  
    <ShellContent Route="cats"  
                  Style="{StaticResource DomesticShell}"  
                  Title="Cats"  
                  Icon="cat.png"  
                  ContentTemplate="{DataTemplate views:CatsPage}" />  
    <ShellContent Route="dogs"  
                  Style="{StaticResource DomesticShell}"  
                  Title="Dogs"  
                  Icon="dog.png"  
                  ContentTemplate="{DataTemplate views:DogsPage}" />  
</Tab>  

And you can get the full sample here: https://learn.microsoft.com/en-us/samples/xamarin/xamarin-forms-samples/userinterface-xaminals/

Best Regards,

Jessie Zhang

---

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.