CouleurColor

Image Hero

La couleur fournit un moyen intuitif de communiquer des informations aux utilisateurs de votre application : elle peut être utilisée pour indiquer une interactivité, donner un feedback aux actions de l’utilisateur et procurer à votre interface une certaine continuité visuelle.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.

Dans les applications Windows, les couleurs sont principalement déterminées par la couleur d’accentuation et le thème.In Windows apps, colors are primarily determined by accent color and theme. Dans cet article, nous expliquons comment utiliser la couleur dans votre application, et comment utiliser les ressources de couleur d’accentuation et de thème pour rendre votre application Windows utilisable dans n’importe quel contexte de thème.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.

Principes des couleursColor principles

Utilisez les couleurs de manière intelligente.Use color meaningfully. Lorsqu’une couleur est utilisée avec parcimonie pour mettre en évidence des éléments importants, elle permet de créer une interface utilisateur fluide et intuitive.When color is used sparingly to highlight important elements, it can help create a user interface that is fluid and intuitive.

Utilisez les couleurs pour indiquer l’interactivité.Use color to indicate interactivity. Il est recommandé de choisir une couleur pour indiquer les éléments interactifs de votre application.It's a good idea to choose one color to indicate elements of your application that are interactive. Par exemple, la plupart des pages web utilisent du texte en bleu pour représenter un lien hypertexte.For example, many web pages use blue text to denote a hyperlink.

Le choix de couleurs est personnel.Color is personal. Dans Windows, les utilisateurs peuvent choisir une couleur d’accentuation et un thème clair ou foncé, qui sont conservés tout au long de leur expérience.In Windows, users can choose an accent color and a light or dark theme, which are reflected throughout their experience. Vous pouvez choisir comment incorporer la couleur d’accentuation et le thème de l’utilisateur dans votre application pour personnaliser son expérience.You can choose how to incorporate the user's accent color and theme into your application, personalizing their experience.

Le choix de couleurs est culturel.Color is cultural. Prenez en compte la façon dont les couleurs utilisées seront interprétées par des personnes de différentes cultures.Consider how the colors you use will be interpreted by people from different cultures. Par exemple, dans certaines cultures, la couleur bleue est associée à la vertu et à la protection, tandis que dans d’autres cultures, elle représente le deuil.For example, in some cultures the color blue is associated with virtue and protection, while in others it represents mourning.

ThèmesThemes

Les applications Windows peuvent utiliser un thème d’application clair ou foncé.Windows apps can use a light or dark application theme. Le thème affecte les couleurs de l’arrière-plan, du texte, des icônes et des contrôles courants de l’application.The theme affects the colors of the app's background, text, icons, and common controls.

Thème clairLight theme

thème clair

Thème foncéDark theme

thème foncé

Par défaut, le thème de votre application Windows est la préférence de thème de l’utilisateur définie dans les paramètres Windows, ou le thème par défaut de l’appareil (c’est-à-dire foncé sur 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). Vous pouvez cependant définir le thème de votre application Windows.However, you can set the theme for your Windows app.

Changement du thèmeChanging the theme

Vous pouvez changer de thèmes en modifiant la propriété RequestedTheme dans votre fichier App.xaml.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>

La suppression de la propriété RequestedTheme signifie que votre application utilise les paramètres système de l’utilisateur.Removing the RequestedTheme property means that your application will use the user’s system settings.

Les utilisateurs peuvent également sélectionner le thème à contraste élevé, qui utilise une petite palette de couleurs contrastées pour faciliter la visualisation de l’interface.Users can also select the high contrast theme, which uses a small palette of contrasting colors that makes the interface easier to see. Dans ce cas, le système remplace votre propriété RequestedTheme.In that case, the system will override your RequestedTheme.

Test des thèmesTesting themes

Si vous ne demandez pas un thème pour votre application, veillez à tester votre application dans les thèmes clair et foncé pour vérifier qu’elle est lisible dans toutes les conditions.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.

