Partager via

Utilisation des pinceaux pour peindre des arrière-plans, des premiers plans et des contours

  • Article

Utilisez des objets Brush pour peindre les intérieurs et les contours de formes, textes et contrôles XAML afin de les rendre visibles dans l’interface utilisateur de votre application.

API importantes : classe Brush

Présentation des pinceaux

Pour peindre un objet Shape, du texte ou des parties d’un Control qui apparaît sur le canevas de l’application, définissez la propriété Fill de Shape ou les propriétés Background et Foreground d’un Control avec une valeur Brush.

Les différents types de pinceaux sont les suivants :

Pinceaux de couleur unie

Un pinceau SolidColorBrush peint une zone en une seule couleur Color, comme le rouge ou le bleu. Il s’agit du pinceau le plus élémentaire. En XAML, il existe trois façons de définir un SolidColorBrush et la couleur associée : avec des noms de couleur prédéfinie, avec des valeurs de couleur hexadécimales ou avec la syntaxe des éléments de propriété.

Noms de couleur prédéfinie

Vous pouvez utiliser un nom de couleur prédéfinie, comme Yellow ou Magenta. 256 couleurs nommées sont disponibles. L’analyseur XAML convertit le nom de la couleur en une structure Color avec les canaux de couleur appropriés. Étant donné que les 256 couleurs nommées s’appuient sur les noms de couleurs X11 issus de la spécification CSS3 (Cascading Style Sheets, Level 3), vous connaissez peut-être déjà cette liste de couleurs nommées si vous avez de l’expérience en matière de développement ou de conception de sites web.

Voici un exemple qui définit la propriété Fill d’un objet Rectangle sur la couleur prédéfinie Red.

<Rectangle Width="100" Height="100" Fill="Red" />

SolidColorBrush rendu

SolidColorBrush appliqué à un rectangle

Si vous définissez un objet SolidColorBrush en utilisant un code plutôt que du XAML, chaque couleur nommée est disponible en tant que valeur de propriété statique de la classe Colors. Par exemple, pour déclarer une valeur Color d’un objet SolidColorBrush pour représenter la couleur nommée « Orchid », définissez la valeur Color sur la valeur statique Colors.Orchid.

Valeurs de couleur hexadécimales

Vous pouvez utiliser une chaîne au format hexadécimal pour déclarer des valeurs de couleurs précises sur 24 bits avec un canal alpha sur 8 bits pour un objet SolidColorBrush. Deux caractères dans la plage 0 à F définissent chaque valeur du composant, et l’ordre des valeurs de composants de la chaîne hexadécimale est le suivant : canal alpha (opacité), canal rouge, canal vert et canal bleu (ARVB). Par exemple, la valeur hexadécimale « #FFFF0000 » définit un rouge entièrement opaque (alpha="FF », red="FF », green="00 », et blue="00 »).

Cet exemple XAML définit la propriété Fill d’un rectangle sur la valeur hexadécimale « #FFFF0000 » et donne un résultat identique à l’utilisation de la couleur nommée Colors.Red.

<StackPanel>
  <Rectangle Width="100" Height="100" Fill="#FFFF0000" />
</StackPanel>

Syntaxe des éléments de la propriété

Vous pouvez utiliser la syntaxe des éléments de propriété pour définir un objet SolidColorBrush. Cette syntaxe est plus longue que les méthodes précédentes, mais elle vous permet de spécifier des valeurs de propriétés supplémentaires sur un élément, comme la propriété Opacity. Pour plus d’informations sur la syntaxe XAML, notamment la syntaxe des éléments de propriété, consultez la vue d’ensemble du langage XAML et le guide de la syntaxe XAML.

Dans les exemples précédents, le pinceau en cours de création est généré implicitement et automatiquement, dans le cadre d’un raccourci délibéré du langage XAML qui assure la simplicité de la définition de l’interface utilisateur dans les cas les plus courants. L’exemple suivant crée un objet Rectangle et crée explicitement l’objet SolidColorBrush en tant que valeur d’élément pour une propriété Rectangle.Fill. La propriété Color de l’objet SolidColorBrush est définie sur Blue, tandis que la propriété Opacity est définie sur 0,5.

<Rectangle Width="200" Height="150">
    <Rectangle.Fill>
        <SolidColorBrush Color="Blue" Opacity="0.5" />
    </Rectangle.Fill>
</Rectangle>

Pinceaux de dégradé linéaire

