Motywy kontrastu

Motywy kontrastowe używają małej palety kolorów (z współczynnikiem kontrastu co najmniej 7:1), aby ułatwić wyświetlanie elementów w interfejsie użytkownika, zmniejszanie napięcia oczu, poprawianie czytelności tekstu i uwzględnianie preferencji użytkownika.

Aby zobaczyć, jak działa aplikacja z motywami kontrastu, włącz je i dostosuj za pomocą strony Ustawienia > Ułatwienia dostępu > Motyw y kontrastu.

Ustawianie wartości HighContrastAdjustment na None

Aplikacje systemu Windows mają domyślnie włączoną opcję HighContrastAdjustment . Powoduje to ustawienie całego koloru tekstu na biały z czarnym wyróżnieniem za nim, zapewniając wystarczający kontrast we wszystkich tłach. Jeśli używasz pędzli poprawnie, to ustawienie powinno zostać wyłączone.

Wykrywanie dużego kontrastu

Można programowo sprawdzić, czy bieżący motyw jest motywem kontrastu za pomocą klasy AccessibilitySettings (należy wywołać konstruktor AccessibilitySettings z zakresu, w którym aplikacja jest inicjowana i wyświetla już zawartość).

Tworzenie słowników motywów

Obiekt ResourceDictionary.ThemeDictionaries może wskazywać kolory motywu, które różnią się od kolorów zdefiniowanych przez system, określając pędzle dla motywów kontrastu: Domyślny (Ciemny), Jasnyoraz HighContrast.

1. W pliku App.xaml utwórz kolekcję themedictionaries z default i HighContrastResourceDictionary (LightResourceDictionary nie jest konieczne w tym przykładzie).

2. W słowniku Default utwórz typ Brush, którego potrzebujesz (zazwyczaj SolidColorBrush). Nadaj mu nazwę x:Key odpowiadającą jej zamierzonemu użyciu (StaticResource odwołującą się do istniejącego pędzla systemowego byłoby również odpowiednie).

3. W HighContrast ResourceDictionary (pokazanym w poniższym fragmencie kodu), określ odpowiedni pędzel SystemColor. Zobacz Contrast colors, aby uzyskać szczegółowe informacje na temat wybierania jednego z dynamicznych kolorów HighContrast dla pędzla 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>
   

Kolory kontrastowe

Na stronie Ustawienia > Ułatwienia dostępu > Motywy kontrastu (pokazane na poniższej ilustracji) użytkownicy mogą wybierać spośród czterech domyślnych motywów kontrastu: Wodna, Pustynia, Zmierzch i Nocne niebo.

Gdy użytkownik wybierze opcję, może zdecydować się na natychmiastowe jej zastosowanie lub edytować motyw. Na poniższej ilustracji przedstawiono okno dialogowe Edytowanie motywu dla motywu kontrastu wodnych.

W tej tabeli przedstawiono kolory motywu kontrastowego i ich zalecane pary. Każdy zasób SystemColor jest zmienną, która automatycznie aktualizuje kolor, gdy użytkownik przełącza motywy kontrastu.

Kolorowa próbka	Opis
	SystemColorWindowColor Tło stron, okienek i okien. Połącz z SystemColorWindowTextColor
	SystemColorWindowTextColor Nagłówki, główna treść, listy, tekst zastępczy, obramowanie aplikacji i okien, dowolny interfejs użytkownika, z którym nie można wchodzić w interakcję. Połącz z SystemColorWindowColor
	SystemColorHotlightColor Hiperłącza parowanie z SystemColorWindowColor
	SystemColorGrayTextColor Nieaktywny lub wyłączony interfejs użytkownika. Parowanie z atrybutem SystemColorWindowColor
	SystemColorHighlightTextColor Kolor pierwszego planu tekstu lub interfejsu użytkownika, który został zaznaczony, jest w trakcie interakcji (najechanie, naciśnięcie) lub w toku. Parowanie z SystemColorHighlightColor
	SystemColorHighlightColor Kolor tła lub akcentu dla wybranego elementu interfejsu użytkownika, elementu, z którym zachodzi interakcja (zatrzymanie wskaźnika myszy, naciśnięcie) lub w toku. W parze z SystemColorHighlightTextColor
	SystemColorButtonTextColor Kolor pierwszego planu przycisków i dowolnego interfejsu użytkownika, z którymi można korzystać. Parowanie z atrybutem SystemColorButtonFaceColor
	SystemColorButtonFaceColor Kolor tła przycisków i dowolnego interfejsu użytkownika, z którymi można korzystać. Parowanie z atrybutem SystemColorButtonTextColor

W następnej tabeli przedstawiono, jak kolory wyglądają w przypadku użycia na tle ustawionym na SystemColorWindowColor.

Przykład	Wartości
	SystemColorWindowTextColor
	SystemColorHotlightColor
	SystemColorGrayTextColor
	SystemColorHighlightTextColor + SystemColorHighlightColor
	SystemColorButtonTextColor + SystemColorButtonFaceColor

W poniższym fragmencie kodu pokazano, jak wybrać zasób brandedPageBackgroundBrush. SystemColorWindowColor jest dobrym wyborem, ponieważ BrandedPageBackgroundBrush wskazuje, że będzie używany jako tło.

<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>

Zasób jest następnie przypisywany do tła elementu.

