Shell. Работа с вкладками (TabBar и Tab)

При использовании Shell в приложениях .NET MAUI, навигация по страницам может осуществляться как с использованием всплывающего меню, так и с использованием нижней панели вкладок. Для того, чтобы задействовать нижнюю панель вкладок в качестве элемента навигации верхнего уровня используются элементы TabBar.

Элемент TabBar

Чтобы включить в качестве элемента навигации нижнюю панель вкладок, необходимо определить в Shell элемент TabBar и разместить в нем один или несколько элементов Tab. Каждый Tab, в итоге, будет отображаться как вкладка. Здесь стоит отметить, что внешний вид панели вкладок зависит от платформы. Например, изменим код AppShell.xaml нашего приложения следующим образом:

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="AppShellEx.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:AppShellEx"
    Title="AppShellEx">

    <TabBar>
        <Tab Title="Home">
            <ShellContent  ContentTemplate="{DataTemplate local:MainPage}"/>
        </Tab>
        <Tab Title="Detail">
            <ShellContent ContentTemplate="{DataTemplate local:DetailPage}"/>
        </Tab>
    </TabBar>
</Shell>

Здесь мы разместили элементы меню на двух вкладках. В Windows мы увидим следующее меню:

В Android — это будет действительно нижняя панель вкладок

Кроме этого, по умолчанию, наличие в Shell элемента TabBar полностью отключает боковое меню. Проверить это достаточно просто — добавим в Shell элемент ShellContent или FlyoutItem, например:

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="AppShellEx.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:AppShellEx"
    
    Title="AppShellEx">

    <TabBar>
        <Tab Title="Home">
            <ShellContent  ContentTemplate="{DataTemplate local:MainPage}"/>
        </Tab>
        <Tab Title="Detail">
            <ShellContent ContentTemplate="{DataTemplate local:DetailPage}"/>
        </Tab>
    </TabBar>


    <FlyoutItem Title="Detail" FlyoutIcon="phone.png" Route="Detail">
        <ShellContent ContentTemplate="{DataTemplate local:DetailPage}"/>
    </FlyoutItem>
</Shell>

Так как в Shell присутствует элемент TabBar, то последний элемент меню не будет виден в приложении.

Также, если TabBar содержит более пяти вкладок Tab, то на мобильном устройстве это приведет к тому, что все прочие вкладки скроются за кнопкой «More», а в Windows такое поведение будет только, если для вкладок не достаточно места на экране. Например, изменим код оболочки следующим образом:

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="AppShellEx.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:AppShellEx"
    
    Title="AppShellEx">

    <TabBar>
        <Tab Title="1">
            <ShellContent  ContentTemplate="{DataTemplate local:MainPage}"/>
        </Tab>
        <Tab Title="2">
            <ShellContent ContentTemplate="{DataTemplate local:DetailPage}"/>
        </Tab>
        <Tab Title="3">
            <ShellContent  ContentTemplate="{DataTemplate local:MainPage}"/>
        </Tab>
        <Tab Title="4">
            <ShellContent ContentTemplate="{DataTemplate local:DetailPage}"/>
        </Tab>
        <Tab Title="5">
            <ShellContent  ContentTemplate="{DataTemplate local:MainPage}"/>
        </Tab>
        <Tab Title="6">
            <ShellContent ContentTemplate="{DataTemplate local:DetailPage}"/>
        </Tab>
        <Tab Title="7">
            <ShellContent  ContentTemplate="{DataTemplate local:MainPage}"/>
        </Tab>
        <Tab Title="8">
            <ShellContent ContentTemplate="{DataTemplate local:DetailPage}"/>
        </Tab>
    </TabBar>
</Shell>

Внешний вид панели вкладок в Windows будет таким:а при нехватке места для размещения всех вкладок:

при нажатии на кнопку «…» появится контекстное меню с оставшимися пунктами. В Android вкладки будут сразу сгруппированы:

Внешний вид вкладок

Для изменения внешнего вида вкладок используются присоединенные свойства Shell:

Например, изменим внешний вид вкладок в нашем меню:

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="AppShellEx.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:AppShellEx"
    
    Title="AppShellEx">

    <TabBar Shell.TabBarBackgroundColor="Coral" Shell.TabBarForegroundColor="Yellow" Shell.TabBarTitleColor="Blue">
        <Tab Title="1">
            <ShellContent  ContentTemplate="{DataTemplate local:MainPage}"/>
        </Tab>
        <Tab Title="2">
            <ShellContent ContentTemplate="{DataTemplate local:DetailPage}"/>
        </Tab>
        <Tab Title="3">
            <ShellContent  ContentTemplate="{DataTemplate local:MainPage}"/>
        </Tab>
        <Tab Title="4">
            <ShellContent ContentTemplate="{DataTemplate local:DetailPage}"/>
        </Tab>
        <Tab Title="5">
            <ShellContent  ContentTemplate="{DataTemplate local:MainPage}"/>
        </Tab>
        <Tab Title="6">
            <ShellContent ContentTemplate="{DataTemplate local:DetailPage}"/>
        </Tab>
        <Tab Title="7">
            <ShellContent  ContentTemplate="{DataTemplate local:MainPage}"/>
        </Tab>
        <Tab Title="8">
            <ShellContent ContentTemplate="{DataTemplate local:DetailPage}"/>
        </Tab>
    </TabBar>
</Shell>

Здесь мы определили у элемента TabBar три свойства, отвечающие за цвет панели вкладок. Теперь запустим приложение и посмотрим на результат.

Итого

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