Ресурсы и стили. Реакция на изменение системной темы устройства (AppThemeBinding)

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

Расширение разметки AppThemeBinding

Расширение AppThemeBinding разметки позволяет использовать ресурс, в зависимости от текущей системной темы.

Расширение разметки AppThemeBinding использует следующие свойства:

Например, создадим новое приложение .NET MAUI и изменим код страницы 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="MauiApp10.MainPage"
             Background="{AppThemeBinding Dark={StaticResource BackgroundForDark}, Light={StaticResource BackgroundForLight}}">

    <ContentPage.Resources>
        <ResourceDictionary>
            <Color x:Key="TextForLight">Black</Color>
            <Color x:Key="TextForDark">White</Color>
            <Color x:Key="BackgroundForLight">LightGreen</Color>
            <Color x:Key="BackgroundForDark">DarkBlue</Color>
        </ResourceDictionary>
    </ContentPage.Resources>


    <ScrollView>
        <VerticalStackLayout
            Padding="30,0"
            Spacing="25">
            <Label
                Text="Hello, World!"
                TextColor="{AppThemeBinding Dark={StaticResource TextForDark}, Light={StaticResource TextForLight}}"
                SemanticProperties.HeadingLevel="Level1" />
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

Здесь мы определили четыре ресурса — по два для каждой темы оформления: цвет текста и фон страницы для светлой темы и цвет текста и цвет фона страницы для темной темы.

<ContentPage.Resources>
    <ResourceDictionary>
        <Color x:Key="TextForLight">Black</Color>
        <Color x:Key="TextForDark">White</Color>
        <Color x:Key="BackgroundForLight">LightGreen</Color>
        <Color x:Key="BackgroundForDark">DarkBlue</Color>
    </ResourceDictionary>
</ContentPage.Resources>

Эти темы мы используем в AppThemeBinding для метки:

<Label
    Text="Hello, World!"
    TextColor="{AppThemeBinding Dark={StaticResource TextForDark}, Light={StaticResource TextForLight}}"
    SemanticProperties.HeadingLevel="Level1" />

и для страницы

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp10.MainPage"
             Background="{AppThemeBinding Dark={StaticResource BackgroundForDark}, Light={StaticResource BackgroundForLight}}">

Теперь наше приложение будет реагировать на изменение системной темы оформления. Запустите приложение, например, в Windows. Если у вас в этот момент установлена светлая системная тема, то вы увидите следующую страницу приложения:

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

Аналогичным образом м можем применять не только отдельные ресурсы, но и стили оформления. Для этого достаточно определить в словаре ресурсов несколько стилей и использовать их с AppThemeBinding при назначении свойству Style элемента управления, например:

<?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="MauiApp10.MainPage"
             Background="{AppThemeBinding Dark={StaticResource BackgroundForDark}, Light={StaticResource BackgroundForLight}}">

    <ContentPage.Resources>
        <ResourceDictionary>
            <Color x:Key="BackgroundForLight">LightGreen</Color>
            <Color x:Key="BackgroundForDark">DarkBlue</Color>

            <Style TargetType="Label" x:Key="light">
                <Setter Property="TextColor" Value="DarkBlue"></Setter>
            </Style>

            <Style TargetType="Label" x:Key="dark">
                <Setter Property="TextColor" Value="LightBlue"></Setter>
            </Style>

        </ResourceDictionary>
    </ContentPage.Resources>


    <ScrollView>
        <VerticalStackLayout
            Padding="30,0"
            Spacing="25">
            <Label
                Text="Hello, World!"
                Style="{AppThemeBinding Dark={StaticResource dark}, Light={StaticResource light}}"
                SemanticProperties.HeadingLevel="Level1" />
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

Теперь для метки в зависимости от системной темы будет применяться стиль.

Итого

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