Shell. Работа со страницами приложения

Класс Shell определяет ряд присоединенных свойств, которые можно использовать для глобальной настройки внешнего вида панели инструментов страниц в приложении.

Настройка цветов

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

Например, изменим 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"
    Title="AppShellEx"
    BackgroundColor ="Coral"
    TitleColor ="Red">

        <ShellContent Title="1"  ContentTemplate="{DataTemplate local:MainPage}"/>
        <ShellContent Title="2" ContentTemplate="{DataTemplate local:DetailPage}"/>
</Shell>

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

Также мы можем воспользоваться присоединенным свойством на любой странице приложения, чтобы переопределить цвета. Например, переопределим цвета на странице DetailPage:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AppShellEx.DetailPage"
             Title="DetailPage"
             Shell.BackgroundColor ="Green"
             Shell.TitleColor ="Blue">
    <VerticalStackLayout>
        <Label 
            Text="Welcome to .NET MAUI!"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
    </VerticalStackLayout>
</ContentPage>

Теперь главная страница приложения будет выглядеть также, как и на рисунке выше, а страница DetailPage вот так:

Отключение панели навигации

Чтобы отключить панель навигации на странице (или глобально на всех страницах) необходимо воспользоваться свойством Shell.NavBarIsVisible, например:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AppShellEx.DetailPage"
             Title="DetailPage"
             Shell.BackgroundColor ="Green"
             Shell.TitleColor ="Blue"
             Shell.NavBarIsVisible="False">
    <VerticalStackLayout>
        <Label 
            Text="Welcome to .NET MAUI!"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
    </VerticalStackLayout>
</ContentPage>

Теперь страница DetailPage будет выглядеть следующим образом:

Отображение представлений на панели навигации

Чтобы отобразить на панели навигации какие-либо свои элементы, например, значки, мы должны использовать свойство Shell.TitleView. Например, изменим код страницы MainPage.xaml следующим образом:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AppShellEx.MainPage"
             Title="MainPage">

    <Shell.TitleView>
        <HorizontalStackLayout>
            <Image Source="id.png"/>
            <Label Text="Главная страница" FontSize="18" FontAttributes="Bold" VerticalTextAlignment="Center"/>
        </HorizontalStackLayout>
    </Shell.TitleView>
    
</ContentPage>

Теперь заголовок главной страницы будет выглядеть следующим образом:

Итого

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