Remarque : Dans Visual Studio, la valeur par défaut de RequestedTheme est Light (Clair) : vous devrez donc modifier la valeur de RequestedTheme pour tester les deux thèmes.Note: In Visual Studio, the default RequestedTheme is light, so you'll need to change the RequestedTheme to test both.

Pinceaux de thèmeTheme brushes

Les contrôles courants utilisent automatiquement des pinceaux de thème pour ajuster le contraste des thèmes clair et foncé.Common controls automatically use theme brushes to adjust contrast for light and dark themes.

Par exemple, voici une illustration de la façon dont AutoSuggestBox utilise les pinceaux de thème :For example, here's an illustration of how the AutoSuggestBox uses theme brushes:

exemple de contrôle avec des pinceaux de thème

Les pinceaux de thème sont utilisés aux fins suivantes :The theme brushes are used for the following purposes:

  • Base est utilisé pour le texte.Base is for text.
  • Alt est l’inverse de Base.Alt is the inverse of Base.
  • Chrome est utilisé pour les éléments du plus haut niveau, comme les volets de navigation ou les barres de commandes.Chrome is for top-level elements, such as navigation panes or command bars.
  • List est utilisé pour les contrôles de liste.List is for list controls.

Low/Medium/High font référence à l’intensité de la couleur.Low/Medium/High refer to the intensity of the color.

Utilisation des pinceaux de thèmeUsing theme brushes

Lors de la création de modèles pour les contrôles personnalisés, utilisez les pinceaux de thème au lieu de coder en dur les valeurs de couleur.When creating templates for custom controls, use theme brushes rather than hard code color values. De cette façon, votre application peut facilement s’adapter à n’importe quel thème.This way, your app can easily adapt to any theme.

Par exemple, ces modèles d’éléments pour ListView montrent comment utiliser des pinceaux de thème dans un modèle personnalisé.For example, these item templates for ListView demonstrate how to use theme brushes in a custom template.

élément de liste à deux lignes avec exemple d’icône

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

Pour plus d’informations sur l’utilisation des pinceaux de thème dans votre application, consultez Ressources de thème.For more information about how to use theme brushes in your app, see Theme Resources.

Couleur d’accentuationAccent color

Les contrôles courants utilisent une couleur d’accentuation pour donner des informations d’état.Common controls use an accent color to convey state information. Par défaut, la couleur d’accentuation est la valeur de SystemAccentColor sélectionnée par les utilisateurs dans leurs paramètres.By default, the accent color is the SystemAccentColor that users select in their Settings. Cependant, vous pouvez aussi personnaliser la couleur d’accentuation de votre application pour refléter votre marque.However, you can also customize your app's accent color to reflect your brand.

contrôles Windows

en-tête d’accentuation sélectionné par l’utilisateur couleur d’accentuation sélectionnée par l’utilisateuruser-selected accent header user-selected accent color

en tête d’accentuation personnalisé couleur d’accentuation de marque personnaliséecustom accent header custom brand accent color

Remplacement de la couleur d’accentuationOverriding the accent color

Pour changer la couleur d’accentuation de votre application, placez le code suivant dans app.xaml.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>

Choix d’une couleur d’accentuationChoosing an accent color

Si vous sélectionnez une couleur d’accentuation personnalisée pour votre application, vérifiez que le texte et les arrière-plans qui utilisent la couleur d’accentuation ont un contraste suffisant pour assurer une lisibilité optimale.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. Pour tester le contraste, vous pouvez utiliser l’outil Sélecteur de couleurs dans les paramètres Windows, ou vous pouvez utiliser ces outils de contraste en ligne.To test contrast, you can use the color picker tool in Windows Settings, or you can use these online contrast tools.

Sélecteur de couleurs d’accentuation personnalisées dans les paramètres Windows

Palette de couleurs d’accentuationAccent color palette

Un algorithme de couleur d’accentuation dans le shell Windows génère des nuances claires et foncées de la couleur d’accentuation.An accent color algorithm in the Windows shell generates light and dark shades of the accent color.

palette de couleurs d’accentuation

Ces nuances sont accessibles en tant que ressources de thème :These shades can be accessed as theme resources:

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

