.Net MAUI FlyoutPageMenu

Question

I am upgrading by Xamarin Forms to .Net MAUI and trying to understand FlyoutPageMenu. On the Main page I have set the 'Shell.TitleView' which is setting the title view to the logo image but I am not sure how to set the FlyoutPageMenu? Do I add to to the Main Page or TopLogo? Any help would be great.

Main Page

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:views="clr-namespace:AppMaui.Pages.Views"
             x:Class="AppMaui.MainPage">
    <Shell.TitleView>
        <views:TopLogo></views:TopLogo>
    </Shell.TitleView>
</ContentPage>

FlyoutPageMenu.xaml

<?xml version="1.0" encoding="utf-8" ?>
<FlyoutPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AppMaui.Pages.FlyoutPageMenu"
             IconImageSource="menu_list.png">
    <FlyoutPage.Flyout>
        <ContentPage Title="Home">
            <Label Text="Home"
                   HorizontalTextAlignment="Center"
                   VerticalTextAlignment="Center"></Label>
        </ContentPage>
    </FlyoutPage.Flyout>
    <FlyoutPage.Detail>
        <NavigationPage BarBackgroundColor="Navy"
                        BarTextColor="Black"
                        Title="Home">
            <x:Arguments>
                <ContentPage Title="Home" BackgroundColor="White">
                    <VerticalStackLayout>
                        <Label Text="this is detail"
                           Margin="20"/>
                    </VerticalStackLayout>
                </ContentPage>
            </x:Arguments>
        </NavigationPage>
    </FlyoutPage.Detail>
</FlyoutPage>

TopLogo

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AppMaui.Pages.Views.TopLogo">
    <ContentView.Content>
        <Grid HorizontalOptions="Center" VerticalOptions="Center" BackgroundColor="White">
            <Image Grid.Row="0" Source="nccnLogo.png"/>
        </Grid>
    </ContentView.Content>
</ContentView>

Answer 1

Yes, you can customize your own FlyoutPageMenu.

First, you could create a Flyout Page and the Flyout property should be set to ContentPage object. In the example, I set it to FlyoutMenuPage ContentPage.

<FlyoutPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
          ...
          FlyoutLayoutBehavior="Split"
         >
    <FlyoutPage.Flyout>
        <local:FlyoutMenuPage x:Name="flyoutPage" />
    </FlyoutPage.Flyout>

Then in the FlyoutMenuPage you created, you could customize your own flyoutmenu. You may put the TopLogo ContentView in it,

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
         ...
         Title="FlyoutMenuPage"
         >

<StackLayout>
    <views:TopLogo></views:TopLogo>

    <CollectionView x:Name="collectionView"
                    x:FieldModifier="public"
                    SelectionMode="Single">
        <CollectionView.ItemsSource>
            <x:Array Type="{x:Type local:FlyoutPageItem}">
    ...
    </CollectionView>
</StackLayout>

For more info, please refer to the Create a FlyoutPage. Hope it helps!