1

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.

edodoe
  • 31
  • 3
  • Welcome to SO. Please provide the relevant code (XAML and C#) and explain the problem a little bit better. What's the structure of your app? You can also use screenshots and mockups. Please just don't post code or exceptions as images: https://stackoverflow.com/help/how-to-ask – Julian Jan 03 '23 at 18:51
  • @ewerspej Thank you very much! I've edited my post so I hope the situation is a little clearer now – edodoe Jan 04 '23 at 17:46
  • I found that you used the same Shellcontent title named Home. You can check to see if the title bothers you. The Appshell code you posted had no problem. – Guangyu Bai - MSFT Jan 06 '23 at 08:03

1 Answers1

3

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.

Guangyu Bai - MSFT
  • 2,555
  • 1
  • 2
  • 8