Working with FlyoutPage in .NET MAUI

Introduction

In this article, we will learn about the FlyoutPage in .NET MAUI. In case you are new to .NET MAUI, I will recommend you to go through the below articles of this series:

• How .Net MAUI work?
• Project Structure of .NET MAUI Application
• Working With NavigationPage In .NET MAUI

FlyoutPage in .Net MAUI

FlyoutPage is a page that manages two related pages of information – one is a Flyout page that presents the items, and the second one is the Detail page that presents details about the item on the Flyout page. One important point that is mentioned on the Microsoft official website is that FlyoutPage is designed to be the root of an app, and using it as a child page on other pages could result in unexpected and inconsistent behavior. FlyoutPage has several properties like Flyout, Detail, FlyoutLayoutBehavior, IsPresented, etc. We will explore these properties in the sample application which we are going to create.

Let’s create a .NET MAUI project named FlyoutPageDemo to understand the FlyoutPage.

Add a .NET MAUI content page and name it MainPage.xaml.

Set the MainPage as the Main Page for the application in App.xaml.cs file.

Let’s change the page type from ContentPage to FlyoutPage in the XAML file.

Also, inherit the FlyoutPage instead of ContentPage in MainPage.xaml.cs file.

Let’s add two ContentPages and name them Page1 and Page2.

Now, the structure of our project will look like below

Add the Flyout and Detail properties of the Flyout page. The Flyout property of the FlyoutPage should be set to ContentPage, whereas the Detail property should be set as ContentPage, NavigationPage, or TabbePage object. In this example, I am setting the Detail page with the NavigationPage’s object. I have also added xmlns:local so that I can use the Page1 and Page2 references directly in the xaml file. In the Flyout property, ContentPage is used along with the StackLayout to show the Items i.e.  Page 1, and Page 2, which are actually Button,s and have the click event to show the respective ContentPage in the Flyout Details property.

<?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:FlyoutPageDemo"
            x:Class="FlyoutPageDemo.MainPage"
            FlyoutLayoutBehavior="Popover">
    <FlyoutPage.Flyout>
        <ContentPage Title="Menu">
            <StackLayout>
                <Button x:Name="btnPage1" 
                        BackgroundColor="White" 
                        TextColor="Black" 
                        Text="Page 1" 
                        CornerRadius="0" 
                        Clicked="btnPage1_Clicked">
                </Button>
                <Button x:Name="btnPage2" 
                        BackgroundColor="White" 
                        TextColor="Black" 
                        Text="Page 2" 
                        CornerRadius="0" 
                        Clicked="btnPage2_Clicked">
                </Button>
            </StackLayout>
        </ContentPage>
    </FlyoutPage.Flyout>
    <FlyoutPage.Detail>
        <NavigationPage>
            <x:Arguments>
                <local:Page1 Title="Page 1"/>
            </x:Arguments>
        </NavigationPage>
    </FlyoutPage.Detail>
</FlyoutPage>

In MainPage.xaml.cs file, click event for the btnPage1 and btnPage2 are defined. In each click event, the Detail property is set according to the ContentPage, which needs to be shown. Set IsPresented to false to hide the Flyout page and display the details page.

public partial class MainPage : FlyoutPage
{
	public MainPage()
	{
		InitializeComponent();
	}

    private void btnPage1_Clicked(object sender, EventArgs e)
    {
		Detail = new NavigationPage(new Page1());
        if (!((IFlyoutPageController)this).ShouldShowSplitMode)
            IsPresented = false;        
    }

    private void btnPage2_Clicked(object sender, EventArgs e)
    {
        Detail = new NavigationPage(new Page2());
        if (!((IFlyoutPageController)this).ShouldShowSplitMode)
            IsPresented = false;
    }
}

Preview on Android device/emulator

Preview on Windows device/emulator

FlyoutLayoutBehavior

In FlyoutPage, FlyoutLayoutBehavior defines How the Flyout menu behaves in a FlyoutPage. Flyout behavior depends on the form factor, orientation of the device, and the value of the FlyoutLayoutBehavior property. The value of FlyoutLayoutBehavior can be Default, Popover, Split, SplitOnLandscape, SplitOnPortrait. Apps running on phones always have Popover behavior. We already have seen the Popover behavior in the above example in which the details page covers or partially covers the Flyout page.

In a Split layout, the FlyoutPage is displayed on the left, whereas the details page is on the right. In the below image, you can see the Split FlyoutLayoutBehavior in the Windows application.

We can also create the FlyoutPage without using ContentPage XAML. Let’s try with a ContentPage (C#). Add a new Item i.e., .NET MAUI ContentPage (C#), and name it as MainPageWithCSharp.cs.

Now set the MainPageWithCSharp as the MainPage for the application.

Add the below code to the page that we created in the above steps. I have added the comments in the code for ease of understanding.

using Microsoft.Maui.Controls;

namespace FlyoutPageDemo;

public class MainPageWithCSharp : FlyoutPage
{
    public MainPageWithCSharp()
    {

        // Create Buttons
        var button1 = new Button()
        {
            Text = "Page 1",
            BackgroundColor = Color.FromArgb("FFFFFF"),
            TextColor = Color.FromArgb("000000")
        };
        var button2 = new Button()
        {
            Text = "Page 2",
            BackgroundColor = Color.FromArgb("FFFFFF"),
            TextColor = Color.FromArgb("000000")
        };

        //Add click event handler on buttons
        button1.Clicked += btnPage1_Clicked;
        button2.Clicked += btnPage2_Clicked;

        // Create FlyoutPage content
        Flyout = new ContentPage
        {
            Title = "Menu",
            Content = new StackLayout
            {
                Children = {
                    button1,
                    button2
                }
            }
        };

        // Set the initial detail page
        Detail = new NavigationPage(new Page1()); 

    }

    private void btnPage1_Clicked(object sender, EventArgs e)
    {
        Detail = new NavigationPage(new Page1());
        if (!((IFlyoutPageController)this).ShouldShowSplitMode)
            IsPresented = false;
    }
    private void btnPage2_Clicked(object sender, EventArgs e)
    {
        Detail = new NavigationPage(new Page2());
        if (!((IFlyoutPageController)this).ShouldShowSplitMode)
            IsPresented = false;
    }
}

Preview in Android device/emulator

I recommend you to go through Microsoft Official Documentation for the MAUI for more examples in which Icon withText is shown in the Flyout with the help of CollectionView Class.  https://learn.microsoft.com/en-us/dotnet/maui/user-interface/pages/flyoutpage