Combining Tabbar and FlyoutMenu with differents items in Xamarin Forms Shell

Question

I'm currently trying to achieve a navigation with Xamarin.Forms Shell with a flyout menu containing certain routes and a tab bar containing others.

For example when i'm arriving on HomePage, i have my flyout menu who need to contain as FlyoutItem my HomePage and other items and as tabbar Test1 Test2 and Test3 constantly:

And when my Flyout is open i want to only have Home or some specific flyout items with menu items:

From now i successfully arrived to mask the tabbar items from flyout menu but i don't arrive to do the opposite to mask the Home flyoutItem from tabbar. I tried to pass it to IsVisible False and making an menuItem with manual navigation on Commands but the route isn't found anymore in this specific cases.

<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
    <ShellContent Title="Home" Route="HomePage" ContentTemplate="{DataTemplate view:HomePage}" IsTabStop="False">
        <ShellContent.Icon>
            <FontImageSource FontFamily="FASolid" Color="Black" Glyph="{x:Static fa:FontAwesomeIcons.House}"/>
        </ShellContent.Icon>
    </ShellContent>
    <ShellContent Title="Test1" Route="CoursePage" ContentTemplate="{DataTemplate view:CoursePage}" FlyoutItemIsVisible="False">
        <ShellContent.Icon>
            <FontImageSource FontFamily="FASolid" Color="Black" Glyph="{x:Static fa:FontAwesomeIcons.Barcode}"/>
        </ShellContent.Icon>
    </ShellContent>
    <ShellContent Title="Test2" Route="StudentMonitoringPage" ContentTemplate="{DataTemplate view:StudentMonitoringPage}" FlyoutItemIsVisible="False">
        <ShellContent.Icon>
            <FontImageSource FontFamily="FASolid" Color="Black" Glyph="{x:Static fa:FontAwesomeIcons.GraduationCap}"/>
        </ShellContent.Icon>
    </ShellContent>
    <ShellContent Title="Test3" Route="AvailableOffersPage" ContentTemplate="{DataTemplate view:AvailableOffersPage}" FlyoutItemIsVisible="False">
        <ShellContent.Icon>
            <FontImageSource FontFamily="FASolid" Color="Black" Glyph="{x:Static fa:FontAwesomeIcons.GraduationCap}"/>
        </ShellContent.Icon>
    </ShellContent>
</FlyoutItem>

<!-- When the Flyout is visible this will be a menu item you can tie a click behavior to  -->
<!--<MenuItem Text="Accueil" StyleClass="MenuItemLayoutStyle" Command="{Binding RedirectionCommand}" CommandParameter="{x:Static viewmodels:ShellViewModel+NavigationPages.Home}">
    <MenuItem.IconImageSource>
        <FontImageSource FontFamily="FASolid" Color="Black" Glyph="{x:Static fa:FontAwesomeIcons.House}"/>
    </MenuItem.IconImageSource>
</MenuItem>-->
<MenuItem Text="Logout" StyleClass="MenuItemLayoutStyle" Command="{Binding LogoutCommand}">
    <MenuItem.IconImageSource>
        <FontImageSource FontFamily="FASolid" Color="Black" Glyph="{x:Static fa:FontAwesomeIcons.PowerOff}"/>
    </MenuItem.IconImageSource>
</MenuItem>



<!--
    TabBar lets you define content that won't show up in a flyout menu. When this content is active
    the flyout menu won't be available. This is useful for creating areas of the application where 
    you don't want users to be able to navigate away from. If you would like to navigate to this 
    content you can do so by calling 
    await Shell.Current.GoToAsync("//LoginPage");
-->
<TabBar>
    <ShellContent Route="LoginPage" ContentTemplate="{DataTemplate view:LoginPage}"/>
</TabBar>

From now i'm currently here, what i'm tried is to put the HomePage into tabBar then navigate by the MenuItem but in that case tabbar and flyout doesn't display.

Answer 1

You could use the MenuItem to show the items in the Flyout. And use the FlyoutItem to show the tabs in the bottom tabbar without setting the FlyoutDisplayOptions property to AsMultipleItems.

The MenuItem would show the item in flyout and the items in FlyoutItem would show in the bottom tabbar.

 <MenuItem
    Command="{Binding AboutCommand}"
    Icon="tab_about.png"
    Text="About" />

<FlyoutItem>
    <ShellContent Title="Account" ContentTemplate="{DataTemplate local:AccountPage}" />
    <ShellContent Title="Browser" ContentTemplate="{DataTemplate local:BrowserPage}" />
</FlyoutItem>

Code behind:

public partial class AppShell : Xamarin.Forms.Shell
{
    public AppShell()
    {
        InitializeComponent();
        Routing.RegisterRoute("about", typeof(AboutPage));
        BindingContext = this;
    }
    public ICommand AboutCommand => new Command(async () => await NavigatedToAccount());

    async Task NavigatedToAccount()
    {
        await Shell.Current.GoToAsync("about");
        Shell.Current.FlyoutIsPresented = false;
    }

}