Оформить приложение

Browse sample.Просмотрите пример. Обзор примера

.NET MAUI приложения могут динамически реагировать на изменения стиля во время выполнения, используя расширение разметки DynamicResource. Это расширение разметки аналогично расширению разметки StaticResource, поскольку оба используют ключ словаря для извлечения значения из ResourceDictionary. Однако тогда как StaticResource расширение разметки выполняет один поиск в словаре, DynamicResource расширение разметки поддерживает активную ссылку на ключ словаря. Поэтому, если значение, связанное с ключом, заменяется, изменение применяется к VisualElement. Это позволяет реализовать их во время выполнения в приложениях .NET MAUI.

Процесс реализации тем среды выполнения в приложении .NET MAUI выглядит следующим образом:

  1. Определите ресурсы для каждой темы в ResourceDictionary. Дополнительные сведения см. в разделе Определение тем.
  2. Задайте тему по умолчанию в файле App.xaml приложения. Для получения дополнительной информации см. Установка темы по умолчанию.
  3. Используйте ресурсы темы в приложении с помощью расширения разметки DynamicResource. Дополнительные сведения см. в разделе Использование ресурсов темы.
  4. Добавьте код для загрузки темы во время выполнения. Дополнительные сведения см. в Загрузка темы во время выполнения.

Внимание

Используйте расширение разметки StaticResource, если вашему приложению не нужно динамически изменять темы во время выполнения. Если вы ожидаете переключения тем во время работы приложения, используйте расширение разметки , которое позволяет обновлять ресурсы во время выполнения.

На следующем снимка экрана показаны тематические страницы с приложением iOS с помощью светлой темы и приложения Android с темной темой:

Screenshot of the main page of a themed app.Снимок экрана: главная страница тематических приложений.

Примечание.

Для изменения темы во время выполнения требуется использование определений стилей XAML или C# и невозможно использовать CSS.

В .NET MAUI также есть возможность реагировать на изменения системной темы. Системная тема может измениться по различным причинам в зависимости от конфигурации устройства. Это включает в себя явно измененную пользователем системную тему, ее изменение в связи с временем дня и изменение из-за экологических факторов, таких как низкий свет. Дополнительные сведения см. в разделе Ответ на изменения системной темы.

Определение тем

Тема определяется как коллекция ресурсных объектов, хранящихся в ResourceDictionary.

В следующем примере показан ResourceDictionary для светлой темы с именем LightTheme:

<ResourceDictionary xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                    x:Class="ThemingDemo.LightTheme">
    <Color x:Key="PageBackgroundColor">White</Color>
    <Color x:Key="NavigationBarColor">WhiteSmoke</Color>
    <Color x:Key="PrimaryColor">WhiteSmoke</Color>
    <Color x:Key="SecondaryColor">Black</Color>
    <Color x:Key="PrimaryTextColor">Black</Color>
    <Color x:Key="SecondaryTextColor">White</Color>
    <Color x:Key="TertiaryTextColor">Gray</Color>
    <Color x:Key="TransparentColor">Transparent</Color>
</ResourceDictionary>

В следующем примере показано ResourceDictionary для темной темы с именем DarkTheme.

<ResourceDictionary xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                    x:Class="ThemingDemo.DarkTheme">
    <Color x:Key="PageBackgroundColor">Black</Color>
    <Color x:Key="NavigationBarColor">Teal</Color>
    <Color x:Key="PrimaryColor">Teal</Color>
    <Color x:Key="SecondaryColor">White</Color>
    <Color x:Key="PrimaryTextColor">White</Color>
    <Color x:Key="SecondaryTextColor">White</Color>
    <Color x:Key="TertiaryTextColor">WhiteSmoke</Color>
    <Color x:Key="TransparentColor">Transparent</Color>
</ResourceDictionary>

Каждый ResourceDictionary содержит Color ресурсы, определяющие соответствующие темы, при этом для каждого ResourceDictionary используются одинаковые значения ключей. Для получения дополнительной информации о словарях ресурсов см. раздел Словари ресурсов.

Внимание

Для каждого ResourceDictionary требуется файл с кодом за формой, вызывающий метод InitializeComponent. Это необходимо, чтобы объект CLR, представляющий выбранную тему, можно создать во время выполнения.

Настройка темы по умолчанию

Для приложения требуется тема по умолчанию, чтобы элементы управления имели значения для используемых ресурсов. Тему по умолчанию можно задать, объединив ResourceDictionary темы с ResourceDictionary уровня приложения, определённым в App.xaml.

