Simultaneously use TabBar and Flyout in Xamarin.Forms

Question

Hi, i'm relatively new to Xamarin and decided to try out Xamarin.Forms for my first Mobile App Project. However, i'm having trouble trying to display both the Flyout and TabBar at the same time. So i am here to ask, if, is it possible in the first place?

What I want to achieve is this:

• i have two TabBar Pages, "Trainer" and "Reference"
• I want the "Trainer" Page (and only this Page) to have a flyout menu when active (Hamburger button on upper left). This is because this Page have sub-pages in it like "Assembly", "Ethernet", and etc...
• the selected entry from the Flyout will then be loaded onto the Trainer TabBar Page (if possible too?)

Thank you.

Code Snippet from AppShell.xaml:

<TabBar>
    <ShellContent Title="Trainer" Icon="icon_workstation.png" ContentTemplate="{DataTemplate local:TrainerPage}" />
    <ShellContent Title="Reference" Icon="icon_resource.png" ContentTemplate="{DataTemplate local:ReferencePage}" />
</TabBar>

<FlyoutItem Title="PC Assembly" Icon="icon_wrench.png">
    <ShellContent ContentTemplate="{DataTemplate local:AssemblyPage}" />
</FlyoutItem>
<FlyoutItem Title="Ethernet Wiring" Icon="icon_ethernet.png">
    <ShellContent ContentTemplate="{DataTemplate local:EthernetWiringPage}" />
</FlyoutItem>
<FlyoutItem Title="OS Installer Maker" Icon="icon_usb.png">
    <ShellContent ContentTemplate="{DataTemplate local:InstallerMakerPage}" />
</FlyoutItem>
<FlyoutItem Title="Windows Installation" Icon="icon_os.png">
    <ShellContent ContentTemplate="{DataTemplate local:WindowsInstallPage}" />
</FlyoutItem>
<FlyoutItem Title="Windows (DHCP) Configuration" Icon="icon_settings.png">
    <ShellContent ContentTemplate="{DataTemplate local:WindowsConfigurationPage}" />
</FlyoutItem>

Screenshots:

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

i'm having trouble trying to display both the Flyout and TabBar at the same time. So i am here to ask, if, is it possible in the first place?

No, we cannot use the two navigation ways at the same time. The top level of navigation in a Shell application is either a flyout or a bottom tab bar. If you want to display the bottom tabs when using the ShellItem, try using Tab to group the content like below.

   <FlyoutItem Title="About" Icon="icon_about.png">  
       <Tab Title="item_1">  
           <ShellContent Route="AboutPage" ContentTemplate="{DataTemplate local:page_1}" />  
       </Tab>  
       <Tab Title="item_2">  
           <ShellContent Route="AboutPage" ContentTemplate="{DataTemplate local:page_2}" />  
       </Tab>  
   </FlyoutItem>  
   <FlyoutItem Title="Browse" Icon="icon_feed.png">  
       <ShellContent Title="page_1" Route="ItemsPage" ContentTemplate="{DataTemplate local:ItemsPage}" />  
   </FlyoutItem>  

Check the doc: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/introduction#application-visual-hierarchy

Best Regards,

Jarvan 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.

Answer 2

Do you have the above in a sample app you can share?