FarbeColor

Herobild

Farbe bietet eine intuitive Möglichkeit zur Übermittlung von Informationen an Benutzer in Ihrer App: Mit ihr kann Interaktivität angezeigt, Feedback auf Benutzeraktionen gegeben und Ihrer Benutzeroberfläche ein Gefühl von visueller Kontinuität verliehen werden.Color provides an intuitive way of communicating information to users in your app: it can be used to indicate interactivity, give feedback to user actions, and give your interface a sense of visual continuity.

In Windows-Apps werden Farben in erster Linie durch Akzentfarbe und Design bestimmt.In Windows apps, colors are primarily determined by accent color and theme. In diesem Artikel erläutern wir, wie Sie Farbe in Ihrer App einsetzen können und wie Sie mit Akzentfarben und Designressourcen dafür sorgen, dass Ihre Windows-App in jedem beliebigen Designkontext verwendet werden kann.In this article, we'll discuss how you can use color in your app, and how to use accent color and theme resources to make your Windows app usable in any theme context.

FarbprinzipienColor principles

Setzen Sie Farben sinnvoll ein.Use color meaningfully. Wenn Farbe sparsam verwendet wird, um wichtige Elemente zu markieren, können sie eine Benutzeroberfläche erstellen, die flüssig und intuitiv ist.When color is used sparingly to highlight important elements, it can help create a user interface that is fluid and intuitive.

Verwenden Sie Farben zur Angabe der Interaktivität.Use color to indicate interactivity. Es ist sinnvoll, eine Farbe auszuwählen, die die interaktiven Elementen Ihrer Anwendung angibt.It's a good idea to choose one color to indicate elements of your application that are interactive. Beispielsweise verwenden viele Webseiten blauen Text, um einen Link zu kennzeichnen.For example, many web pages use blue text to denote a hyperlink.

Farben sind persönlich.Color is personal. Benutzer können unter Windows eine Akzentfarbe sowie ein helles oder dunkles Design auswählen, die sich auf der gesamten Benutzeroberfläche widerspiegeln.In Windows, users can choose an accent color and a light or dark theme, which are reflected throughout their experience. Sie können auswählen, wie Sie die Akzentfarbe des Benutzers und das Design in Ihre Anwendung integrieren, um ihrer Erfahrung zu personalisieren.You can choose how to incorporate the user's accent color and theme into your application, personalizing their experience.

Farben sind kulturabhängig.Color is cultural. Achten Sie darauf, wie Farben von Personen aus unterschiedlichen Kulturen interpretiert werden.Consider how the colors you use will be interpreted by people from different cultures. In einigen Kulturen wird die Farbe Blau z.B. mit Tugend und Schutz assoziiert, während sie in anderen für Trauer steht.For example, in some cultures the color blue is associated with virtue and protection, while in others it represents mourning.

DesignsThemes

Windows-Apps können ein helles oder dunkles Anwendungsdesign verwenden.Windows apps can use a light or dark application theme. Das Design wirkt sich auf die Farben des App-Hintergrunds, Text, Symbole und allgemeine Steuerelemente aus.The theme affects the colors of the app's background, text, icons, and common controls.

Helles DesignLight theme

helles Design

Dunkles DesignDark theme

dunkles Design

Das Design Ihrer Windows-App folgt standardmäßig den Designeinstellungen des Benutzers aus den Windows-Einstellungen oder dem Standarddesign des Geräts (d. h. dunkel auf Xbox).By default, your Windows app's theme is the user’s theme preference from Windows Settings or the device's default theme (i.e., dark on Xbox). Sie können jedoch das Design für Ihre Windows-App festlegen.However, you can set the theme for your Windows app.

Ändern des DesignsChanging the theme

Sie können Designs ändern, indem Sie die RequestedTheme-Eigenschaft in Ihrer Datei App.xaml ändern.You can change themes by changing the RequestedTheme property in your App.xaml file.

<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 App die Systemeinstellungen des Benutzers verwendet.Removing the RequestedTheme property means that your application will use the user’s system settings.

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.Users can also select the high contrast theme, which uses a small palette of contrasting colors that makes the interface easier to see. In diesem Fall setzt das System Ihren Wert für „RequestedTheme“ außer Kraft.In that case, the system will override your RequestedTheme.

Testen von DesignsTesting 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.If you don't request a theme for your app, make sure to test your app in both light and dark themes to ensure that your app will be legible in all conditions.

