NET MAUI how to create a hamburger menu - maui

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);
        
}
    
}