Vous pouvez également accéder à la palette de couleurs d’accentuation par programmation avec la méthode UISettings.GetColorValue et l’énumération UIColorType.You can also access the accent color palette programmatically with the UISettings.GetColorValue method and UIColorType enum.

Vous pouvez utiliser la palette de couleurs d’accentuation pour les thèmes de couleur de votre application.You can use the accent color palette for color theming in your app. Voici un exemple de l’utilisation de la palette de couleurs d’accentuation sur un bouton.Below is an example of how you can use the accent color palette on a button.

Palette de couleurs d’accentuation appliquée à un bouton

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

Quand vous utilisez du texte en couleur sur un arrière-plan en couleur, vérifiez que le contraste est suffisant entre le texte et l’arrière-plan.When using colored text on a colored background, make sure there is enough contrast between text and background. Par défaut, le lien hypertexte utilise la couleur d’accentuation.By default, hyperlink or hypertext will use the accent color. Si vous appliquez des variantes de la couleur d’accentuation à l’arrière-plan, vous devez utiliser une variante de la couleur d’accentuation d’origine pour optimiser le contraste du texte en couleur sur un arrière-plan en couleur.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.

Le graphique ci-dessous illustre un exemple des différentes nuances claires et foncées de la couleur d’accentuation. Il décrit également comment le type peut être appliqué sur une surface en couleur.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.

Capture d’écran de la couleur du graphique montrant un dégradé de couleur allant du bleu clair en haut au bleu foncé en bas.

Pour plus d’informations sur l’application de styles aux contrôles, voir Styles XAML.For more information about styling controls, see XAML styles.

API de couleurColor API

Vous pouvez utiliser plusieurs API pour ajouter de la couleur à votre application.There are several APIs that can be used to add color to your application. Il y a d’abord la classe Colors, qui implémente une longue liste de couleurs prédéfinies.First, the Colors class, which implements a large list of predefined colors. Celles-ci sont accessibles automatiquement avec les propriétés XAML.These can be accessed automatically with XAML properties. Dans l’exemple ci-dessous, nous créons un bouton et nous définissons les propriétés de couleur d’arrière-plan et de premier plan pour les membres de la classe Colors.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>

Vous pouvez créer vos propres couleurs à partir des valeurs RVB ou hexadécimales en utilisant la structure Color en XAML.You can create your own colors from RGB or hex values using the Color struct in XAML.

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

Vous pouvez également créer la même couleur dans le code à l’aide de la méthode FromArgb.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);

Les lettres « Arvb » signifient Alpha (opacité), Rouge, Vert et Bleu, qui sont les quatre composants d’une couleur.The letters "Argb" stands for Alpha (opacity), Red, Green, and Blue, which are the four components of a color. Chaque argument peut être compris entre 0 et 255.Each argument can range from 0 to 255. Vous pouvez choisir d’omettre la première valeur, ce qui vous donne une opacité par défaut de 255, c’est-à-dire 100 % opaque.You can choose to omit the first value, which will give you a default opacity of 255, or 100% opaque.

Notes

Si vous utilisez C++, vous devez créer des couleurs à l’aide de la classe ColorHelper.If you're using C++, you must create colors by using the ColorHelper class.

Un objet Color est le plus souvent utilisé comme argument d’un objet SolidColorBrush, qui peut être utilisé pour peindre les éléments de l’interface utilisateur dans une seule couleur unie.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. Ces pinceaux sont généralement définis dans un objet ResourceDictionary : ils peuvent donc être réutilisés pour plusieurs éléments.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>

Pour plus d’informations sur l’utilisation des pinceaux, consultez Pinceaux XAML.For more information on how to use brushes, see XAML brushes.

Étendue des couleurs systèmeScoping system colors