Hinweis: In Visual Studio ist „RequestedTheme“ standardmäßig „Light“ (Hell). Daher müssen Sie den Wert für „RequestedTheme“ ändern, um beide Designs zu testen.Note: In Visual Studio, the default RequestedTheme is light, so you'll need to change the RequestedTheme to test both.

DesignpinselTheme brushes

Allgemeine Steuerelemente verwenden automatisch Designpinsel, um den Kontrast für helle und dunkle Designs anzupassen.Common controls automatically use theme brushes to adjust contrast for light and dark themes.

Hier zeigt eine Abbildung, wie das Steuerelement AutoSuggestBox Designpinsel verwendet:For example, here's an illustration of how the AutoSuggestBox uses theme brushes:

Beispiel für ein Steuerelement mit Designpinseln

Die Designpinsel werden für folgende Zwecke verwendet:The theme brushes are used for the following purposes:

  • Base gilt für Text.Base is for text.
  • Alt ist das Gegenteil von Base.Alt is the inverse of Base.
  • Chrome gilt für Elemente der obersten Ebene, z.B. Navigationsbereiche oder Befehlsleisten.Chrome is for top-level elements, such as navigation panes or command bars.
  • List gilt für Steuerelemente.List is for list controls.

Low/Medium/High (Niedrig/Mittel/Hoch) bezieht sich auf die Intensität der Farbe.Low/Medium/High refer to the intensity of the color.

Verwenden von DesignpinselnUsing theme brushes

Beim Erstellen von Vorlagen für benutzerdefinierte Steuerelemente verwenden Sie Designpinsel anstelle hartcodierter Farbwerte.When creating templates for custom controls, use theme brushes rather than hard code color values. Auf diese Weise kann Ihre Ap problemlos an jedes beliebige Design angepasst werden.This way, your app can easily adapt to any theme.

Diese Elementvorlagen für ListView veranschaulichen z.B., wie Designpinsel in einer benutzerdefinierten Vorlage verwendet werden.For example, these item templates for ListView demonstrate how to use theme brushes in a custom template.

Doppelzeiliges Listenelement mit Symbolbeispiel

<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 BaseTextBlockStyle}" Foreground="{ThemeResource SystemControlPageTextBaseHighBrush}" />
                    <TextBlock Text="{x:Bind ArtistName}" Style="{ThemeResource BodyTextBlockStyle}" Foreground="{ThemeResource SystemControlPageTextBaseMediumBrush}"/>
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Weitere Informationen zur Verwendung von Designpinseln in Ihrer App finden Sie unter Designressourcen.For more information about how to use theme brushes in your app, see Theme Resources.

AkzentfarbeAccent color

Allgemeine Steuerelemente verwenden eine Akzentfarbe, um Zustandsinformationen zu vermitteln.Common controls use an accent color to convey state information. Standardmäßig ist die Akzentfarbe der Wert für SystemAccentColor, den der Benutzer in den Einstellungen auswählt.By default, the accent color is the SystemAccentColor that users select in their Settings. Sie können die Akzentfarbe für Ihre App jedoch auch entsprechend Ihrer Marke anpassen.However, you can also customize your app's accent color to reflect your brand.

Windows-Steuerelemente

vom Benutzer ausgewählter Akzentheader vom Benutzer ausgewählte Akzentfarbeuser-selected accent header user-selected accent color

benutzerdefinierter Akzentheader benutzerdefinierte Akzentfarbecustom accent header custom brand accent color

Überschreiben der AkzentfarbeOverriding the accent color

Wenn Sie die Akzentfarbe Ihrer App ändern möchten, fügen Sie den folgenden Code in app.xaml ein.To change your app's accent color, place the following code in app.xaml.

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

Auswählen einer AkzentfarbeChoosing an accent color

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.If you select a custom accent color for your app, please make sure that text and backgrounds that use the accent color have sufficient contrast for optimal readability. Um den Kontrast zu testen, können Sie das Farbauswahltool in den Windows-Einstellungen verwenden, oder Sie können diese Online-Kontrast-Tools nutzen.To test contrast, you can use the color picker tool in Windows Settings, or you can use these online contrast tools.

Benutzerdefinierter Akzentfarbwähler in den Windows-Einstellungen

AkzentfarbpaletteAccent color palette

