xamarin.formsapp-shell

Simultaneously use TabBar and Flyout in Xamarin.Forms


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:

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>

Trainer (TabBar) Page: enter image description here

Refrence (TabBar) Page: enter image description here


Solution

  • Someone managed to answer my same question on another platform and I figured it would be best if I share it here.

    I was able to achieve what i was trying to do by using below code snippet:

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

    Demo of what I achieved:

    enter image description here