0

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>

Trainer (TabBar) Page: enter image description here

Refrence (TabBar) Page: enter image description here

Nii
  • 450
  • 6
  • 25
  • From your code and screenshot, I am not clear what do you want to do. The navigation experience provided by Xamarin.Forms Shell is based on flyouts and tabs. If you want to use TabBar, the TabBar type disables the flyout. – Cherry Bu - MSFT Apr 14 '21 at 12:04

1 Answers1

0

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

Nii
  • 450
  • 6
  • 25
  • Am Trying same and it dont work for me Im only getting the top menu does this only work for ios? – c-sharp-and-swiftui-devni Dec 18 '21 at 20:02
  • Do you have source code for this? I suspect your code is quite a bit more complicated that that. Does all your flyoutt item point to trainer and so then you go to page by passing an argument? – user3704628 Apr 27 '22 at 12:24