Темы контрастности

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

Чтобы оценить поведение вашего приложения при использовании контрастных тем, включите и настройте их в Параметры > Специальные возможности > Контрастные темы.

Установка параметра HighContrastAdjustment в значение None

Приложения Windows по умолчанию позволяют включить HighContrastAdjustment . Это заставляет белый текст переднего плана с фоном черного выделения поддерживать высокую контрастность во всем содержимом. Если ваше приложение уже использует правильные кисти, учитывающие систему, установите для него значение None, чтобы ваши стили для контрастной темы могли применяться корректно.

Обнаружение высокой контрастности

Вы можете программно определить режим контрастности с помощью Microsoft.UI.System.ThemeSettings и проверки его свойства HighContrast .

Создание словарей тем

Используйте ResourceDictionary.ThemeDictionaries для определения ресурсов, относящихся к темам. Это позволяет приложению предоставлять явные значения по умолчанию (темный), light и HighContrast, а также участвовать в переключении тем среды выполнения.

1. В App.xaml создайте коллекциюThemeDictionaries, содержащую по крайней мере записи Default и HighContrastResourceDictionary (словарь Light является необязательным для этого примера).

2. В разделе Default определите необходимые ресурсы Brush, как правило, это записи SolidColorBrush, которые имеют ключ, основанный на семантическом использовании.

3. В HighContrast сопоставляйте каждый ресурс с соответствующим динамическим значением SystemColor . См. контрастные цвета для руководства по подбору.

   <Application.Resources>
       <ResourceDictionary>
           <ResourceDictionary.ThemeDictionaries>
               <!-- Default is a fallback if a more precise theme isn't called
               out below -->
               <ResourceDictionary x:Key="Default">
                   <SolidColorBrush x:Key="BrandedPageBackgroundBrush" Color="#E6E6E6" />
               </ResourceDictionary>
   
               <!-- Optional, Light is used in light theme.
               If included, Default will be used for Dark theme -->
               <ResourceDictionary x:Key="Light">
                   <SolidColorBrush x:Key="BrandedPageBackgroundBrush" Color="#E6E6E6" />
               </ResourceDictionary>
   
               <!-- HighContrast is used in all high contrast themes -->
               <ResourceDictionary x:Key="HighContrast">
                   <SolidColorBrush x:Key="BrandedPageBackgroundBrush" Color="{ThemeResource SystemColorWindowColor}" />
               </ResourceDictionary>
           </ResourceDictionary.ThemeDictionaries>
       </ResourceDictionary>
   </Application.Resources>
   

Контрастные цвета

В разделе "Параметры специальных возможностей контрастности" (показан ниже), пользователи могут выбрать одну из четырех встроенных тем: Водная, Пустыня, Сумерки и Ночное небо.

После выбора темы пользователи могут применить его непосредственно или изменить отдельные цвета. На следующем рисунке показан диалоговое окно редактирования для Aquatic.

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

Цветовой образец	Описание
	SystemColorWindowColor Фон страниц, панелей, всплывающих окон и окон. Используется с SystemColorWindowTextColor
	SystemColorWindowTextColor Заголовки, основной текст, списки, текст-заполнитель, границы приложений и окон, любой пользовательский интерфейс, с которым нельзя взаимодействовать. Совместимо с SystemColorWindowColor
	SystemColorHotlightColor Гиперссылки. Соединяется с SystemColorWindowColor
	SystemColorGrayTextColor Неактивный или отключенный пользовательский интерфейс. Пара с SystemColorWindowColor
	SystemColorHighlightTextColor Цвет переднего плана текста или пользовательского интерфейса, который выбран, с которым взаимодействуют (при наведении указателя мыши, при нажатии) или находится в процессе. Используйте вместе с SystemColorHighlightColor
	SystemColorHighlightColor Цвет фона или акцента пользовательского интерфейса, который выбран, находится в фокусе (наведение курсора, нажатие) или выполняется. Используется вместе с SystemColorHighlightTextColor
	SystemColorButtonTextColor Цвет переднего плана кнопок и активных элементов пользовательского интерфейса. Совмещается с SystemColorButtonFaceColor
	SystemColorButtonFaceColor Цвет фона кнопок и любого пользовательского интерфейса, с которыми можно взаимодействовать. Используйте вместе с SystemColorButtonTextColor

В следующей таблице показаны практические примеры использования SystemColorWindowColor в качестве фонового базового плана.

Пример	Значения
	Цвет текста окна системы (SystemColorWindowTextColor)
	SystemColorHotlightColor
	SystemColorGrayTextColor
	SystemColorHighlightTextColor + SystemColorHighlightColor
	SystemColorButtonTextColor + SystemColorButtonFaceColor

В следующем фрагменте кода показано, как выбрать значение для BrandedPageBackgroundBrush. В этом случае SystemColorWindowColor подходит, так как ресурс используется в качестве фона на уровне страницы.

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <!-- Default is a fallback if a more precise theme isn't called
            out below -->
            <ResourceDictionary x:Key="Default">
                <SolidColorBrush x:Key="BrandedPageBackgroundBrush" Color="#E6E6E6" />
            </ResourceDictionary>

            <!-- Optional, Light is used in light theme.
            If included, Default will be used for Dark theme -->
            <ResourceDictionary x:Key="Light">
                <SolidColorBrush x:Key="BrandedPageBackgroundBrush" Color="#E6E6E6" />
            </ResourceDictionary>

            <!-- HighContrast is used in all high contrast themes -->
            <ResourceDictionary x:Key="HighContrast">
                <SolidColorBrush x:Key="BrandedPageBackgroundBrush" Color="{ThemeResource SystemColorWindowColor}" />
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Application.Resources>