Ein Akzentfarbalgorithmus in der Windows-Shell generiert helle und dunkle Schattierungen der Akzentfarbe.An accent color algorithm in the Windows shell generates light and dark shades of the accent color.

Akzentfarbpalette

Diese Schattierungen sind als Designressourcen verfügbar:These shades can be accessed as theme resources:

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

Sie können die Akzentfarbpalette auch programmgesteuert mit der UISettings.GetColorValue-Methode und der UIColorType-Enumeration aufrufen.You can also access the accent color palette programmatically with the UISettings.GetColorValue method and UIColorType enum.

Sie können die Akzentfarbpalette für Designfarben in Ihrer App verwenden.You can use the accent color palette for color theming in your app. Hier ist ein Beispiel für die Verwendung der Akzentfarbpalette auf einer Schaltfläche.Below is an example of how you can use the accent color palette on a button.

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.When using colored text on a colored background, make sure there is enough contrast between text and background. Standardmäßig werden Hyperlinks oder Hypertext in der Akzentfarbe des Benutzers dargestellt.By default, hyperlink or hypertext will use the accent color. 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.If you apply variations of the accent color to the background, you should use a variation of the original accent color to optimize the contrast of colored text on a colored background.

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.The chart below illustrates an example of the various light/dark shades of accent color, and how colored type can be applied on a colored surface.

Farbe auf Farbe

Weitere Informationen zum Formatieren von Steuerelementen finden Sie unter XAML-Stile.For more information about styling controls, see XAML styles.

Color-APIColor API

Es gibt verschiedene APIs, mit denen Sie Ihrer App Farbe hinzufügen können.There are several APIs that can be used to add color to your application. Dies ist zunächst die Colors-Klasse, die eine umfangreiche Liste vordefinierter Farben implementiert.First, the Colors class, which implements a large list of predefined colors. Darauf kann mithilfe der XAML-Eigenschaften automatisch zugegriffen werden.These can be accessed automatically with XAML properties. Im folgenden Beispiel erstellen wir eine Schaltfläche und legen die Farbeigenschaften für Hintergrund und Vordergrund auf Mitglieder der Colors-Klasse fest.In the example below, we create a button and set the background and foreground color properties to members of the Colors class.

<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.You can create your own colors from RGB or hex values using the Color struct in XAML.

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

Sie können auch dieselbe Farbe im Code mit der FromArgb-Methode erstellen.You can also create the same color in code by using the FromArgb method.

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.The letters "Argb" stands for Alpha (opacity), Red, Green, and Blue, which are the four components of a color. Jedes Argument kann zwischen 0 und 255 liegen.Each argument can range from 0 to 255. Sie können den ersten Wert wahlweise weglassen und erhalten so eine standardmäßige Deckkraft von 255 oder 100 % undurchsichtig.You can choose to omit the first value, which will give you a default opacity of 255, or 100% opaque.

Hinweis

Wenn Sie C++ verwenden, müssen Sie Farben mit der ColorHelper-Klasse erstellen.If you're using C++, you must create colors by using the ColorHelper class.

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.The most common use for a Color is as an argument for a SolidColorBrush, which can be used to paint UI elements a single solid color. Diese Pinsel werden in der Regel in einem ResourceDictionary definiert, sodass sie für mehrere Elemente wiederverwendet werden können.These brushes are generally defined in a ResourceDictionary, so they can be reused for multiple elements.

<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.For more information on how to use brushes, see XAML brushes.

Festlegen des Gültigkeitsbereichs von SystemfarbenScoping system colors

