Реализация всплывающего элемента

Завершено

Всплывающий элемент — это тип навигации, при котором окно с пунктами меню всплывает из-за края экрана. Он вызывается касанием меню "гамбургер", значком с тремя горизонтальными линиями, сложенными друг на друга.

В этом уроке вы узнаете, как создать приложение, которое реализует всплывающую навигацию в пользовательском интерфейсе мультиплатформенных приложений .NET (MAUI).

Что такое всплывающий элемент?

Всплывающие элементы отображают меню для быстрого переключения контекста в приложении.

Всплывающее меню состоит из нескольких частей: Header, FlyoutItems, MenuItems, Footer.

На следующем рисунке показан визуальный пример элементов всплывающего элемента.

Так как всплывающее меню не всегда отображается, его можно использовать для переключения контекста между концептуально разными частями приложения. Например, один пункт всплывающего меню может привести к одной или нескольким страницам для ввода данных, а другой — к странице сведений.

Всплывающий элемент в приложении .NET MAUI

Класс FlyoutItem позволяет реализовать всплывающий элемент в .NET MAUI. FlyoutItem — это часть парадигмы разработки приложений оболочки, предоставляемой .NET MAUI.

Всплывающий элемент в .NET MAUI возникает при касании элемента FlyoutItem. Автоматически FlyoutItem переключает содержимое, отображаемое в приложении. Вы указываете, что отображается при FlyoutItem нажатии элемента, задав его ShellContent свойство. Это свойство указывает на страницу в приложении.

FlyoutItem необходимо разместить на странице Shell, которая служит главной страницей приложения. У вас может быть сколько угодно FlyoutItem.

В следующем примере создается всплывающий элемент, содержащее два пункта:

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:controls="clr-namespace:Xaminals.Controls"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <FlyoutItem Title="Cats"
                Icon="cat.png">
       <Tab>
           <ShellContent ContentTemplate="{DataTemplate views:CatsPage}" />
       </Tab>
    </FlyoutItem>
    <FlyoutItem Title="Dogs"
                Icon="dog.png">
       <Tab>
           <ShellContent ContentTemplate="{DataTemplate views:DogsPage}" />
       </Tab>
    </FlyoutItem>
</Shell>

Создание всплывающего элемента

В всплывающий элемент можно добавить один или несколько элементов всплывающего элемента. Объект FlyoutItem представляет каждый всплывающий элемент. Каждый объект FlyoutItem должен быть дочерним для подклассового объекта Shell, который служит в качестве MainPage приложения.

Объект Shell имеет неявные операторы преобразования, позволяющие упростить визуальную иерархию оболочки. Это упрощение возможно, поскольку подклассовый Shell объект может содержать FlyoutItem только объекты или TabBar объект, который может содержать только объекты, которые могут содержать только объекты, которые могут содержать Tab только объекты ShellContent .

Эти операторы неявного преобразования позволяют удалить из предыдущего примера объекты FlyoutItem и Tab:

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:controls="clr-namespace:Xaminals.Controls"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
   <ShellContent Title="Cats"
                 Icon="cat.png"
                 ContentTemplate="{DataTemplate views:CatsPage}" />
   <ShellContent Title="Dogs"
                 Icon="dog.png"
                 ContentTemplate="{DataTemplate views:DogsPage}" />
</Shell>

Этот код приводит к всплывающему элементу с двумя элементами. Отображается CatsPage по умолчанию при открытии приложения. При нажатии на второй отображается DogsPage.

Пункты всплывающего меню

Элементы меню можно добавить в всплывающий элемент. Объект MenuItem представляет каждый элемент меню. Пункты меню похожи на кнопки, поскольку при нажатии выполняется действие, а не открывается страница.

Положение объектов MenuItem во всплывающем элементе зависит от порядка их объявления в визуальной иерархии оболочки. Таким образом, все объекты MenuItem, объявленные перед объектами FlyoutItem, будут отображаться перед объектами FlyoutItem во всплывающем элементе, а все объекты MenuItem, объявленные после объектов FlyoutItem, будут отображаться после объектов FlyoutItem во всплывающем элементе.

<Shell ...>
    ...            
    <MenuItem Text="Help"
              IconImageSource="help.png"
              Command="{Binding HelpCommand}"
              CommandParameter="https://learn.microsoft.com/dotnet/maui/fundamentals/shell" />    
</Shell>

Заголовок и нижний колонтитул всплывающего элемента

Всплывающий заголовок — это содержимое, которое при необходимости отображается в верхней части всплывающего элемента. Внешний вид заголовка определяется путем задания объекта с привязываемым свойством Shell.FlyoutHeader :

<Shell ...>
    <Shell.FlyoutHeader>
        <Grid>
            <Image Source="header-image.png" />
        </Grid>
    </Shell.FlyoutHeader>
</Shell>

Всплывающий нижний колонтитул — это содержимое, которое при необходимости отображается в нижней части всплывающего окна. Вы определяете внешний вид нижнего колонтитула, задав объект с привязываемым свойством Shell.FlyoutFooter :

<Shell ...>
    <Shell.FlyoutFooter>
        <Grid>
            <Image Source="footer-image.png" />
        </Grid>
    </Shell.FlyoutFooter>
</Shell>