Затем примените ресурс к фоновому элементу целевого элемента.

<Grid Background="{ThemeResource BrandedPageBackgroundBrush}">

В предыдущем примере используется {ThemeResource} два раза: один раз для разрешения SystemColorWindowColor и повторно для разрешения BrandedPageBackgroundBrush. Этот двухэтапный поиск важен для обновлений темы среды выполнения. При этой настройке фон сетки обновляется автоматически при переключении пользователей на контрастные темы или переключении между ними.

Лучшие практики

При настройке цветов контрастности темы в приложении используйте следующие рекомендации.

• Протестируйте приложение во всех четырех встроенных темах контрастности во время его работы.
• Будьте последовательными.
• Задайте значение HighContrastAdjustmentNone когда ресурсы темы определены правильно. Смотрите установку HighContrastAdjustment в None.
• Не используйте жестко заданные цвета для HighContrast. Используйте SystemColorColor и ColorBrush ресурсы. См. жестко закодированные цвета.
• Не смешивайте несовместимые пары переднего плана и фона.
• Не выбирайте ресурсы только по эстетическим соображениям; пользователи могут изменять цвета темы.
• Не используйте SystemColorGrayTextColor для вторичного текста или текста подсказки. Зарезервировать его для отключенного содержимого.
• Не используйте SystemColorHotlightColor ни для чего иного, кроме гиперссылок.

Жестко закодированные цвета

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

В следующем фрагменте фон сетки жестко установлен в #E6E6E6 светло-серый. Это устанавливает одинаковый фон для всех тем. В контрастной теме, такой как Aquatic, текст переднего плана может переключаться на белый, пока фон остается светлым, что приводит к плохой или непригодной контрастности.

<Grid Background="#E6E6E6">

Вместо этого используйте расширение разметки {ThemeResource} для разрешения значений из ThemeDictionaries в ResourceDictionary. Это обеспечивает автоматическую подстановку среды выполнения на основе активной темы пользователя.

<Grid Background="{ThemeResource BrandedPageBackgroundBrush}">

Границы

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

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

Список элементов с цветным текстом

В отличие от тем оформления, элементы ListView используют SystemColorHighlightColor в состояниях наведения, нажатия и выбора. Распространенный сбой в сложных шаблонах элементов заключается в том, что внутреннее содержимое не инвертируется правильно, что может сделать выбранные строки нечитаемыми.

Будьте осторожны при настройке TextBlock.Foreground непосредственно в DataTemplate для ListView. ListViewItem задает передний план для переходов состояния и вложенные элементы TextBlock должны наследовать это значение. Явные Foreground параметры разбивают эту цепочку наследования.

Это можно устранить, определив ресурсы условного стиля в ThemeDictionaries. В HighContrast опущен явный метод задания переднего плана , чтобы наследование восстанавливало правильное поведение инверсии.

В следующем фрагменте кода (из файла App.xaml) показан пример коллекции ThemeDictionaries в шаблоне данных ListView.

<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Default">
        <Style
            x:Key="SecondaryBodyTextBlockStyle"
            TargetType="TextBlock"
            BasedOn="{StaticResource BodyTextBlockStyle}">
            <Setter Property="Foreground" 
                Value="{StaticResource SystemControlForegroundBaseMediumBrush}" />
        </Style>
    </ResourceDictionary>

    <ResourceDictionary x:Key="Light">
        <Style
            x:Key="SecondaryBodyTextBlockStyle"
            TargetType="TextBlock"
            BasedOn="{StaticResource BodyTextBlockStyle}">
            <Setter Property="Foreground" 
                Value="{StaticResource SystemControlForegroundBaseMediumBrush}" />
        </Style>
    </ResourceDictionary>

    <ResourceDictionary x:Key="HighContrast">
        <!-- The Foreground Setter is omitted in HighContrast -->
        <Style
            x:Key="SecondaryBodyTextBlockStyle"
            TargetType="TextBlock"
            BasedOn="{StaticResource BodyTextBlockStyle}" />
    </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

<!-- Usage in your DataTemplate... -->
<DataTemplate>
    <StackPanel>
        <TextBlock Style="{StaticResource BodyTextBlockStyle}" Text="Double line list item" />

        <!-- Note how ThemeResource is used to reference the Style -->
        <TextBlock Style="{ThemeResource SecondaryBodyTextBlockStyle}" Text="Second line of text" />
    </StackPanel>
</DataTemplate>

Примеры

Приложение WinUI 3 Gallery содержит интерактивные примеры элементов управления и функций WinUI. Получите приложение из Microsoft Store или просмотрите исходный код GitHub.

Связанные темы

• Обзор специальных возможностей
• Пример контрастности пользовательского интерфейса и параметров (архивированный пример устаревшей версии)
• Пример специальных возможностей XAML (архивированный устаревший пример )
• Пример высокой контрастности XAML (архивированный устаревший пример)
• ThemeSettings.HighContrast