CODEWITHSUNDEEP
maui
BitWiseByteDumb
BitWiseByteDumb

Reputation: 377

Am I missing something with the .NET MAUI Shell Flyout Menu not showing here?

Hell all:

Starting up a .NET MAUI shell app and having an issue with the flyout menu??? I cannot see the "hamburger menu" and swiping from side does not seem to work??? Am I missing something???

XAML:

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

<ShellContent
    Title="Test"
    ContentTemplate="{DataTemplate local:LoginPage}"
    Route="MainPage" />

<FlyoutItem Title="Lookup Items">
    <ShellContent ContentTemplate="{DataTemplate local:MenuPage}"/>
</FlyoutItem>
<FlyoutItem Title="Logout">
    <ShellContent ContentTemplate="{DataTemplate local:LoginPage}"/>
</FlyoutItem>

Thanks in advance

Upvotes: 3

Views: 4810

Answers (1)

Alexandar May - MSFT
Alexandar May - MSFT

Reputation: 10148

You need to wrap the ShellContent with Tab inside the FlyoutItem to show the hamburger menu. Here's the code snippet for your reference:

  <ShellContent

    Title="Test"

    ContentTemplate="{DataTemplate local:MainPage}"

    Route="MainPage" />

  <FlyoutItem Title="Lookup Items">

      <Tab>
           <ShellContent ContentTemplate="{DataTemplate local:MainPage}"/>
      </Tab>

  </FlyoutItem>

  <FlyoutItem Title="Logout">
      <Tab>
           <ShellContent ContentTemplate="{DataTemplate local:MainPage}"/>
       </Tab>
  </FlyoutItem>

Update:

The .NET MAUI platform provides two primary forms of page navigation to an app:

  • Shell.

  • Base navigation pages, such as NavigationPage ,TabbedPage, and FlyoutPage.

You are mixing the Shell with NavigationPage so the "hamburger menu" disappears. To fix that, you need to set the mainpage like below:

MainPage = new AppShell();

And then register route for the ProvisionPage:

public AppShell() 
{
      InitializeComponent();

      Routing.RegisterRoute("ProvisionPage", typeof(ProvisionPage));
}

Use the Shell.Current.GoToAsync to navigate from MainPage to ProvisionPage:

 await Shell.Current.GoToAsync("ProvisionPage");

For more information, you can refer to .NET MAUI Shell navigation.

Upvotes: 0

Related Questions