Контрастные темы

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

Примечание

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

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

Совет

Вы также можете нажать клавиши ALT слева + SHIFT + Экран печати (PrtScn на некоторых клавиатурах), чтобы быстро включить или отключить контрастные темы. Если тема не была выбрана ранее, по умолчанию используется тема "Водная" (показано на следующем рисунке).

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

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

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

Вы можете программно проверка, является ли текущая тема контрастной, с помощью класса AccessibilitySettings (необходимо вызвать конструктор AccessibilitySettings из область, где приложение инициализировано и уже отображает содержимое).

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

Объект ResourceDictionary.ThemeDictionaries может указывать цвета темы, отличающиеся от определенных системой цветов, задав кисти для тем по умолчанию (темная), светлая и высокая контрастность.

Совет

Контрастная тема относится к функции в целом, а HighContrast — к конкретному словарю, на который ссылается ссылка.

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

2. В словаре по умолчанию создайте необходимый тип Brush (обычно SolidColorBrush). Присвойте ему имя x:Key , соответствующее его предполагаемому использованию ( staticResource , ссылающийся на существующую системную кисть, также будет уместным).

3. В HighContrast ResourceDictionary (как показано в следующем фрагменте кода) укажите соответствующую кисть SystemColor . Дополнительные сведения о выборе одного из динамических системных цветов 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>
   

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

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

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

В этой таблице показаны контрастные цвета темы и рекомендуемые для их связывания. Каждый ресурс 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 здесь является хорошим выбором, так как BrandedPageBackgroundBrush указывает, что он будет использоваться для фона.

<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. Оба необходимы для правильного использования темы в приложении во время выполнения. Это хорошая возможность протестировать эту функциональность в вашем приложении. Фон сетки будет автоматически обновляться при переключении на тему с высокой контрастностью. Фон также обновляется при переключении между разными высококонтрастными темами.

Примечание

WinUI 2.6 и более поздней версии

Существует восемь системных кистей с высокой контрастностью для ссылок с помощью ResourceKey (см. следующий пример для SystemColorWindowTextColorBrush).

<StaticResource x:Key="MyControlBackground" ResourceKey="SystemColorWindowTextColorBrush" />

Имена кистей точно соответствуют одному из восьми упомянутых ранее системных цветов (с добавлением "Кисть"). Мы рекомендуем использовать StaticResource вместо локального SolidColorBrush из соображений производительности.

Рекомендации

Ниже приведены некоторые рекомендации по настройке контрастных цветов темы в приложении для Windows.

• Протестируйте все четыре темы с высокой контрастностью во время работы приложения.
• Соблюдать единообразие.
• Убедитесь, что в приложении для параметра HighContrastAdjustment задано значение None (он включен по умолчанию). См. раздел Установка параметра HighContrastAdjustment в значение Нет.
• Не жестко закодируйте цвет в теме HighContrast. Вместо этого используйте SystemColorColor и ColorBrush ресурсы. Дополнительные сведения см. в разделе Жестко заданные цвета.
• Не смешивать пары фона и переднего плана, которые несовместимы
• Не выбирайте ресурс цвета для эстетики. Помните, что цвета меняются вместе с темой.
• Не используйте SystemColorGrayTextColor для копии текста, которая является вторичной или выступает в качестве текста подсказки. Это предназначено только для отключенного содержимого.
• Не используйте SystemColorHotlightColor и соответствующие кисти, так как они зарезервированы для гиперссылок.

Совет

Часто полезно взглянуть на приложение коллекции WinUI, чтобы узнать, как распространенные элементы управления используют кисти SystemColor . Если они уже установлены, откройте их с помощью следующих ссылок: коллекция WinUI 3 или коллекция WinUI 2.

Если они не установлены, вы можете скачать коллекцию WinUI 3 и коллекцию WinUI 2 из Microsoft Store.

Исходный код можно также получить из GitHub (используйте главную ветвь для WinUI 3 и ветвь winui2 для WinUI 2).

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

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

В следующем фрагменте кода мы покажем элемент Grid, объявленный с цветом фона, равным #E6E6E6 (очень светло-серый). Если вы жестко закодировать цвет таким образом, вы также переопределите цвет фона во всех темах. Например, если пользователь выбирает тему водной контрастности вместо белого текста на почти черном фоне, цвет текста в этом приложении изменится на белый, а фон остается светло-серым. Очень низкая контрастность между текстом и фоном может сделать это приложение очень трудным в использовании.

<Grid Background="#E6E6E6">

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

<Grid Background="{ThemeResource BrandedPageBackgroundBrush}">

Границы

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

Совет

Мы рекомендуем использовать границы 2 пикселей для временных поверхностей, таких как всплывающие элементы и диалоговые окна.

Область навигации и страница имеют одинаковый цвет фона в контрастных темах. Чтобы различать их, необходима контрастная граница только для темы.

Элементы списка с цветным текстом

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

Будьте осторожны при установке TextBlock.Foreground в DataTemplateListView (обычно это делается для создания визуальной иерархии). Свойство Foreground задается в ListViewItem, и каждый элемент TextBlock в DataTemplate наследует правильный цвет переднего плана . Установка переднего плана нарушает это наследование.

Эту проблему можно устранить, задав параметр Foreground условно с помощью стиля в коллекции ThemeDictionaries . Так как параметр Foreground не задан параметром SecondaryBodyTextBlockStyle в 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 и просмотрите поддержку специальных возможностей контрастности цветов в действии.

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

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

• Специальные возможности
• Пример контрастности и параметров пользовательского интерфейса
• Пример специальных возможностей XAML
• Пример XAML с высокой контрастностью
• AccessibilitySettings