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.
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.