Is Shell incompatible with TabbedPage?

Igor Kravchenko 281 Reputation points
2020-12-11T17:31:22.773+00:00

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?

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,287 questions
0 comments No comments
{count} votes

2 answers

Sort by: Most helpful
  1. Joe Manke 1,091 Reputation points
    2020-12-11T17:37:02.437+00:00

    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

    0 comments No comments

  2. JessieZhang-MSFT 7,701 Reputation points Microsoft Vendor
    2020-12-14T02:45:31.967+00:00

    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:

    47771-image.png

    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.