Themen in Windows-Apps

Windows-Apps unterstützen helle und dunkle Designs, und Sie können anpassen, wie Ihre App auf die Designeinstellungen des Benutzers reagiert. In diesem Artikel wird beschrieben, wie Sie Designs ändern, Designpinsel verwenden, Akzentfarben anpassen und mit der Farb-API arbeiten.

Designanleitungen zur effektiven Verwendung von Farben finden Sie unter "Farbe in Windows".

Ändern des Themas

Sie können Designs ändern, indem Sie die RequestedTheme-Eigenschaft in Ihrer Datei App.xaml ändern.

<Application
    x:Class="App9.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App9"
    RequestedTheme="Dark">
</Application>

Das Entfernen der RequestedTheme-Eigenschaft bedeutet, dass Ihre Anwendung die Systemeinstellungen des Benutzers verwendet.

Benutzer können auch das Design mit hohem Kontrast verwenden, das eine kleine Palette von Kontrastfarben nutzt, durch die die Benutzeroberfläche leichter zu erkennen ist. In diesem Fall wird das System Ihr RequestedTheme außer Kraft setzen.

Testen von Themes

Wenn Sie kein Design für Ihre App anfordern, sollten Sie die App unbedingt in hellem und dunklem Design testen, um sicherzustellen, dass sie unter allen Bedingungen lesbar ist.

Themenpinsel

Allgemeine Steuerelemente verwenden automatisch Designpinsel, um den Kontrast für helle und dunkle Designs anzupassen.

Hier zeigt eine Abbildung, wie das Steuerelement AutoSuggestBox Designpinsel verwendet:

Verwenden von Themenpinseln

Beim Erstellen von Vorlagen für benutzerdefinierte Steuerelemente verwenden Sie Themen-Pinsel anstelle fest vergebener Farbwerte. Auf diese Weise kann Ihre App problemlos an jedes beliebige Thema angepasst werden.

Diese Elementvorlagen für ListView veranschaulichen z.B., wie Designpinsel in einer benutzerdefinierten Vorlage verwendet werden.

<ListView ItemsSource="{x:Bind ViewModel.Recordings}">
    <ListView.ItemTemplate>
        <DataTemplate x:Name="DoubleLineDataTemplate" x:DataType="local:Recording">
            <StackPanel Orientation="Horizontal" Height="64" AutomationProperties.Name="{x:Bind CompositionName}">
                <Ellipse Height="48" Width="48" VerticalAlignment="Center">
                    <Ellipse.Fill>
                        <ImageBrush ImageSource="Placeholder.png"/>
                    </Ellipse.Fill>
                </Ellipse>
                <StackPanel Orientation="Vertical" VerticalAlignment="Center" Margin="12,0,0,0">
                    <TextBlock Text="{x:Bind CompositionName}" Style="{ThemeResource BodyStrongTextBlockStyle}" Foreground="{ThemeResource TextFillColorPrimaryBrush}" />
                    <TextBlock Text="{x:Bind ArtistName}" Style="{ThemeResource BodyTextBlockStyle}" Foreground="{ThemeResource TextFillColorTertiaryBrush}"/>
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Weitere Informationen zur Verwendung von Designpinseln in Ihrer App finden Sie unter Designressourcen.

Akzentfarben

Allgemeine Steuerelemente verwenden eine Akzentfarbe, um Zustandsinformationen zu vermitteln. Standardmäßig ist die Akzentfarbe der Wert für SystemAccentColor, den der Benutzer in den Einstellungen auswählt. Sie können die Akzentfarbe für Ihre App jedoch auch entsprechend Ihrer Marke anpassen.

Überschreiben der Akzentfarbe

Wenn Sie die Akzentfarbe Ihrer App ändern möchten, fügen Sie den folgenden Code in app.xaml ein.

<Application.Resources>
    <ResourceDictionary>
        <Color x:Key="SystemAccentColor">#107C10</Color>
    </ResourceDictionary>
</Application.Resources>

Auswählen einer Akzentfarbe

Wenn Sie eine benutzerdefinierte Akzentfarbe für Ihre App auswählen, stellen Sie sicher, dass Text und Hintergrund, die die Akzentfarbe verwenden, ausreichenden Kontrast für eine optimale Lesbarkeit aufweisen. Um den Kontrast zu testen, können Sie das Farbauswahltool in den Windows-Einstellungen verwenden, oder Sie können diese Online-Kontrast-Tools nutzen.