<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ThemingDemo.App">
    <Application.Resources>
        <ResourceDictionary Source="Themes/LightTheme.xaml" />
    </Application.Resources>
</Application>

Дополнительные сведения о слиянии словарей ресурсов см. в разделе Слившиеся словари ресурсов.

Использование ресурсов темы

Если приложение хочет использовать ресурс, хранящийся в объекте ResourceDictionary , представляющего тему, он должен сделать это с расширением DynamicResource разметки. Это гарантирует, что при выборе другой темы во время выполнения будут применены значения из новой темы.

В следующем примере показаны три стиля, которые можно применить ко всем Label объектам в приложении:

<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ThemingDemo.App">
    <Application.Resources>

        <Style x:Key="LargeLabelStyle"
               TargetType="Label">
            <Setter Property="TextColor"
                    Value="{DynamicResource SecondaryTextColor}" />
            <Setter Property="FontSize"
                    Value="30" />
        </Style>

        <Style x:Key="MediumLabelStyle"
               TargetType="Label">
            <Setter Property="TextColor"
                    Value="{DynamicResource PrimaryTextColor}" />
            <Setter Property="FontSize"
                    Value="25" />
        </Style>

        <Style x:Key="SmallLabelStyle"
               TargetType="Label">
            <Setter Property="TextColor"
                    Value="{DynamicResource TertiaryTextColor}" />
            <Setter Property="FontSize"
                    Value="15" />
        </Style>

    </Application.Resources>
</Application>

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

Затем эти стили используются страницами:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ThemingDemo"
             x:Class="ThemingDemo.UserSummaryPage"
             Title="User Summary"
             BackgroundColor="{DynamicResource PageBackgroundColor}">
    ...
    <ScrollView>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="200" />
                <RowDefinition Height="120" />
                <RowDefinition Height="70" />
            </Grid.RowDefinitions>
            <Grid BackgroundColor="{DynamicResource PrimaryColor}">
                <Label Text="Face-Palm Monkey"
                       VerticalOptions="Center"
                       Margin="15"
                       Style="{StaticResource MediumLabelStyle}" />
                ...
            </Grid>
            <StackLayout Grid.Row="1"
                         Margin="10">
                <Label Text="This monkey reacts appropriately to ridiculous assertions and actions."
                       Style="{StaticResource SmallLabelStyle}" />
                <Label Text="  &#x2022; Cynical but not unfriendly."
                       Style="{StaticResource SmallLabelStyle}" />
                <Label Text="  &#x2022; Seven varieties of grimaces."
                       Style="{StaticResource SmallLabelStyle}" />
                <Label Text="  &#x2022; Doesn't laugh at your jokes."
                       Style="{StaticResource SmallLabelStyle}" />
            </StackLayout>
            ...
        </Grid>
    </ScrollView>
</ContentPage>

Когда ресурс темы используется напрямую, его следует использовать с расширением разметки DynamicResource. Однако при использовании стиля с расширением разметки DynamicResource, следует его использовать с расширением разметки StaticResource.

Дополнительные сведения о стилизации см. в Стили приложений с помощью XAML. Дополнительные сведения о расширении разметки см. в DynamicResource.

Загрузка темы во время выполнения

Если тема выбрана во время выполнения, приложение должно:

  1. Удалите текущую тему из приложения. Это достигается путем очистки свойства MergedDictionaries уровня приложения ResourceDictionary.
  2. Загрузите выбранную тему. Это достигается путем добавления экземпляра выбранной темы в свойство MergedDictionaries на уровне приложения ResourceDictionary.

Затем все VisualElement объекты, которые задают свойства с помощью расширения DynamicResource разметки, будут применять новые значения темы. Это происходит, так как расширение разметки DynamicResource поддерживает связь с ключами словаря. Поэтому при замене значений, связанных с ключами, изменения применяются к VisualElement объектам.

В примере приложения тема выбирается через модальную страницу, содержащую элемент Picker. В следующем коде показан метод OnPickerSelectionChanged, который выполняется при изменении выбранной темы.

В следующем примере показано удаление текущей темы и загрузка новой темы:

ICollection<ResourceDictionary> mergedDictionaries = Application.Current.Resources.MergedDictionaries;
if (mergedDictionaries != null)
{
    mergedDictionaries.Clear();
    mergedDictionaries.Add(new DarkTheme());
}
  • Last updated on