maui

FlyoutPage not works in Maui, can not see the exoected effect


I want to use FlyoutPage as the RootPage, and modify the sample code as follows:

public partial class App : Application
{
    public App()
    {
        InitializeComponent();

        MainPage = new FlayoutPageMain();
    }
}

Then create the FlayoutPageMain page as FlayoutPage:

<?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"
            xmlns:local="clr-namespace:FifthMauiProject"
            x:Class="FifthMauiProject.FlayoutPageMain"
            FlyoutLayoutBehavior="Split">
    <FlyoutPage.Flyout>
        <local:FlyoutMenuPage x:Name="flyoutPage" />
    </FlyoutPage.Flyout>
    <FlyoutPage.Detail>
        <NavigationPage>
            <x:Arguments>
                <local:MainPage />
            </x:Arguments>
        </NavigationPage>
    </FlyoutPage.Detail>
</FlyoutPage>

Also add the FlyoutMenuPage as ContentPage:

<?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"
             x:Class="FifthMauiProject.FlyoutMenuPage"
             Title="Menu">
    <VerticalStackLayout>
        <Label 
            Text="Welcome to .NET MAUI!"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
    </VerticalStackLayout>
</ContentPage>

However, when running the project, it can not show the split effect.

Here is the sample link.

I want to see the expected effect as the official document mentioned. Can touch the menu icon and show the menu page there.


Solution

  • I can reproduce this issue and it throws the following exception,

    Can't change IsPresented when setting Split,

    which means you cannot set the IsPresented when you set the Layout behavior of FlyoutPage to Split.

    So, one workaround is that you may try setting

     FlyoutLayoutBehavior="Default"  
    

    Then you can set the IsPresented in code behind or you may swipe to close the Flyout.

    For more info, please refer to FlyoutPage.

    By the way, .NET7 is out of support and we recommend you use the latest .NET8.