En plus de définir vos propres couleurs dans votre application, vous pouvez également délimiter nos couleurs systématisées à des régions souhaitées dans toute votre application en utilisant la balise ColorPaletteResources.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. Cette API vous permet non seulement de mettre en couleur et d’appliquer des thèmes pour des contrôles en même temps en définissant quelques propriétés, mais vous apporte aussi de nombreux avantages du système que vous n’obtenez normalement pas en définissant vos propres couleurs personnalisées manuellement :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:

  • Une couleur définie avec ColorPaletteResources ne va pas apporter un contraste élevé.Any color set using ColorPaletteResources will not effect High Contrast
    • Cela signifie que votre application sera accessible à plus de personnes sans coût de développement ou de conception supplémentaires.Meaning your app will be accessible to more people without any additional design or dev cost
  • Vous pouvez facilement définir des couleurs sur Light, sur Dark ou pour qu’elle soit omniprésente sur les deux thèmes en définissant une seule propriété sur l’API.Can easily set colors to Light, Dark or pervasive across both themes by setting one property on the API
  • Les couleurs définies sur ColorPaletteResources sont appliquées en cascade à tous les contrôles similaires qui utilisent également cette couleur système.Colors set on ColorPaletteResources will cascade down to all similar controls that also use that system color
    • Ceci vous permet d’avoir un schéma de couleurs cohérent dans votre application tout en conservant l’aspect de votre marqueThis ensures that you will have a consistent color story across your app while maintaining the look of your brand
  • Traite tous les états visuels, les animations et les variations d’opacité sans qu’il soit nécessaire de recréer un modèleEffects all visual states, animations and opacity variations without needing to re-template

Comment utiliser ColorPaletteResourcesHow to use ColorPaletteResources

ColorPaletteResources est une API qui indique au système quelles ressources sont dans l’étendue.ColorPaletteResources is an API that tells the system what resources are being scoped where. ColorPaletteResources doit prendre un x:Key, qui peut être un des trois choix suivants :ColorPaletteResources must take an x:Key, that can be one of three choices:

  • Par défautDefault
    • Affiche vos modifications de couleur dans les thèmes Light et DarkWill show your color changes in both Light and Dark theme
  • LégerLight
    • Affiche vos modifications de couleur seulement dans le thème LightWill show your color changes only in Light theme
  • FoncéDark
    • Affiche vos modifications de couleur seulement dans le thème DarkWill show your color changes only in Dark theme

La définition de ce x:Key garantit que vos couleurs changent de façon appropriée pour le thème système ou le thème de l’application dans le cas où vous voulez une apparence personnalisée différente dans l’un ou l’autre thème.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.

Comment appliquer des couleurs délimitéesHow to apply scoped colors

La délimitation des ressources via l’API ColorPaletteResources dans XAML vous permet de prendre n’importe quelle couleur ou pinceau système qui se trouve dans notre bibliothèque de ressources de thème, et de les redéfinir dans l’étendue d’une page ou d’un conteneur.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.

Par exemple, si vous avez défini deux couleurs système - BaseLow et BaseMediumLow dans une grille, puis que vous avez placé deux boutons sur votre page, un à l’intérieur de cette grille et un à l’extérieur :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"/>

Vous obtenez Button_A, auquel les nouvelles couleurs sont appliquées, et Button_B, dont l’apparence reste celle du bouton système par défaut :You would get Button_A with the applied new colors, and Button_B would remain looking like our system default button:

couleurs système délimitées à un bouton

Cependant, comme toutes nos couleurs système sont également appliquées en cascade à d’autres contrôles, la définition de BaseLow et de BaseMediumLow va affecter d’autres éléments que simplement les boutons.However, since all our system colors cascade down to other controls too, setting BaseLow and BaseMediumLow will affect more than just buttons. Dans ce cas, des contrôles comme ToggleButton, RadioButton et Slider sont également affectés par ces changements de couleur système dès lors qu’ils se trouvent dans l’étendue de la grille de notre exemple ci-dessus.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. Si vous voulez délimiter un changement de la couleur système à un seul contrôle vous pouvez le faire en définissant ColorPaletteResources dans les ressources de ce contrôle :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"/>

Vous avez exactement la même chose qu’auparavant, mais maintenant, tous les contrôles ajoutés à la grille ne vont pas être soumis aux changements de couleur.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. La raison en est que ces couleurs système sont délimitées au seul élément Button_A.This is because those system colors are scoped to Button_A only.

