NET MAUI how to create a hamburger menu

Question

I am trying to create a hamburger menu in xaml, but zero success. I was trying to use the samples provided [here][1], but zero success.

My idea is to create a view model that has a list of FlyoutItems then inject this view model to the AppShell.

public partial class ShellViewModel : ObservableObject
{
    public List<FlyoutItem> FlyoutItems { get; private set; } = new List<FlyoutItem>();

    public ShellViewModel()
    {
        AddMenuItems();

    }

    private void AddMenuItems()
    {
        var flyoutItems = new List<FlyoutItem>
        {
            new FlyoutItem
            {
                Title = "Item 1"
            },
            new FlyoutItem
            {
                Title = "Item 2"
            }
        };
        
        FlyoutItems.AddRange(flyoutItems);
    }
}

public partial class AppShell : Shell
{
    private ShellViewModel viewModel => BindingContext as ShellViewModel;

    public AppShell(ShellViewModel viewModel)
    {
        BindingContext = viewModel;
        RegisterRoutes();
        InitializeComponent();
    }

    private void RegisterRoutes()
    {
        Routing.RegisterRoute(PageRoutes.LoginPage, typeof(LoginPage));
        Routing.RegisterRoute(PageRoutes.RegisterPage, typeof(RegisterPage));
        Routing.RegisterRoute(PageRoutes.HomePage, typeof(MainPage));
        Routing.RegisterRoute(PageRoutes.DetailsPage, typeof(PlayerDetailsPage));
        Routing.RegisterRoute(PageRoutes.AddOrUpdatePage, typeof(AddOrUpdatePlayer));
    }
}

In the XAML sometign like this

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="MauiUI.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MauiUI"
    xmlns:pages="clr-namespace:MauiUI.Pages">

    <Shell.ItemTemplate>
        <DataTemplate>
            <CollectionView BindingContext="{x:Reference shell}"
                            IsGrouped="True"
                            ItemsSource="{Binding FlyoutItems}">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Label Text="{Binding Title}"
                               TextColor="White"
                               FontSize="18" />
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </DataTemplate>
    </Shell.ItemTemplate>

    <ShellContent
        Title="Amazons of Volleyball"
        ContentTemplate="{DataTemplate pages:SplashPage}"
        Route="HomePage" />

</Shell>

thnx [1]: https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/shell/flyout?view=net-maui-7.0

Answer 1

I am trying to create a hamburger menu in xaml, but zero success.

You can add this code in your AppShell.xaml:

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="MauiUI.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MauiUI"
    xmlns:views="clr-namespace:MauiUI.Pages">
    
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <ShellContent Title="Home"
                      Route="home" 
                      ContentTemplate="{DataTemplate local:MainPage}" />
        <ShellContent Title="NewPage1" 
                      ContentTemplate="{DataTemplate pages:NewPage1}" />
    </FlyoutItem>
    
</Shell>

Or you can add this code in your AppShell.xaml.cs:

public partial class AppShell : Shell    
{
     public AppShell ()        
     {
            InitializeComponent ();
            
            FlyoutItem flyoutItem = new FlyoutItem ();
            flyoutItem.FlyoutDisplayOptions = FlyoutDisplayOptions.AsMultipleItems;
            
            flyoutItem.Items.Add (new ShellContent () { Title = "NewPage1", Content = new NewPage1 () });
            flyoutItem.Items.Add (new ShellContent () { Title = "home", Content = new MainPage () });
            
            myshell.Items.Add (flyoutItem);
            
     }
      
}