Akzentfarbpalette

Ein Akzentfarbalgorithmus in der Windows-Shell generiert helle und dunkle Schattierungen der Akzentfarbe.

Diese Schattierungen sind als Designressourcen verfügbar:

• SystemAccentColorLight3
• SystemAccentColorLight2
• SystemAccentColorLight1
• SystemAccentColorDark1
• SystemAccentColorDark2
• SystemAccentColorDark3

Sie können die Akzentfarbpalette auch programmgesteuert mit der UISettings.GetColorValue-Methode und der UIColorType-Enumeration aufrufen.

Sie können die Akzentfarbpalette für Designfarben in Ihrer App verwenden. Hier ist ein Beispiel für die Verwendung der Akzentfarbpalette auf einer Schaltfläche.

<Page.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Light">
                <SolidColorBrush x:Key="ButtonBackground" Color="{ThemeResource SystemAccentColor}"/>
                <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="{ThemeResource SystemAccentColorLight1}"/>
                <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="{ThemeResource SystemAccentColorDark1}"/>
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Page.Resources>

<Button Content="Button"></Button>

Wenn Sie farbigen Text auf einem farbigem Hintergrund verwenden, stellen Sie sicher, dass genügend Kontrast zwischen Text und Hintergrund vorhanden ist. Standardmäßig verwenden Hyperlinks oder Hypertext die Akzentfarbe. Wenn Sie Varianten der Akzentfarbe auf den Hintergrund anwenden, sollten Sie eine Variante der ursprünglichen Akzentfarbe verwenden, um den Kontrast von farbigem Text auf einem farbigen Hintergrund zu optimieren.

Das folgende Diagramm zeigt ein Beispiel für die verschiedenen Hell/Dunkel-Töne der Akzentfarbe und gibt an, wie der Farbtyp auf einer farbigen Oberfläche angewendet werden kann.

Weitere Informationen zu Stilvorlagen für Steuerelemente finden Sie unter XAML-Stile.

Farb-API

Es gibt verschiedene APIs, mit denen Sie Ihrer App Farbe hinzufügen können. Dies ist zunächst die Colors-Klasse, die eine umfangreiche Liste vordefinierter Farben implementiert. Darauf kann mithilfe der XAML-Eigenschaften automatisch zugegriffen werden. Im folgenden Beispiel erstellen wir eine Schaltfläche und legen die Farbeigenschaften für Hintergrund und Vordergrund auf Mitglieder der Colors-Klasse fest.

<Button Background="MediumSlateBlue" Foreground="White">Button text</Button>

Sie können Ihre eigenen Farben aus RGB- und Hex-Werten mithilfe der Color-Struktur in XAML erstellen.

<Color x:Key="LightBlue">#FF36C0FF</Color>

Sie können auch dieselbe Farbe im Code mit der FromArgb-Methode erstellen.

Color LightBlue = Color.FromArgb(255,54,192,255);

Windows::UI::Color LightBlue = Windows::UI::ColorHelper::FromArgb(255,54,192,255);

Die Buchstaben "Argb" stehen für „Alpha“ (Deckkraft), „Rot“, „Grün“ und „Blau“ – die vier Komponenten einer Farbe. Jedes Argument kann zwischen 0 und 255 liegen. Sie können den ersten Wert wahlweise weglassen und erhalten so eine standardmäßige Deckkraft von 255 oder 100 % undurchsichtig.

Hinweis

Wenn Sie C++ verwenden, müssen Sie Farben mit der ColorHelper-Klasse erstellen.

Am häufigsten wird Color als ein Argument für den Pinsel SolidColorBrush verwendet, der zum Zeichnen von UI-Elementen in einer Volltonfarbe verwendet werden kann. Diese Pinsel werden in der Regel in einem ResourceDictionary definiert, sodass sie für mehrere Elemente wiederverwendet werden können.

<ResourceDictionary>
    <SolidColorBrush x:Key="ButtonBackgroundBrush" Color="#FFFF4F67"/>
    <SolidColorBrush x:Key="ButtonForegroundBrush" Color="White"/>
</ResourceDictionary>

Weitere Informationen zur Verwendung von Pinseln finden Sie unter XAML-Pinsel.

Verwandte Themen

• Farbe in Windows
• XAML-Stile
• XAML-Designressourcen