Imbrication de ressources délimitéesNesting scoped resources

L’imbrication de couleurs système est également possible et se fait en plaçant ColorPaletteResources dans les ressources des éléments imbriqués, dans le balisage de la disposition de votre application :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>

Dans cet exemple, Button_A hérite des couleurs définies dans les ressources de Grid_A, et Nested Button hérite des couleurs provenant des ressources de 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. Par extension, cela signifie que tous les autres contrôles placés dans Grid_B vont d’abord consulter ou appliquer les ressources de Grid_B, avant de consulter ou d’appliquer les ressources de Grid_A, et qu’ils vont au final appliquer nos couleurs par défaut si rien n’est défini au niveau de la page ou de l’application.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.

Ceci fonctionne pour n’importe quel nombre d’éléments imbriqués dont les ressources ont des définitions de couleur.This works for any number of nested elements whose resources have color definitions.

Délimitation avec un ResourceDictionaryScoping with a ResourceDictionary

Vous n’êtes pas limité aux ressources d’un conteneur ou d’une page, et vous pouvez aussi définir ces couleurs système dans un ResourceDictionary, qui peut ensuite être fusionné à n’importe quelle étendue, de la façon dont vous fusionnez normalement un dictionnaire.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

Vous créez d’abord un ResourceDictionary.First, you would create a ResourceDictionary. Vous placez ensuite le ColorPaletteResources dans les ThemeDictionaries et vous remplacez les couleurs système souhaitées :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

Dans la page contenant votre disposition, fusionnez simplement ce dictionnaire à l’étendue souhaitée :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>

À présent, toutes les ressources, les thèmes et les couleurs personnalisées peuvent être placés dans un même dictionnaire de ressources MyCustomTheme et délimitées où c’est nécessaire, sans avoir à se soucier de l’encombrement supplémentaire dans le balisage de votre disposition.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.

Autres moyens de définir des ressources de couleurOther ways to define color resources

ColorPaletteResources permet aussi le placement de couleurs système et leur définition directe dans celui-ci en tant que wrapper, au lieu d’une définition « in line » :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>

Facilité d'utilisationUsability

Illustration du contraste

ContrasteContrast

Assurez-vous que les éléments et les images ont un contraste suffisant pour que l’on puisse les distinguer, quelle que soit la couleur d’accentuation ou le thème.Make sure that elements and images have sufficient contrast to differentiate between them, regardless of the accent color or theme.

Lorsque vous vous demandez quelle couleur vous devriez utiliser dans votre application, rappelez-vous que l’accessibilité doit être une préoccupation principale.When considering what colors to use in your application, accessibility should be a primary concern. Utilisez les instructions ci-dessous pour vous assurer que votre application est accessible au plus grand nombre d'utilisateurs possible/.Use the guidance below to make sure your application is accessible to as many users as possible.

Illustration de l’éclairage

ÉclairageLighting

Notez la variation de l’éclairage ambiant peut avoir un impact sur la convivialité de votre application.Be aware that variation in ambient lighting can affect the usability of your app. Par exemple, une page avec un arrière-plan noir peut être illisible à l’extérieur à cause de la présence de reflets sur l'écran, tandis qu’une page avec un arrière-plan blanc peut être difficile à lire dans une pièce sombre.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.

Illustration du daltonisme

DaltonismeColorblindness

N’oubliez pas que le daltonisme peut avoir un impact sur votre application et la rendre difficile à utiliser.Be aware of how colorblindness could affect the usability of your application. Par exemple, un utilisateur souffrant de daltonisme rouge-vert aura ne pourra pas facilement déterminer quels sont les éléments rouges et quels sont les éléments verts.For example, a user with red-green colorblindness will have difficulty distinguishing red and green elements from each other. Environ 8 % des hommes et 0,5 % des femmes souffrent de daltonisme rouge-vert. Veillez donc à ne pas utiliser ces combinaisons de couleurs comme unique moyen de différenciation des éléments de l’application.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.