Страницы приложения .NET MAUI. Класс FlyoutPage

Страница FlyoutPage в .NET MAUI оперирует сразу двумя страницами приложения — страницей бокового меню в котором мы можем располагать, например, ссылки на другие страницы приложения и непосредственно страницей с элементами управления.

Свойства FlyoutPage

Страница FlayoutPage предоставляет нам следующие свойства для работы:

Рассмотрим использование этих свойств на примере.

Создание FlayoutPage

Создадим новое приложение .NET MAUI и внесем в него следующие изменения. Во-первых, добавим в проект новую страницу ContentPage, которую назовем MenuPage:

Эта страница будет выступать в качестве меню. Изменим XAML-код страницы следующим образом:

<?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="Flyout.MenuPage"
             Title="MenuPage">
    <VerticalStackLayout Padding="10">
        <Label 
            Text="Меню приложения"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
        <Button Text="Кнопка"/>
    </VerticalStackLayout>
</ContentPage>

Теперь нам необходимо создать страницу, на которой будут отображаться элементы управления. Добавим в проект новую страницу с названием DetailPage и изменим её XAML-код следующим образом:

<?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="Flyout.DetailPage"
             Title="DetailPage">
    <VerticalStackLayout>
        <Label 
            Text="Detail Page"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
    </VerticalStackLayout>
</ContentPage>

Таким образом, теперь структура нашего проекта будет следующей:

В качестве FlyoutPage у нас будет выступать страница MainPage. Изменим её 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="Flyout.MainPage"
            xmlns:local="clr-namespace:Flyout"
            FlyoutLayoutBehavior="Popover">

    <FlyoutPage.Flyout>
        <local:MenuPage/>
    </FlyoutPage.Flyout>
    
    <FlyoutPage.Detail>
        <NavigationPage>
            <x:Arguments>
                <local:DetailPage/>
            </x:Arguments>    
        </NavigationPage>
    </FlyoutPage.Detail>
    
</FlyoutPage>

Здесь мы определили в качестве меню страницу MenuPage:

<FlyoutPage.Flyout>
    <local:MenuPage/>
</FlyoutPage.Flyout>

а в качестве страницы с данными — NavigationPage которой передали в качестве аргумента конструктора нашу страницу DetailPage

<FlyoutPage.Detail>
    <NavigationPage>
        <x:Arguments>
            <local:DetailPage/>
        </x:Arguments>    
    </NavigationPage>
</FlyoutPage.Detail>

Также, нам необходимо изменить в файле отдельного кода класс MainPage, сделав его наследником FlyoutPage:

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

Теперь можно проверить результат. При первом запуске приложения боковое меню будет скрыто:

Вызов меню

Изменим поведение макета страницы, изменив значение свойства FlyoutLayoutBehavior на Split:

<FlyoutPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            x:Class="Flyout.MainPage"
            xmlns:local="clr-namespace:Flyout"
            FlyoutLayoutBehavior="Split">

Теперь в приложении боковое меню всегда будет видно на экране:

Итого

Страница FlyoutPage используется в .NET MAUI для создания страницы с боковым меню и оперирует сразу двумя страницами — страницей-меню (обычно это ContentPage) и страницей с данными (обычно это NavigationPage).