Реализация навигации на основе вкладок с использованием оболочки .NET MAUI

10 мин

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

В этом уроке вы узнаете, как создать приложение, реализующее навигацию по вкладкам.

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

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

На мобильных устройствах размер полосы вкладок, как правило, ограничен, в связи с чем, в зависимости от размера экрана и ориентации устройства, на ней может отображаться фиксированное количество вкладок. Рекомендуется использовать только три-четыре вкладки. Если вкладок будет больше, возникает риск, что они не поместятся на экраны некоторых устройств. В операционных системах, поддерживаемых .NET MAUI, допускается использовать область переполнения. В этой области пользователь может получить дополнительное пространство для доступа к вкладкам, которые не умещаются на экране. Однако переход на эти вкладки переполнения требует дополнительных шагов пользователем. Кроме того, такие разделы сложнее найти.

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

Объект используется TabBar для реализации навигации по вкладкам в приложении оболочки .NET MAUI. Объект TabBar отображает набор вкладок и автоматически переключает отображаемое содержимое, когда пользователь выбирает соответствующую вкладку. На рисунке ниже показаны области пользовательского интерфейса.

Иллюстрация, показывающая пример страницы tabbed с областью содержимого и нижней панелью вкладок, содержащей три дочерних страницы: Глобус, Компас и карта.

Чтобы использовать вкладки в приложении оболочки .NET MAUI, создайте экземпляр класса TabBarкак наследник класса Shell. Затем добавьте объекты Tab в объект класса TabBar. В объекте Tab объекту ShellContent должен быть присвоен объект ContentPage.

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

Экземпляр TabBar можно создать как наследник класса Shell. При необходимости добавьте объекты Tab в качестве дочерних элементов TabBar. В объекте Tab объекту ShellContent должен быть присвоен объект ContentPage.

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <TabBar>
       <Tab Title="Moon Phase"
            Icon="moon.png">
           <ShellContent ContentTemplate="{DataTemplate local:MoonPhasePage}" />
       </Tab>
       <Tab Title="Sunrise"
            Icon="sun.png">
           <ShellContent ContentTemplate="{DataTemplate local:SunrisePage}" />
       </Tab>
    </TabBar>
</Shell>

Всплывающий элемент может отображать страницу с панелью вкладок, содержащей одну или несколько вкладок.

Чтобы реализовать эту структуру, добавьте <ShellContent> элемент на каждой <FlyoutItem> вкладке, которую вы хотите отобразить.

В Title задайте Icon и <ShellContent> — заголовок и значок вкладки, соответственно.

<FlyoutItem Title="Astronomy" Icon="moon.png">
    <ShellContent Title="Moon Phase" Icon="moon.png"
        ContentTemplate="{DataTemplate local:MoonPhasePage}"/>

    <ShellContent Title="Sunrise" Icon="sun.png"
        ContentTemplate="{DataTemplate local:SunrisePage}"/>
</FlyoutItem>

<FlyoutItem Title="About" Icon="question.png">
    <ShellContent
        ContentTemplate="{DataTemplate local:AboutPage}"/>
</FlyoutItem>

Обратная связь

Были ли сведения на этой странице полезными?

Реализация навигации на основе вкладок с использованием оболочки .NET MAUI

Что такое навигация на основе вкладок?

Навигация на основе вкладок в приложении .NET MAUI

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

Вкладки во всплывающем меню

Обратная связь