Shell. Содержимое оболочки (ShellContent)

Элемент Shell в .NET MAUI значительно упрощает разработку приложений, предоставляя основные функции, необходимые большинству приложений

Так Shell предоставляет нам:

• единое место для описания визуальной иерархии приложения (страниц приложения, меню и т.д.);
• общий пользовательский интерфейс навигации;
• схему навигации на основе URI, позволяющую реализовать переход на любую страницу в приложении, использовать строки запросов в URI, как это делается, например, при разработке web-приложений;
• интегрированный обработчик поиска в приложении.

Используя Shell, нам нет необходимости самостоятельно описывать различные типы страниц в приложении — достаточно указать какие страницы необходимо использовать в приложении, какие страницы будут выступать в качестве модальных окон и так далее.

Так как Shell — это достаточно большой компонент с множеством различных свойств, то рассматривать его мы будем по частям. И начнем с основных моментов использования этого элемента в приложениях .NET MAUI.

Создание приложения .NET MAUI с Shell

С Shell мы сталкиваемся, буквально, с первого знакомства с .NET MAUI — шаблон приложения, который мы каждый раз используем при изучении элементов управления, как раз уже содержит настроенный элемент Shell. Например, создадим новое приложение .NET MAUI и посмотрим на XAML-код файла 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"
    Shell.FlyoutBehavior="Flyout"
    Title="AppShellEx">

    <ShellContent
        Title="Home"
        ContentTemplate="{DataTemplate local:MainPage}"
        Route="MainPage" />

</Shell>

Корневым элементом как раз выступает Shell у которого по умолчанию определены свойства Shell.FlyoutBehavior и Title. Содержимое Shell представлено, на данный момент, одним элементом — ShellContent, который описывает единственную страницу приложения, которую мы и видим на экране, когда запускаем приложение.

Страница AppShell передается в конструктор окна Window при запуске приложения. Этот конструктор мы также использовали, когда изучали, например, NavigationPage и по умолчанию в шаблонном приложении он выглядит так:

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

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

1. FlyoutItem или TabBar. Элемент FlyoutItem представляет элемент во всплывающем меню и используется, когда шаблон навигации для приложения требует использования всплывающего меню. То есть, в данном случае, Shell упрощает нам работу с FlyoutPage. Элемент TabBar представляет нижнюю панель вкладок и используется, когда шаблон навигации для приложения не требует создания всплывающего меню. Опять же, здесь можно вспомнить TabbedPage.
2. Tab представляет сгруппированное в нижних вкладках содержимое. Каждый объект Tab является дочерним для объекта FlyoutItem или TabBar.
3. ShellContent— представляет объекты для каждой страницы ContentPage.

Попробуем немного изменить шаблонное приложение, используя возможности Shell. Добавим в проект ещё одну страницу типа ContentPage с названием DetailPage:

Теперь перейдем в файл 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"
    Shell.FlyoutBehavior="Flyout"
    Title="AppShellEx">

    <ShellContent
        Title="Home"
        ContentTemplate="{DataTemplate local:MainPage}"
        Route="MainPage" />

    <ShellContent
    Title="Detail"
    ContentTemplate="{DataTemplate local:DetailPage}"
    Route="Detail" />

</Shell>

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

То есть от нас не потребовалось никаких дополнительных действий, чтобы добавить новую страницу в боковое меню — только добавить элемент ShellContent в оболочку. Достигается это в .NET MAUI благодаря неявным преобразованиям. Теперь мы можем выбрать в меню пункт Detail и перейти на соответствующую страницу и, при этом, будет задействована навигация с использованием URI — значение URI мы указываем в свойстве ShellContent.Route.

В последнем свойстве ShellContent.ContentTemplate мы, используя расширение XAML DataTemplate указываем страницу, которую необходимо отобразить пользователю при выборе соответствующего пункта меню.

Ну и раз мы затронули работу с ShellContent и боковым меню, то рассмотрим ещё несколько моментов работы с этими элементами.

Свойства ShellContent

Среди множества свойств ShellContent можно выделить следующие полезные для нас свойства:

Например, сохраним в папку Resources/Images какую-нибудь картинку и используем её для элемента меню «Detail», который изменим в коде XAML следующим образом:

<ShellContent
Title="Detail"
Icon="phone.png"
FlyoutItemIsVisible="true"
Route="Detail">
    <ShellContent.Content>
        <local:DetailPage/>
    </ShellContent.Content>
</ShellContent>

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

Теперь пункт меню получил свою иконку. Аналогичным образом мы можем создавать и другие элементы всплывающего меню. В следующей части мы будем изучать именно этот момент — работу со всплывающим меню.

Итого

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