Un objet LinearGradientBrush peint une zone avec un dégradé défini le long d’une ligne. Cette ligne est appelée axe de dégradé. Vous spécifiez les couleurs du dégradé et leur emplacement le long de l’axe avec des objets GradientStop. Par défaut, l’axe de dégradé va du coin supérieur gauche vers le coin inférieur droit de la zone peinte par le pinceau, ce qui produit un ombrage en diagonale.

Le GradientStop est le composant de base d’un pinceau de dégradé. Un point de dégradé spécifie la propriété Color du pinceau à un Offset le long de l’axe de dégradé, quand le pinceau est appliqué à la zone à peindre.

La propriété Color du point de dégradé spécifie sa couleur. Vous pouvez définir la couleur en utilisant un nom de couleur prédéfini ou en spécifiant des valeurs ARVB hexadécimales.

La propriété Offset d’un objet GradientStop spécifie la position de chaque objet GradientStop le long de l’axe de dégradé. Offset est une valeur double de 0 à 1. Si la propriété Offset a pour valeur 0, l’objet GradientStop est placé au début de l’axe de dégradé, c’est-à-dire près de son StartPoint. Si la propriété Offset a la valeur 1, l’objet GradientStop est placé au point EndPoint. Au minimum, un objet LinearGradientBrush utile doit comporter deux valeurs GradientStop, chaque valeur GradientStop devant spécifier une propriété Color différente et avoir une propriété Offset différente dont la valeur est comprise entre 0 et 1.

Cet exemple crée un dégradé linéaire avec quatre couleurs et l’utilise pour peindre un objet Rectangle.

<!-- This rectangle is painted with a diagonal linear gradient. -->
<Rectangle Width="200" Height="100">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="Yellow" Offset="0.0" x:Name="GradientStop1"/>
            <GradientStop Color="Red" Offset="0.25" x:Name="GradientStop2"/>
            <GradientStop Color="Blue" Offset="0.75" x:Name="GradientStop3"/>
            <GradientStop Color="LimeGreen" Offset="1.0" x:Name="GradientStop4"/>
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

La couleur de chaque point entre les extrémités est interpolée de façon linéaire sous la forme d’une combinaison de la couleur spécifiée par les deux points de dégradé. L’image suivante met en évidence les points de dégradés de l’exemple précédent. Les cercles indiquent la position des points de dégradé, tandis que la ligne en pointillés représente l’axe de dégradé.

Diagramme montrant les points de dégradé 1 à 4 en partant de l’angle supérieur gauche du diagramme et en descendant vers la droite jusqu’au coin inférieur droit du diagramme.

Combinaison de couleurs spécifiée par les deux points de dégradé englobants

Vous pouvez changer la ligne de positionnement des points de dégradé en affectant aux propriétés StartPoint et EndPoint des valeurs différentes des valeurs par défaut initiales (0,0) et (1,1). En modifiant les valeurs des coordonnées de StartPoint et de EndPoint, vous pouvez créer des dégradés horizontaux ou verticaux, inverser le sens du dégradé ou condenser son étalement afin de l’appliquer à une plage plus petite que la zone peinte totale. Pour condenser le dégradé, vous définissez StartPoint et/ou EndPoint sur des valeurs comprises entre 0 et 1. Par exemple, pour obtenir un dégradé horizontal dont l’effet se produit en totalité sur la moitié gauche du pinceau, tandis que le côté droit conserve la dernière couleur unie définie par l’objet GradientStop, vous spécifiez une propriété StartPoint sur la valeur (0,0) et une propriété EndPoint sur la valeur (0.5,0).

Utiliser des outils pour rendre les dégradés

Maintenant que vous savez comment fonctionnent les dégradés linéaires, vous pouvez utiliser Visual Studio ou Blend pour les créer plus facilement. Pour créer un dégradé, sélectionnez l’objet auquel vous voulez l’appliquer dans l’aire de conception ou dans une vue XAML. Développez Pinceau, puis sélectionnez l’onglet Dégradé linéaire.

Créer un dégradé linéaire dans Visual Studio

Création d’un dégradé linéaire dans Visual Studio

Vous pouvez à présent modifier les couleurs des points de dégradé et modifier leurs positions à l’aide de la barre au bas de la fenêtre. Vous pouvez également ajouter de nouveaux points de dégradé en cliquant sur la barre, ou en supprimer en les faisant glisser à l’extérieur de la barre (voir la capture d’écran suivante).

Barre au bas de la fenêtre de propriétés qui contrôle les points de dégradé

Curseur du paramètre de dégradé

Pinceaux de dégradés radiaux