Zusätzlich zum Definieren Ihrer eigenen Farben in Ihrer App können Sie auch mithilfe des Tags ColorPaletteResources den Gültigkeitsbereich für unsere Systemfarben in der gesamten App auf gewünschte Regionen festlegen.In addition to defining your own colors in your app, you can also scope our systematized colors to desired regions throughout your app by using the ColorPaletteResources tag. Über diese API können Sie nicht nur großen Gruppen von Steuerelementen gleichzeitig Farben und Designs zuweisen, indem Sie einige wenige Eigenschaften festlegen, sondern Sie können auch viele andere Systemvorteile nutzen, die Sie beim manuellen Definieren Ihrer eigenen benutzerdefinierten Farben normalerweise nicht erhalten würden:This API allows you to not only colorize and theme large groups of controls at once by setting a few properties, but also gives you many other system benefits that you wouldn't normally get with defining your own custom colors manually:

  • Eine mit ColorPaletteResources festgelegte Farbe hat keine Auswirkung auf „Hoher Kontrast“.Any color set using ColorPaletteResources will not effect High Contrast
    • Dies bedeutet, dass mehr Personen ohne zusätzliche Design- oder Dev-Kosten auf Ihre App zugreifen können.Meaning your app will be accessible to more people without any additional design or dev cost
  • Sie können Farben in beiden Designs ganz einfach auf „Hell“, „Dunkel“ oder „Pervasive“ festlegen, indem Sie in der API eine einzige Eigenschaft festlegen.Can easily set colors to Light, Dark or pervasive across both themes by setting one property on the API
  • Farben, die unter ColorPaletteResources festgelegt wurden, werden auf alle ähnlichen Steuerelemente, die diese Systemfarben ebenfalls verwenden, nach unten kaskadiert.Colors set on ColorPaletteResources will cascade down to all similar controls that also use that system color
    • Dadurch wird sichergestellt, dass Ihre gesamte App eine einheitliche Farbdarstellung aufweist und gleichzeitig das Erscheinungsbild Ihrer Marke beibehalten wird.This ensures that you will have a consistent color story across your app while maintaining the look of your brand
  • Wirkt sich auf alle visuellen Zustände, Animationen und Deckkraftvarianten aus, ohne dass eine neue Vorlage erforderlich ist.Effects all visual states, animations and opacity variations without needing to re-template

Verwenden von „ColorPaletteResources“How to use ColorPaletteResources

„ColorPaletteResources“ ist eine API, die das System informiert, für welche Ressourcen wo ein Gültigkeitsbereich festgelegt wird.ColorPaletteResources is an API that tells the system what resources are being scoped where. Für „ColorPaletteResources“ muss ein x:Key angegeben werden, der einer der drei folgenden Werte sein kann:ColorPaletteResources must take an x:Key, that can be one of three choices:

Durch Festlegen eines Werts für „x:Key“ wird sichergestellt, dass Ihre Farben sich entsprechend dem System oder dem App-Design ändern, wenn eines der Designs ein anderes benutzerdefiniertes Erscheinungsbild haben soll.Setting that x:Key will ensure that your colors change appropriately to the system or app theme, should you want a different custom appearance when in either theme.

Anwenden von bereichsbezogenen FarbenHow to apply scoped colors

Durch das Festlegen von Gültigkeitsbereichen über die ColorPaletteResources-API in XAML können Sie eine beliebige Systemfarbe oder einen beliebigen Pinsel aus unserer Bibliothek Designressourcen verwenden und sie bzw. ihn innerhalb des Bereichs einer Seite oder eines Containers neu definieren.Scoping resources through the ColorPaletteResources API in XAML allows you to take any system color or brush that's in our theme resources library and redefine them within the scope of a page or container.

Wenn Sie beispielsweise zwei Systemfarben – BaseLow und BaseMediumLow – in einem Raster definiert und dann zwei Schaltflächen auf Ihrer Seite platziert haben, eine in diesem Raster und eine außerhalb:For example, if you defined two system colors - BaseLow and BaseMediumLow inside a grid, and then placed two buttons on your page: one inside that grid, and one outside:

<Grid x:Name="Grid_A">
    <Grid.Resources>
        <ColorPaletteResources x:Key="Default"
        BaseLow="LightGreen"
        BaseMediumLow="DarkCyan"/>
    </Grid.Resources>

    <Buton Content="Button_A"/>
</Grid>
<Buton Content="Button_B"/>

Würden Sie Button_A mit den angewendeten neuen Farben erhalten, und Button_B würde weiterhin wie die Standardschaltfläche unseres Systems aussehen:You would get Button_A with the applied new colors, and Button_B would remain looking like our system default button:

Bereichsbezogene Systemfarben auf Schaltfläche

