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

TabbedPage

  • Статья

.NET MAUI TabbedPage.

Многоплатформенный пользовательский интерфейс приложения .NET (.NET MAUI) TabbedPage поддерживает коллекцию дочерних элементов типа Page, только одна из которых полностью видна одновременно. Каждый дочерний элемент определяется рядом вкладок в верхней или нижней части страницы. Как правило, каждый дочерний элемент будет и ContentPage при выборе ее вкладки отображается содержимое страницы.

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

  • BarBackgroundBrushТип , определяет фон панели вкладок.
  • BarBackgroundColor( тип Color) определяет цвет фона панели вкладок.
  • BarTextColorColorТип , представляет цвет текста на панели вкладок.
  • SelectedTabColorColorТип , указывает цвет вкладки при его выборе.
  • UnselectedTabColorColorТип , представляет цвет вкладки при его выборе.

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

Заголовок вкладки определяется свойством Page.Title дочерней страницы, а значок вкладки определяется Page.IconImageSource свойством дочерней страницы.

В TabbedPage каждый объект Page создается при формировании TabbedPage. Это может привести к плохому интерфейсу пользователя, особенно если TabbedPage это корневая страница вашего приложения. Однако оболочка .NET MAUI позволяет создавать страницы с помощью панели вкладок по запросу в ответ на навигацию. Дополнительные сведения о приложениях Оболочки см. в разделе Shell.

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

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

Создание объекта TabbedPage

Создать TabbedPage можно двумя способами:

Важно!

Объект должен TabbedPage быть заполнен NavigationPage только объектами и ContentPage объектами.

Независимо от подхода, расположение панели вкладок в ней TabbedPage зависит от платформы:

  • В iOS список вкладок отображается в нижней части экрана, а содержимое страницы выше. Каждая вкладка состоит из заголовка и значка. В книжной ориентации значки панели вкладок отображаются над заголовками вкладок. В альбомной ориентации значки и заголовки отображаются рядом. Кроме того, в зависимости от устройства и ориентации может отображаться обычная или компактная панель вкладок. При наличии более пяти вкладок появляется вкладка Дополнительно, используемая для доступа к дополнительным вкладкам.
  • В Android список вкладок отображается в верхней части экрана, а содержимое страницы находится ниже. Каждая вкладка состоит из заголовка и значка. Но эти вкладки можно переместить в нижнюю часть экрана в зависимости от конкретной платформы. При наличии более пяти вкладок, список которых отображается внизу экрана, появляется вкладка Дополнительно, которую можно использовать для доступа к дополнительным вкладкам. Сведения о перемещении вкладок в нижней части экрана см. в разделе "Размещение панели инструментов TabbedPage" в Android.
  • В Windows список вкладок отображается в верхней части экрана, а содержимое страницы находится ниже. У каждой вкладки есть заголовок.

Заполнение TabbedPage коллекцией Page

Можно TabbedPage заполнить коллекцию дочерних Page объектов, которые обычно будут ContentPage объектами. Это достигается путем добавления ContentPage объектов в качестве дочерних TabbedPageобъектов:

<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:TabbedPageWithNavigationPage"
            x:Class="TabbedPageWithNavigationPage.MainPage">
    <local:TodayPage />
    <local:SchedulePage />
    <local:SettingsPage />
</TabbedPage>

Page Объекты, добавляемые в качестве дочерних TabbedPage элементов, добавляются в коллекцию Children . Свойство Children класса MultiPage<T>, из которого происходит TabbedPage, – это свойство ContentPropertyMultiPage<T>. Таким образом, в XAML нет необходимости явно назначать объекты Page свойству Children.

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

.NET MAUI tab bar on a TabbedPage.

Содержимое страницы для вкладки отображается при выборе вкладки.

Заполнение tabbedPage с помощью DataTemplate

TabbedPageнаследует ItemsSourceсвойства и SelectedItem ItemTemplateпривязываемые MultiPage<T> свойства из класса. Эти свойства позволяют динамически создавать TabbedPage дочерние объекты, устанавливая свойство в IEnumerable коллекцию объектов с общедоступными свойствами, подходящими для привязок данных, и задав ItemsSource ItemTemplate свойству тип DataTemplate страницы в качестве корневого элемента.

В следующем примере показано динамическое создание дочерних TabbedPage элементов:

<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:TabbedPageDemo"
            x:Class="TabbedPageDemo.MainPage"
            ItemsSource="{x:Static local:MonkeyDataModel.All}">
    <TabbedPage.ItemTemplate>
        <DataTemplate>
            <ContentPage Title="{Binding Name}"
                         IconImageSource="monkeyicon.png">
                <StackLayout Padding="5, 25">
                    <Label Text="{Binding Name}"
                           FontAttributes="Bold"
                           FontSize="18"
                           HorizontalOptions="Center" />
                    <Image Source="{Binding PhotoUrl}"
                           HorizontalOptions="Center"
                           WidthRequest="200"
                           HeightRequest="200" />
                    <StackLayout Padding="50, 10">
                        <StackLayout Orientation="Horizontal">
                            <Label Text="Family: "
                                   FontAttributes="Bold" />
                            <Label Text="{Binding Family}" />
                        </StackLayout>
                        ...
                    </StackLayout>
                </StackLayout>
            </ContentPage>
        </DataTemplate>
    </TabbedPage.ItemTemplate>
</TabbedPage>

В этом примере каждая вкладка состоит из объекта ContentPage, который использует объекты Image и Label для вывода данных на вкладку:

Screenshot of a .NET MAUI TabbedPage.

Навигация может выполняться на вкладке, при условии, что ContentPage объект упакован в NavigationPage объект:

<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:TabbedPageWithNavigationPage"
            x:Class="TabbedPageWithNavigationPage.MainPage">
    <local:TodayPage />
    <NavigationPage Title="Schedule"
                    IconImageSource="schedule.png">
        <x:Arguments>
            <local:SchedulePage />
        </x:Arguments>
    </NavigationPage>
</TabbedPage>

В этом примере TabbedPage заполнена двумя объектами Page. Первый дочерний ContentPage объект является объектом, а второй дочерний — NavigationPage это объект, содержащий ContentPage объект.

ContentPage При оболочке в NavigationPageвиде переадресации навигации по страницам переадресации можно выполнить путем вызова PushAsync метода в Navigation свойстве ContentPage объекта:

await Navigation.PushAsync(new UpcomingAppointmentsPage());

Дополнительные сведения о выполнении навигации с помощью класса см. в NavigationPage разделе NavigationPage.

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

Хотя NavigationPage можно поместить в TabbedPage, не рекомендуется размещать TabbedPage в NavigationPage.