Un RadialGradientBrush est dessiné dans une ellipse qui est définie par les propriétés Center, RadiusX et RadiusY. Les couleurs du début du dégradé se trouvent au centre de l’ellipse et se terminent au niveau du rayon.

Les couleurs du dégradé radial sont définies par des points de couleur ajoutés à la propriété de collection GradientStops. Chaque point de dégradé spécifie une couleur et un décalage le long du dégradé.

L’origine du dégradé est définie par défaut au centre et peut être décalée à l’aide de la propriété GradientOrigin.

MappingMode définit si Center, RadiusX, RadiusY et GradientOrigin représentent des coordonnées relatives ou absolues.

Quand MappingMode a la valeur RelativeToBoundingBox, les valeurs X et Y des trois propriétés sont traitées par rapport aux limites d’élément, où (0,0) représente le coin supérieur gauche et (1,1) représente le coin inférieur droit des limites d’élément pour les propriétés Center, RadiusX et RadiusY et (0,0) représente le centre de la propriété GradientOrigin.

Quand MappingMode a la valeur Absolute, les valeurs X et Y des trois propriétés sont traitées comme des coordonnées absolues dans les limites d’élément.

Cet exemple crée un dégradé linéaire avec quatre couleurs et l’utilise pour peindre un objet Rectangle.

<!-- This rectangle is painted with a radial gradient. -->
<Rectangle Width="200" Height="200">
    <Rectangle.Fill>
        <media:RadialGradientBrush>
            <GradientStop Color="Blue" Offset="0.0" />
            <GradientStop Color="Yellow" Offset="0.2" />
            <GradientStop Color="LimeGreen" Offset="0.4" />
            <GradientStop Color="LightBlue" Offset="0.6" />
            <GradientStop Color="Blue" Offset="0.8" />
            <GradientStop Color="LightGray" Offset="1" />
        </media:RadialGradientBrush>
    </Rectangle.Fill>
</Rectangle>

La couleur de chaque point entre les extrémités est interpolée de façon radiale sous la forme d’une combinaison de la couleur spécifiée par les deux points de dégradé englobants. L’image suivante met en évidence les points de dégradés de l’exemple précédent.

Capture d’écran d’un dégradé radial.

Points de dégradé

Pinceaux d’image

Un objet ImageBrush peint une zone avec une image qui provient d’une source de fichier image. Vous définissez la propriété ImageSource sur le chemin de l’image à charger. En règle générale, la source d’image provient d’un élément Content qui fait partie des ressources de votre application.

Par défaut, quand vous utilisez un pinceau ImageBrush, l’image associée est étirée de façon à remplir entièrement la zone peinte. Elle peut ainsi apparaître déformée si les proportions de cette zone sont différentes de celles de l’image. Vous pouvez changer ce comportement en modifiant la propriété Stretch. Pour cela, remplacez sa valeur par défaut Fill par la valeur None, Uniform ou UniformToFill.

L’exemple suivant crée un pinceau ImageBrush avec la propriété ImageSource définie sur une image nommée licorice.jpg, que vous devez inclure comme ressource dans l’application. L’objet ImageBrush peint ensuite la zone définie par une forme Ellipse.

<Ellipse Height="200" Width="300">
   <Ellipse.Fill>
     <ImageBrush ImageSource="licorice.jpg" />
   </Ellipse.Fill>
</Ellipse>

Rendu d’ImageBrush.

ImageBrush rendu

ImageBrush et Image référencent un fichier source d’image par un URI (Uniform Resource Identifier), où ce fichier utilise plusieurs formats d’image possibles. Ces fichiers sources d’image sont spécifiés sous forme d’URI. Pour plus d’informations sur la spécification de sources d’images, sur les formats d’images utilisables et sur leur empaquetage dans une application, consultez Image et ImageBrush.

Pinceaux et texte

Vous pouvez également utiliser des pinceaux pour appliquer des caractéristiques de rendu à des éléments de texte. Par exemple, la propriété Foreground de TextBlock prend un pinceau Brush. Vous pouvez appliquer n’importe quel pinceau décrit ici à du texte. Toutefois, soyez vigilant avec les pinceaux appliqués au texte, car tout arrière-plan peut rendre le texte illisible si vous utilisez des pinceaux qui se fondent dans l’arrière-plan. Utilisez le pinceau SolidColorBrush pour pouvoir lire l’élément de texte dans la plupart des cas, sauf si vous voulez que l’élément de texte soit principalement décoratif.

Même quand vous utilisez une couleur unie, veillez à ce que le contraste entre la couleur du texte que vous choisissez et la couleur d’arrière-plan du conteneur de disposition du texte soit suffisant. Le niveau de contraste entre le premier plan du texte et l’arrière-plan du conteneur du texte a de l’importance en termes d’accessibilité.

