CODEWITHSUNDEEP
xamlmauiflyout
edodoe
edodoe

Reputation: 71

How to set the flyout menu only on a certain page - .NET MAUI

The app I'm making is an app with recipes for meals. The first thing that is displayed to the user after starting the application is the Login page, where the user, after entering his data and clicking the 'LOGIN' button, goes to the home page. On that page there are some defined menus for dishes and what should be a menu, i.e. flyout menu in the upper left corner (as part of navbar) but there is no such thing. The only thing that is displayed is an arrow that takes you back to the Login page. I defined the flyout with elements (appetizer, main course and dessert) in the appshell, and tried to add properties so that the flyout is not visible on the Login page, but only after logging in. For the login page, I manage to make it with the help of the Shell.FlyoutBehavior="Disabled" property, but this same thing with the "Flyout" property for the home page does not work.

AppShell code:

<Shell
    x:Class="ReceptiUI.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:ReceptiUI"
    Shell.FlyoutItemIsVisible="True"
    Shell.FlyoutBehavior="Flyout">

<ShellContent
    Shell.FlyoutBehavior="Disabled"
    Title="Home"
    ContentTemplate="{DataTemplate local:Login}"
    Route="Login" />

<ShellContent
    Shell.FlyoutBehavior="Flyout"
    Title="Home"
    ContentTemplate="{DataTemplate local:MainPage}"
    Route="MainPage"/>

<FlyoutItem Title="Predjelo" Icon="breakfast.png">
   <ShellContent ContentTemplate="{DataTemplate local:Breakfast}"/>
</FlyoutItem>
<FlyoutItem Title="Glavno jelo" Icon="food.png">
    <ShellContent ContentTemplate="{DataTemplate local:Lunch}"/>
</FlyoutItem>
<FlyoutItem Title="Desert" Icon="dinner.png">
     <ShellContent ContentTemplate="{DataTemplate local:Dinner}"/>
</FlyoutItem>
<FlyoutItem Title="Meni" Icon="dinner.png">
    <ShellContent ContentTemplate="{DataTemplatelocal:ListaJela}"/>
</FlyoutItem>

I also set these properties 'Shell.FlyoutItemIsVisible="True"' 'Shell.FlyoutBehavior="Flyout"' on the home page, but still no flyout menu.

Upvotes: 3

Views: 3830

Answers (1)

Guangyu Bai - MSFT
Guangyu Bai - MSFT

Reputation: 4486

You can write a FlyoutPage in the home page instead of using the shell flyout in the AppShell.

Here is the code demo:

<FlyoutPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:FlyoutPageNavigation"
            x:Class="FlyoutPageNavigation.MainPage">
    <FlyoutPage.Flyout>
        <local:FlyoutMenuPage x:Name="flyoutPage" />
    </FlyoutPage.Flyout>
    <FlyoutPage.Detail>
        <NavigationPage>
            <x:Arguments>
                <local:ContactsPage />
            </x:Arguments>
        </NavigationPage>
    </FlyoutPage.Detail>
</FlyoutPage>

In the AppShell, you just write a normal navigation to navigate from the Loginpage to the Homepage.

Upvotes: 4

Related Questions