Xamarin Form Shell: Flyout and TabBar - Hide items in TabBar only?

Question

I'm trying to create a dual navigation in Xamarin Shell where the flyout has 5 items, (Page1, Page2, Page3, Page4, Page5) and the bottom TabBar has only 3 of the same items (Page1, Page3, Page5).

<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <ShellContent Title="Page 1"
                      ContentTemplate="{DataTemplate local:Page1}"/>
        <ShellContent Title="Page 2"
                      ContentTemplate="{DataTemplate local:Page2}"/>
        <ShellContent Title="Page 3"
                      ContentTemplate="{DataTemplate local:Page3}"/>
        <ShellContent Title="Page 4"
                      ContentTemplate="{DataTemplate local:Page4}"/>
        <ShellContent Title="Page 5"
                      ContentTemplate="{DataTemplate local:Page5}"/>
</FlyoutItem>

I can do the inverse of what I want, where I can hide items in the flyout menu by adding: FlyoutItemIsVisible="False" to ShellContent, but there is no equivalent to hide the item in the TabBar but not the flyout.

Is this possible in Shell?

Answer 1

If you want to hide the tab, you can use property IsVisible to hide your tab.

Please refer to the following code:

<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
    <ShellContent Title="Page 1"
                  IsVisible="False"
                  ContentTemplate="{DataTemplate local:Page1}"/>
    <ShellContent Title="Page 2"
                  ContentTemplate="{DataTemplate local:Page2}"/>
    <ShellContent Title="Page 3"
                  ContentTemplate="{DataTemplate local:Page3}"/>
    <ShellContent Title="Page 4"
                  ContentTemplate="{DataTemplate local:Page4}"/>
    <ShellContent Title="Page 5"
                  ContentTemplate="{DataTemplate local:Page5}"/>
</FlyoutItem>

Update:

IsVisible="False" will hide the tab AND hide it in the flyout menu. How do I hide the tab but keep the menu item in the flyout? FlyoutItemIsVisible hides the flyout menu item and keeps the tab, I need the reverse

You can use MenuItem to achieve this.

Please refer to the following code:

<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
    <ShellContent Title="Page 1"
                  IsVisible="False"
                  ContentTemplate="{DataTemplate local:Page1}"/>
    <ShellContent Title="Page 2"
                  ContentTemplate="{DataTemplate local:Page2}"/>
    <ShellContent Title="Page 3"
                  ContentTemplate="{DataTemplate local:Page3}"/>
    <ShellContent Title="Page 4"
                  ContentTemplate="{DataTemplate local:Page4}"/>
    <!--<ShellContent Title="Page 5"
                  FlyoutItemIsVisible="False"
                  ContentTemplate="{DataTemplate local:Page5}"/>-->
</FlyoutItem>

<!--<TabBar>
    <ShellContent  Title="Page5"    Route="Page5" ContentTemplate="{DataTemplate local:Page5}" />
</TabBar>-->

<MenuItem Text="Page5" StyleClass="MenuItemLayoutStyle" Clicked="OnMenuItemPage5Clicked">
</MenuItem>

<TabBar>
    <ShellContent Route="Page5" ContentTemplate="{DataTemplate local:Page5}" />
</TabBar>

And add function OnMenuItemPage5Clicked in page AppShell.xaml.cs

    private async void OnMenuItemPage5Clicked(object sender, EventArgs e)
    {
        await Shell.Current.GoToAsync("//Page5");
    }