WebViewBrush

Un objet WebViewBrush est un type particulier de pinceau qui peut accéder au contenu normalement affiché dans un contrôle WebView. Au lieu de restituer le contenu dans la zone de contrôle WebView rectangulaire, l’objet WebViewBrush peint ce contenu sur un autre élément qui a une propriété de type Brush pour une surface de rendu. L’objet WebViewBrush n’est pas approprié pour chaque scénario de pinceau, mais il est utile pour les transitions d’un objet WebView. Pour plus d’informations, consultez WebViewBrush.

XamlCompositionBrushBase

XamlCompositionBrushBase est une classe de base utilisée pour créer des pinceaux personnalisés utilisant CompositionBrush pour peindre des éléments d’interface utilisateur XAML.

Ceci permet une interopérabilité « liste déroulante »entre les couches Windows.UI.Xaml et Windows.UI.Composition, comme décrit dans Vue d’ensemble de la couche visuelle.

Pour créer un pinceau personnalisé, créez une classe qui hérite de XamlCompositionBrushBase et qui implémente les méthodes nécessaires.

Par exemple, ceci peut être utilisé pour appliquer des effets aux éléments d’interface utilisateur XAML à l’aide d’un CompositionEffectBrush, comme un GaussianBlurEffect ou un SceneLightingEffect qui contrôle les propriétés réfléchissantes d’un élément UIElement XAML quand celui-ci est éclairé par une XamlLight.

Pour obtenir des exemples de code, consultez XamlCompositionBrushBase.

Pinceaux en tant que ressources XAML

Vous pouvez déclarer n’importe quel pinceau en tant que ressource XAML à clé dans un dictionnaire de ressources XAML. Ceci permet de répliquer facilement les mêmes valeurs de pinceau pour plusieurs éléments d’une interface utilisateur. Les valeurs de pinceau sont ensuite partagées et appliquées dans tous les cas où vous référencez la ressource de pinceau en tant qu’utilisation de {StaticResource} dans votre XAML. Ceci inclut les cas où un modèle de contrôle XAML référence le pinceau partagé et où le modèle de contrôle est lui-même une ressource XAML à clé.

Pinceaux dans le code

Il est beaucoup plus courant de spécifier des pinceaux en XAML que d’utiliser du code pour les définir. Cela est dû au fait que les pinceaux sont généralement définis en tant que ressources XAML, et que les valeurs des pinceaux sont souvent le résultat d’outils de conception ou bien qu’elles font partie d’une définition d’interface utilisateur XAML. Néanmoins, pour les quelques cas où vous voulez définir un pinceau avec du code, tous les types Brush sont disponibles pour l’instanciation du code.

Pour créer un objet SolidColorBrush dans du code, utilisez le constructeur qui prend un paramètre Color. Passez une valeur qui est une propriété statique de la classe Colors, comme celle-ci :

SolidColorBrush blueBrush = new SolidColorBrush(Windows.UI.Colors.Blue);

Dim blueBrush as SolidColorBrush = New SolidColorBrush(Windows.UI.Colors.Blue)

Windows::UI::Xaml::Media::SolidColorBrush blueBrush{ Windows::UI::Colors::Blue() };

blueBrush = ref new SolidColorBrush(Windows::UI::Colors::Blue);

Pour WebViewBrush et ImageBrush, utilisez le constructeur par défaut, puis appelez d’autres API avant d’essayer d’utiliser ce pinceau pour une propriété d’interface utilisateur.

  • ImageSource nécessite une classe BitmapImage (et non pas un URI) quand vous définissez un ImageBrush en utilisant du code. Si votre source est un flux, utilisez la méthode SetSourceAsync pour initialiser la valeur. Si votre source est un URI incluant du contenu de votre application qui utilise les schémas ms-appx ou ms-resource, utilisez le constructeur BitmapImage qui prend un URI. Vous pouvez également envisager de gérer l’événement ImageOpened s’il y a des problèmes de délai liés à la récupération ou au décodage de la source de l’image, auquel cas il peut être nécessaire d’afficher un contenu alternatif tant que la source de l’image n’est pas disponible.
  • Pour la classe WebViewBrush, vous pouvez avoir besoin d’appeler la méthode Redraw si vous avez récemment réinitialisé la propriété SourceName ou que le contenu de la classe WebView est également changé avec du code.

Pour obtenir des exemples de code, consultez WebViewBrush, ImageBrush et XamlCompositionBrushBase.