<Grid Background="{ThemeResource BrandedPageBackgroundBrush}">

Używamy {ThemeResource} dwa razy w poprzednim przykładzie, raz w celu odniesienia się do SystemColorWindowColor i ponownie w celu odniesienia się do BrandedPageBackgroundBrush. Oba elementy są wymagane, aby aplikacja poprawnie zmieniała motyw podczas działania. Jest to dobry moment na przetestowanie funkcjonalności w aplikacji. Tło siatki zostanie automatycznie zaktualizowane podczas przełączania się do motywu o wysokim kontraście. Będzie również aktualizowany podczas przełączania między różnymi motywami o wysokim kontraście.

Najlepsze rozwiązania

Poniżej przedstawiono kilka zaleceń dotyczących dostosowywania kolorów motywu kontrastu w aplikacji systemu Windows.

• Przetestuj wszystkie cztery motywy o wysokim kontraście, gdy aplikacja jest uruchomiona.
• Bądź spójny.
• Upewnij się, że właściwość HighContrastAdjustment jest ustawiona na None w aplikacji (jest ona włączona domyślnie). Zobacz Ustawienie HighContrastAdjustment na brak.
• Nie zaszywaj koloru na stałe w motywie HighContrast. Zamiast tego użyj zasobów SystemColorColor i ColorBrush. Aby uzyskać więcej informacji, zobacz sekcję Zakodowane kolory.
• Nie mieszać par tła/pierwszego planu, które nie są kompatybilne
• Nie wybieraj zasobu kolorów dla estetyki. Pamiętaj, że kolory zmieniają się wraz z motywem.
• Nie stosować SystemColorGrayTextColor do tekstu zasadniczego, który jest drugorzędny lub jako tekst pomocniczy. To jest przeznaczone tylko dla zablokowanej zawartości.
• Nie używać SystemColorHotlightColor i odpowiedniego pędzla, ponieważ oba są zarezerwowane dla hiperlinków.

Kolory zakodowane na sztywno

Kontrolki platformy zapewniają wbudowaną obsługę motywów kontrastu, ale należy zachować ostrożność podczas dostosowywania interfejsu użytkownika aplikacji. Dwa z najczęstszych problemów występują, gdy kolor elementu jest zakodowany na twardo lub jest używany nieprawidłowy zasób SystemColor .

W poniższym fragmencie kodu pokazujemy element Siatki zadeklarowany z ustawionym #E6E6E6 kolorem tła (bardzo jasnoszary). Jeśli zakodujesz kolor w ten sposób, również zastąpisz kolor tła we wszystkich motywach. Jeśli na przykład użytkownik wybierze motyw wodnych kontrastu, a nie biały tekst na niemal czarnym tle, kolor tekstu w tej aplikacji zmieni się na biały, a tło pozostanie jasnoszary. Bardzo niski kontrast między tekstem a tłem może utrudnić korzystanie z tej aplikacji.

<Grid Background="#E6E6E6">

Zamiast tego zalecamy użycie rozszerzenia znaczników {ThemeResource}, aby odwołać się do koloru w kolekcji ThemeDictionaries w ramach ResourceDictionary. Umożliwia to automatyczne zastępowanie kolorów i pędzli na podstawie bieżącego motywu użytkownika.

<Grid Background="{ThemeResource BrandedPageBackgroundBrush}">

Granice

Strony, okienka, wyskakujące okienka i paski powinny używać SystemColorWindowColor jako swoje tło. Dodaj obramowanie kontrastowe tylko tam, gdzie jest to konieczne, aby zachować ważne granice w interfejsie użytkownika.

Okienko nawigacji i strona mają ten sam kolor tła w motywach kontrastu. Aby je odróżnić, niezbędne jest obramowanie kontrastujące w odniesieniu do motywu.

Elementy listy z kolorowym tekstem

W przeciwieństwie do motywów elementy w ListView mają ustawione tło na SystemColorHighlightColor, gdy użytkownik najecha kursorem, naciska lub wybiera je. Typowy problem z złożonymi elementami listy występuje, gdy zawartość elementu listy nie może odwrócić koloru, co uniemożliwia odczytanie elementów.

Należy zachować ostrożność podczas ustawiania elementu TextBlock.Foreground w DataTemplateListView (zazwyczaj wykonywane w celu ustanowienia hierarchii wizualnej). Właściwość pierwszego planu jest ustawiona na ListViewItem, a każdy TextBlock w elemecie DataTemplate dziedziczy prawidłowy kolor pierwszego planu. Ustawienie pierwszego planu powoduje przerwanie tego dziedziczenia.

Aby rozwiązać ten problem, można ustawić pierwszego planu warunkowo za pomocą stylu w kolekcji motywów ThemeDictionaries. Ponieważ pierwszego planu nie jest ustawiony przez SecondaryBodyTextBlockStyle w HighContrast, kolor zostanie prawidłowo odwrócony.

Poniższy fragment kodu (z pliku App.xaml) pokazuje przykład kolekcji ThemeDictionaries w szablonie danych 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>

Przykłady

Aplikacja z galerii WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub

Tematy pokrewne

• Ułatwienie dostępu
• Przykład kontrastu i ustawień interfejsu użytkownika
• Przykład dostępności XAML
• przykłady wysokiego kontrastu XAML
• Ustawienia dostępności