Поделиться через

FlyoutPage

  • Статья

Browse sample. Обзор примера

.NET MAUI FlyoutPage.

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

У A FlyoutPage есть два поведения макета:

  • В макете всплывающего окна страница сведений охватывает или частично охватывает всплывающее окно. При выборе элемента на всплывающей странице перейдите на соответствующую страницу сведений. Приложения, работающие на телефонах, всегда используют это поведение макета.
  • В разделенном макете всплывающее меню отображается слева, а страница сведений находится справа. Приложения, работающие на планшетах или на рабочем столе, могут использовать это поведение макета с Windows, используя его по умолчанию.

Дополнительные сведения о поведении макета см. в разделе "Поведение макета".

FlyoutPage определяет следующие свойства:

  • Detail, тип Page, определяет страницу сведений, отображаемую для выбранного элемента на всплывающей странице.
  • Flyout, тип Page, определяет всплывающее меню страницы.
  • FlyoutLayoutBehaviorFlyoutLayoutBehaviorТип , указывает поведение макета всплывающих и подробных страниц.
  • IsGestureEnabled, типа bool, определяет, будет ли жест прокрутки переключаться между всплывающий элемент и страницы сведений. Значение по умолчанию этого свойства равно true.
  • IsPresentedboolТип , определяет, отображается ли всплывающее меню или страница сведений. Значением по умолчанию этого свойства является falseотображение страницы сведений. Для отображения всплывающей страницы должно быть задано true значение.

Свойства IsGestureEnabledIsPresentedи FlyoutLayoutBehavior свойства поддерживаются объектами, что означает, что они могут быть целевыми BindableProperty объектами привязки данных и стили.

FlyoutPage также определяет событие, которое возникает IsPresentedChanged при IsPresented изменении значения свойства.

Предупреждение

FlyoutPage несовместим с приложениями оболочки .NET MAUI Shell, и при попытке использовать FlyoutPage в приложении оболочки исключение будет вызвано исключение. Дополнительные сведения о приложениях Оболочки см. в разделе Shell.

Создание FlyoutPage

Чтобы создать всплывающий элемент страницы, создайте FlyoutPage объект и задайте его Flyout и Detail свойства. Свойство Flyout должно иметь ContentPage значение object, а Detail свойство должно быть задано как TabbedPageобъект или NavigationPageContentPage объект. Это позволит обеспечить согласованность пользовательского интерфейса на всех платформах.

Важно!

Приложение FlyoutPage предназначено для создания корневой страницы приложения и его использование в качестве дочерней страницы в других типах страниц может привести к непредвиденному и несогласованном поведению.

В следующем примере показано FlyoutPage , как задать Flyout параметры и Detail свойства:

<FlyoutPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:FlyoutPageNavigation"
            x:Class="FlyoutPageNavigation.MainPage">
    <FlyoutPage.Flyout>
        <local:FlyoutMenuPage x:Name="flyoutPage" />
    </FlyoutPage.Flyout>
    <FlyoutPage.Detail>
        <NavigationPage>
            <x:Arguments>
                <local:ContactsPage />
            </x:Arguments>
        </NavigationPage>
    </FlyoutPage.Detail>
</FlyoutPage>

В этом примере Flyout свойство имеет ContentPage значение объекта, а Detail свойство имеет NavigationPage значение, содержащее ContentPage объект.

В следующем примере показано определение FlyoutMenuPage объекта, который имеет тип ContentPage:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:FlyoutPageNavigation"
             x:Class="FlyoutPageNavigation.FlyoutMenuPage"
             Padding="0,40,0,0"
             IconImageSource="hamburger.png"
             Title="Personal Organiser">
    <CollectionView x:Name="collectionView"
                    x:FieldModifier="public"
                    SelectionMode="Single">
        <CollectionView.ItemsSource>
            <x:Array Type="{x:Type local:FlyoutPageItem}">
                <local:FlyoutPageItem Title="Contacts"
                                      IconSource="contacts.png"
                                      TargetType="{x:Type local:ContactsPage}" />
                <local:FlyoutPageItem Title="TodoList"
                                      IconSource="todo.png"
                                      TargetType="{x:Type local:TodoListPage}" />
                <local:FlyoutPageItem Title="Reminders"
                                      IconSource="reminders.png"
                                      TargetType="{x:Type local:ReminderPage}" />
            </x:Array>
        </CollectionView.ItemsSource>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Grid Padding="5,10">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="30"/>
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Image Source="{Binding IconSource}" />
                    <Label Grid.Column="1"
                           Margin="20,0"
                           Text="{Binding Title}"
                           FontSize="20"
                           FontAttributes="Bold"
                           VerticalOptions="Center" />
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

