Страницы приложения .NET MAUI. Класс TabbedPage

Страница TabbedPage позволяет размещать дочерние страницы (обычно ContentPage) на отдельных вкладках и, при чем, в конкретный момент времени на экране будет показываться только одна дочерняя страница.

Свойства TabbedPage

Страница TabbedPage предоставляет нам следующие свойства для работы:

Что касается текста вкладки и её иконки, то эти значения берутся из свойств дочерних страниц. Попробуем создать страницу TabbedPage в нашем приложении.

Создание TabbedPage

Создадим новый проект .NET MAUI и сразу добавим в него несколько пустых страниц, например, чтобы получилась вот такая структура проекта:

Три новые страницы проекта будут выступать в качестве дочерних для TabbedPage. Изменим код страницы MainPage следующим образом:

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Tabbed.MainPage" 
             xmlns:local="clr-namespace:Tabbed">

    <local:NewPage1/>
    <local:NewPage2/>
    <local:NewPage3/>

</TabbedPage>

Также изменим файл отдельного кода MainPage.xaml.cs:

namespace Tabbed
{
    public partial class MainPage : TabbedPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }
}

Теперь сделаем страницу MainPage главной страницей нашего приложения. Изменим файл отдельного кода App.xaml.cs следующим образом:

namespace Tabbed
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();
        }

        protected override Window CreateWindow(IActivationState? activationState)
        {
            return new Window(new MainPage());
        }
    }
}

Теперь можно запустить приложение и оценить результат:

Стоит отметить, что все дочерние страницы TabbedPage создаются в момент создания главной страницы TabbedPage. Такое поведение может плохо сказаться на производительности вашего приложения, в особенности, если дочерние страницы «тяжелые», а TabbedPage выступает в роли главной страницы приложения (как у нас в примере). В .NET MAUI для удобства и оптимизации затрат ресурсов на создание удобной навигации в приложении может применяться элемент Shell (оболочка), о котором мы поговорим в следующей части.

Итого

Страница TabbedPage используется для создания панели вкладок где каждая вкладка — это отдельная дочерняя страница. Внешний вид TabbedPage зависит от платформы на которой запускается приложение.