Da aber alle unsere Systemfarben auch auf andere Steuerelemente nach unten kaskadiert werden, wird sich das Festlegen von Werten für BaseLow und BaseMediumLow auf mehr als nur Schaltflächen auswirken.However, since all our system colors cascade down to other controls too, setting BaseLow and BaseMediumLow will affect more than just buttons. In diesem Fall wirken sich diese Änderungen der Systemfarbe auch auf Steuerelemente wie ToggleButton, RadioButton und Slider aus, wenn diese Steuerelemente in den Rasterbereich des vorstehenden Beispiels eingefügt werden.In this case, controls like ToggleButton, RadioButton and Slider will also be effected by these system color changes, should those controls be put in above example grid's scope. Wenn Sie einen Bereich für eine Systemfarbe festlegen möchten, wechseln Sie zu einem einzigen Steuerelement, indem Sie ColorPaletteResources innerhalb der Ressourcen dieses Steuerelements definieren:If you wish to scope a system color change to a single controls only you can do so by defining ColorPaletteResources within that control's resources:

<Grid x:Name="Grid_A">
    <Button Content="Button_A">
        <Button.Resources>
            <ColorPaletteResources x:Key="Default"
                BaseLow="LightGreen"
                BaseMediumLow="DarkCyan"/>
        </Button.Resources>
    </Button>
</Grid>
<Button Content="Button_B"/>

Das Ergebnis entspricht im Wesentlichen exakt dem vorstehend gezeigten Beispiel, doch jetzt übernehmen alle anderen Steuerelemente, die dem Raster hinzugefügt werden, die Farbänderungen nicht.You essentially have the exact same thing as before, but now any other controls added to the grid will not pick up the color changes. Der Grund: Diese Systemfarben sind nur auf den Bereich Button_A bezogen.This is because those system colors are scoped to Button_A only.

Schachteln von bereichsbezogenen RessourcenNesting scoped resources

Es ist auch möglich, Systemfarben zu schachteln. Dazu fügen Sie ColorPaletteResources im Markup Ihres App-Layouts in den Ressourcen der geschachtelten Elemente ein:Nesting system colors is also possible, and is done so by placing ColorPaletteResources in the nested elements' resources within the markup of your app layout:

<Grid x:Name="Grid_A">
    <Grid.Resources>
        <ColorPaletteResources x:Key="Default"
            BaseLow="LightGreen"
            BaseMediumLow="DarkCyan"/>
    </Grid.Resources>

    <Button Content="Button_A"/>
    <Grid x:Name="Grid_B">
        <Grid.Resources>
            <ColorPaletteResources x:Key="Default"
                BaseLow="Goldenrod"
                BaseMediumLow="DarkGoldenrod"/>
        </Grid.Resources>

        <Button Content="Nested Button"/>
    </Grid>
</Grid>

In diesem Beispiel erbt Button_A Farben, die in den Ressourcen von Grid_A definiert wurden, und Nested Button erbt Farben aus den Ressourcen von Grid_B.In this example, Button_A is inheriting colors define in Grid_A's resources, and Nested Button is inheriting colors from Grid_B's resources. Weiter gedacht bedeutet dies, dass alle anderen in Grid_B platzieren Steuerelemente zuerst die Ressourcen von Grid_B überprüfen oder anwenden, bevor sie die Ressourcen von Grid_A überprüfen oder anwenden, und dass sie zuletzt unsere Standardfarben anwenden, wenn auf der Seiten- oder App-Ebene nichts definiert wurde.By extension, this means that any other controls placed within Grid_B will check or apply Grid_B's resources first, before checking or applying Grid_A's resources, and finally applying our default colors if nothing is defined at the page or app level.

Dies funktioniert bei einer beliebigen Anzahl von geschachtelten Elementen, für deren Ressourcen es Farbdefinitionen gibt.This works for any number of nested elements whose resources have color definitions.

Festlegen des Gültigkeitsbereichs mit einem ResourceDictionaryScoping with a ResourceDictionary

Ihre Möglichkeiten sind nicht auf die Ressourcen für einen Container oder eine Seite beschränkt, und Sie können diese Systemfarben auch in einem ResourceDictionary definieren und es anschließend in jedem beliebigen Bereich genauso zusammenführen, wie Sie ein Wörterbuch normalerweise zusammenführen würden.You are not limited to a container or page’s resources, and can also define these system colors in a ResourceDictionary that can then be merged at any scope the way you normally would merge a dictionary.

MyCustomTheme.xamlMyCustomTheme.xaml