В этом примере всплывающее меню состоит из CollectionView страницы, заполненной данными, задав его ItemsSource свойство массиву FlyoutPageItem объектов. В следующем примере показано определение FlyoutPageItem класса:

public class FlyoutPageItem
{
    public string Title { get; set; }
    public string IconSource { get; set; }
    public Type TargetType { get; set; }
}

Объект DataTemplate присваивается свойству CollectionView.ItemTemplate для отображения каждого объекта FlyoutPageItem. Объект DataTemplate содержит объект Grid, который состоит из объектов Image и Label. Объект Image отображает значение свойства IconSource, а объект Label отображает значение свойства Title для каждого объекта FlyoutPageItem. Кроме того, всплывающий элемент страницы имеет свои Title свойства и IconImageSource набор свойств. Если у страницы сведений есть заголовок, на ней появится значок.

Примечание.

Для страницы Flyout должно быть задано свойство Title, иначе возникнет исключение.

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

.NET MAUI flyout.

Создание и отображение страницы сведений

Объект FlyoutMenuPage содержит CollectionView объект, на который ссылается MainPage класс. Это позволяет MainPage классу зарегистрировать обработчик события SelectionChanged . Это позволяет MainPage объекту задать Detail свойство на страницу, представляющую выбранный CollectionView элемент. В следующем примере показан обработчик событий:

public partial class MainPage : FlyoutPage
{
    public MainPage()
    {
        ...
        flyoutPage.collectionView.SelectionChanged += OnSelectionChanged;
    }

    void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        var item = e.CurrentSelection.FirstOrDefault() as FlyoutPageItem;
        if (item != null)
        {            
            Detail = new NavigationPage((Page)Activator.CreateInstance(item.TargetType));
            if (!((IFlyoutPageController)this).ShouldShowSplitMode)
                IsPresented = false;
        }
    }
}

В этом примере OnSelectionChanged обработчик событий извлекает CurrentSelection из CollectionView объекта и задает страницу сведений экземпляру типа страницы, хранящегося в TargetType свойстве объекта FlyoutPageItem. Страница сведений отображается путем задания FlyoutPage.IsPresented свойства false, если он FlyoutPage не использует разделенный макет. FlyoutPage При использовании разбиения макета всплывающие и подробные страницы отображаются и поэтому не требуется задать FlyoutPage.IsPresented свойство.

Поведение макета

FlyoutPage Отображение всплывающих и подробных страниц зависит от форм-фактора устройства, на котором работает приложение, ориентация устройства и значение FlyoutLayoutBehavior свойства. Это свойство должно иметь значение перечисления FlyoutLayoutBehavior , которое определяет следующие элементы:

  • Default — страницы отображаются с помощью платформы по умолчанию.
  • Popover — обложка страницы сведений или частично охватывает всплывающее меню.
  • Split — всплывающее меню отображается слева, а страница сведений находится справа.
  • SplitOnLandscape — разделенный экран используется, когда устройство находится в альбомной ориентации.
  • SplitOnPortrait — разделенный экран используется, когда устройство находится в книжной ориентации.

В следующем примере показано, как задать FlyoutLayoutBehavior свойство в :FlyoutPage

<FlyoutPage ...
            FlyoutLayoutBehavior="Split">
  ...
</FlyoutPage>

Важно!

Значение FlyoutLayoutBehavior свойства влияет только на приложения, работающие на планшетах или на рабочем столе. Приложения, работающие на телефонах, всегда имеют Popover поведение.