如何在 Flyout 上隐藏 Shell 项目

Question

I have a Xamarin Forms project in which I have a ShellItem login and then it shows me a FlyoutItem main with different tabs.

Here is the code on my AppShell

<ShellItem Route="login" x:Name="loginItem">
        <ShellContent ContentTemplate="{DataTemplate local:LoginPage}"/>
    </ShellItem>

    <FlyoutItem Title="Home" Route="main" Icon="homepage.png" >
        
            <Tab Icon="search.png">
                <ShellContent  ContentTemplate="{DataTemplate local:CategoryPage}" />
            </Tab>
            <Tab Route="CartPage" Icon="shopping_cart.png">
                <ShellContent  ContentTemplate="{DataTemplate local:CartPage}" />
            </Tab>
            <Tab Route="InvoicePage" Icon="invoice.png">
                <ShellContent  ContentTemplate="{DataTemplate local:InvoicePage}" />
            </Tab>
       
    </FlyoutItem>

    <FlyoutItem Title="Información" Icon="information.png">
        <ShellContent  ContentTemplate="{DataTemplate local:InfoPage}" />
    </FlyoutItem>

    <FlyoutItem Title="Contacto" Icon="contact.png">
        <ShellContent  ContentTemplate="{DataTemplate local:ContactSupportPage}" />
    </FlyoutItem>

Here is the login page, as you can see I don't want to display the flyout item yet.

The issue is on my FlyoutItem "main". If the user accidentally presses the blank space above "Home" it will take them to the login page which I don't want to happen.

Is there any way of hiding that FlyoutItem? I thought it wouldn't show as I have not added it as a FlyoutItem to my AppShell.

Please help and thanks.

Answer 1

You can try this.

<ShellItem Route="login" x:Name="loginItem" FlyoutItemIsVisible="False" >
    <ShellContent ContentTemplate="{DataTemplate local:LoginPage}"/>
</ShellItem>

Docs:

https://learn.microsoft.com/nl-nl/xamarin/xamarin.forms/app-fundamentals/shell/flyout#flyoutitem-visibility