Zuerst erstellen Sie ein ResourceDictionary.First, you would create a ResourceDictionary. Dann fügen Sie die ColorPaletteResources in den „ThemeDictionaries“ ein und setzen die gewünschten Systemfarben außer Kraft:Then place the ColorPaletteResources within the ThemeDictionaries and override the desired system colors:

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestApp">

    <ResourceDictionary.ThemeDictionaries>
        <ResourceDictionary x:Key="Default">
            <ResourceDictionary.MergedDictionaries>

                <ColorPaletteResources x:Key="Default"
                    Accent="#FF0073CF"
                    AltHigh="#FF000000"
                    AltLow="#FF000000"/>

            </ResourceDictionary>
        </ResourceDictionary.MergedDictionaries>        
    </ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>

MainPage.xamlMainPage.xaml

Auf der Seite mit Ihrem Layout führen Sie dieses Wörterbuch einfach in dem gewünschten Bereich zusammen:On the page containing your layout, simply merge that dictionary in at the scope you want:

<Grid x:Name="Grid_A">
    <Grid.Resources>
            <ResourceDictionary>
                <ResourceDictionary.MergedDictionaries>
                    <ResourceDictionary Source="MyCustomTheme.xaml"/>
                </ResourceDictionary.MergedDictionaries>
            </ResourceDictionary>
    </Grid.Resources>

    <Button Content="Button_A"/>
</Grid>

Jetzt können alle Ressourcen, Designs und benutzerdefinierten Farben in einem einzigen MyCustomTheme-Ressourcenverzeichnis platziert und ihnen ein Gültigkeitsbereich nach Bedarf hinzugefügt werden, ohne dass Sie sich Gedanken um zusätzlichen Clutter im Markup Ihres Layouts machen müssen.Now, all resources, theming, and custom colors can be placed in a single MyCustomTheme resource dictionary and scoped where needed without having to worry about extra clutter in your layout markup.

Andere Möglichkeiten zum Definieren von FarbressourcenOther ways to define color resources

„ColorPaletteResources“ ermöglicht es auch, dass Systemfarben darin platziert und dort direkt als Wrapper (statt inline) definiert werden:ColorPaletteResources also allows for system colors to be placed and defining directly within it as a wrapper, rather than in line:

<ColorPaletteResources x:Key="Dark">
    <Color x:Key="SystemBaseLowColor">Goldenrod</Color>
</ColorPaletteResources>

BenutzerfreundlichkeitUsability

Abbildung eines Kontrasts

KontrasteContrast

Stellen Sie sicher, dass Elemente und Bilder ausreichend Kontrast aufweisen, damit sie sich unabhängig von Akzentfarbe oder Design unterscheiden.Make sure that elements and images have sufficient contrast to differentiate between them, regardless of the accent color or theme.

Wenn Sie sich über die Farben in Ihrer Anwendung Gedanken machen, sollte Barrierefreiheit ein primäres Anliegen sein.When considering what colors to use in your application, accessibility should be a primary concern. Befolgen Sie die folgenden Leitlinien, um sicherzustellen, dass Ihre Anwendung für so viele Benutzer wie möglich zugänglich ist.Use the guidance below to make sure your application is accessible to as many users as possible.

Veranschaulichung von Kontrast

BeleuchtungLighting

Beachten Sie, dass eine Veränderung der Umgebungsbeleuchtung sich auf die Benutzerfreundlichkeit Ihrer App auswirken kann.Be aware that variation in ambient lighting can affect the usability of your app. So kann beispielsweise eine Seite mit schwarzem Hintergrund aufgrund der Blendung des Bildschirms im Freien nicht lesbar sein, während eine Seite mit weißem Hintergrund in einem dunklen Raum problematisch sein kann.For example, a page with a black background might unreadable outside due to screen glare, while a page with a white background might be painful to look at in a dark room.

Veranschaulichung von Kontrast

FarbenblindheitColorblindness

Achten Sie darauf, wie sich Farbenblindheit auf die Benutzerfreundlichkeit der Anwendung auswirken könnte.Be aware of how colorblindness could affect the usability of your application. Beispielsweise hat ein Benutzer mit rot-grüner Farbenblindheit Schwierigkeiten, rote und grüne Elemente voneinander zu unterscheiden.For example, a user with red-green colorblindness will have difficulty distinguishing red and green elements from each other. Ca. 8% der Männer und 0,5% der Frauen sind rot-grün farbenblind. Vermeiden Sie daher, diese Farbkombinationen als alleiniges Unterscheidungsmerkmal zwischen Anwendungselementen zu verwenden.About 8 percent of men and 0.5 percent of women are red-green colorblind, so avoid using these color combinations as the sole differentiator between application elements.