.NET MAUI FlyoutPage
Learn .NET MAUI creating projects
Learn how to create cross-platform applications, thanks to the power of .NET MAUI and a series of real projects.
The type of page we are going to examine in this lesson is called FlyoutPage.
What is a Flyout page?
This type of page refers to the behavior in which there is a sliding menu with options, which can be displayed by swiping to the right or left of the screen.
How to create a Flyout in .NET MAUI?
To use this type of page in .NET MAUI, we must create a new ContentPage in the project, changing the page type to FlyoutPage type, as shown below:
<FlyoutPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiApp4.FlyoutPageDemo"
Title="FlyoutPageDemo">
<VerticalStackLayout>
<Label
Text="Welcome to .NET MAUI!"
VerticalOptions="Center"
HorizontalOptions="Center" />
</VerticalStackLayout>
</FlyoutPage>
When you do this, you will see that the IDE starts complaining, showing that there is an error in what you have done, don't worry, this is solved, specifying in the code behind the page the inheritance to the specified page type:
public partial class FlyoutPageDemo : FlyoutPage
When you make this change, you may be shocked to see that instead of reducing the number of errors, the number of errors has increased:
Don't worry, what these errors are saying is that you cannot add controls or layouts directly as part of the content of a FlyoutPage, that is, in its Detail property.
You may wonder what type of content is accepted at this point, the answer: ContentPages. We can replace the VerticalStackLayout by a ContentPage, as follows:
<FlyoutPage.Detail>
<ContentPage>
<Label
HorizontalOptions="Center"
Text="Take the .NET MAUI Master Course!!"
VerticalOptions="Center" />
</ContentPage>
</FlyoutPage.Detail>
In the previous code, the Detail property specifies the content to be displayed as the main content of the window.
To define the Flyout content, the Flyout property must be filled with content, as in the following example:
<FlyoutPage.Flyout>
<ContentPage Title="My App">
<Label
HorizontalOptions="Center"
Text="Courses"
VerticalOptions="Center" />
</ContentPage>
</FlyoutPage.Flyout>
If we run the application with the code added, we can see the Flyout being displayed on the left, and the main content on the right. In this case, I started the application on a Windows device.
If you want to see the step-by-step on how to use the FlyoutPage in .NET MAUI, you can do so by watching the following video:
