Définition de couleurs, de pinceaux et de masques

Le changement de l’apparence visuelle d’un objet est une tâche essentielle de Microsoft Expression Blend. En utilisant les propriétés sous Apparence et Pinceaux dans le panneau Propriétés, vous pouvez modifier les couleurs de trait et de remplissage, l’opacité et la visibilité d’un objet sélectionné. Selon le type d’objet sélectionné dans votre projet Expression Blend, les propriétés des catégories Apparence et Pinceaux ajustent le contenu de l’objet de manière dynamique pour refléter les attributs visuels appropriés.

Propriétés d’apparence courantes

L’essentiel de la modification de l’apparence d’un objet passe par l’application de pinceaux à des propriétés spécifiques. Le tableau suivant décrit ces propriétés.

Propriété	Description
Fill	Définit le pinceau appliqué à l’intérieur d’une forme ou d’un tracé.
Stroke	Définit le pinceau appliqué au contour (bordure) d’une forme ou d’un tracé.
Background	Configure le pinceau qui est appliqué à l’arrière-plan d’un objet. Cette propriété est généralement appliquée à l’arrière-plan de contrôles qui affichent du texte, par exemple le contrôle Button ou TextBlock .
Foreground	Configure le pinceau qui est appliqué au premier plan d’un objet. Cette propriété est généralement appliquée au texte affiché dans les contrôles, tels que Button ou TextBlock .
BorderBrush	Configure le pinceau qui est appliqué à la bordure sur certains contrôles.
Opacity	Définit l’opacité de l’objet tout entier.
Visibility	Détermine si un objet est visible ou masqué au moment de l’exécution. Les objets enfants peuvent également être concernés par la visibilité de l’objet parent.
OpacityMask	Définit un pinceau dont la couleur est ignorée et dont l’opacité est transférée à l’objet masqué. Lorsque le masque d’opacité est opaque, l’objet masqué est opaque ; s’il est transparent, l’objet masqué est transparent.

Pinceaux

Les pinceaux servent à définir l’aspect visuel d’un objet sur la planche graphique. Par exemple, vous pouvez utiliser un pinceau bleu uni pour le remplissage d’un rectangle (comme dans la première image ci-dessous). Les pinceaux présentent différentes formes, de la couleur unie simple au pinceau de dégradé, en passant par des pinceaux de mosaïque plus complexes. Le tableau suivant décrit les pinceaux disponibles dans Expression Blend. En outre, vous pouvez utiliser l’onglet Aucun pinceau  pour supprimer toutes les couleurs de la propriété sélectionnée. Par exemple, pour créer les contours d’un rectangle, vous pouvez définir la propriété Fill d’un rectangle sur Aucun pinceau, et la propriété Stroke sur Pinceau de couleur unie.

Pinceau	Apparence			Description
Pinceau de couleur unie				Composé d’une seule couleur.
Pinceau de dégradé linéaire				Composé d’un dégradé linéaire de couleur.
Pinceau de dégradé radial				Composé d’un dégradé radial de couleur.
Pinceau d’image				Créé à partir d’une image. De gauche à droite comme illustré ici : pinceau d’image de départ, pinceau d’image en mosaïque et pinceau d’image retourné.
Pinceau de dessin				Créé à partir d’un dessin vectoriel. De gauche à droite comme illustré ici : pinceau de dessin de départ, pinceau de dessin en mosaïque et pinceau de dessin retourné.
Pinceau visuel				Créé à partir d’un contrôle, par exemple un bouton. De gauche à droite comme illustré ici : le bouton d’origine et le pinceau avec le Mode Mosaïque défini à Mosaïque. Notez que les pinceaux visuels sont susceptibles de détériorer les performances de l’application en cours d’exécution, en raison de la complexité du contrôle utilisé pour les créer.

Ressources pinceau

Une fois que vous avez créé un pinceau sur un objet, vous pouvez convertir le pinceau en une ressource que vous pouvez ensuite appliquer à d’autres objets.

Les ressources pinceau ne sont pas limitées aux propriétés de pinceau ou couleur uniques. Vous pouvez créer une ressource pinceau en utilisant plusieurs objets sur la planche graphique. Vous pouvez même créer un pinceau appelé VisualBrush qui met à jour son apparence au cours de l’exécution si les objets à partir desquels il a été créé sont modifiés au cours de l’exécution.

Vous pouvez créer des dictionnaires de ressources pour vos pinceaux, de sorte que vous pouvez les réutiliser tout au long de votre projet, et même dans d’autres projets.

Pour plus d’informations, voir Créer une ressource pinceau ou de couleur et Convertir des objets en ressource DrawingBrush réutilisable.

Pour informations sur les ressources, voir Création de ressources réutilisables.

Couleur et espaces de couleurs

Expression Blend inclut un éditeur de couleurs sous Pinceaux dans le panneau Propriétés. L’éditeur de couleurs apparaît également si vous modifiez une ressource pinceau dans le panneau Ressources. L’éditeur de couleurs possède les quatre espaces de couleurs suivants, ainsi qu’un mode hexadécimal (#AARRVVBB) :

• RVB    Rouge (0-255), Vert (0-255), Bleu (0-255)

• TSL    Teinte (roue chromatique 360 degrés), Saturation (0 à 100 pour-cent), Luminosité (0 à 100 pour-cent).

• TSV    Teinte (roue chromatique 360 degrés), Saturation (0 à 100 pour-cent), Valeur (0 à 100 pour-cent).

• CMJN    Cyan (0 à 100 pour cent), Magenta (0 à 100 pour cent), Jaune (0 à 100 pour cent), Noir (0 à 100 pour cent).

Pour passer d’un espace de couleurs à un autre, cliquez sur l’une des lettres soulignées dans l’espace de couleurs actif pour afficher un menu contextuel présentant les autres espaces de couleur.

Outils Pipette et Pot de peinture

Expression Blend contient deux outils spécialement conçus pour copier et appliquer des attributs d’un objet à un autre. Les propriétés suivantes sont copiées ou appliquées pendant les actions de Pipette et Pot de peinture :

• Pinceaux    Premier plan, Arrière-plan, Pinceau de bord, Remplissage, Trait et Masque d’opacité

• Apparence    Opacité, Épaisseur de trait, Limite d’angle du trait, Extrémité de début de trait, Extrémité de fin de trait, Jointure de trait et Extrémité de pointillé du trait

• Texte    Famille de polices, Taille de police, Épaisseur de police, Style de police, Ornements de texte, Hauteur de ligne, Retrait du texte et Alignement du texte

	Outil Pipette	Copie l’apparence d’un autre objet vers les objets actuellement sélectionnés.
	Outil Pot de peinture	Copie l’apparence des objets actuellement sélectionnés vers un autre objet.

Pour plus d’informations sur les outils Pipette et Pot de peinture, voir Copier ou appliquer des attributs à un objet.

Une Pipette de couleur  apparaît dans l’angle inférieur droit de l’éditeur de couleurs lorsque vous modifiez un Pinceau de couleur unie  ou un point de dégradé sur un Pinceau de dégradé . Avec cette pipette de couleur sélectionnée, vous pouvez sélectionner un échantillon de couleur n’importe où sur votre bureau et l’appliquer au pinceau sélectionné. Vous pouvez appuyer sur la touche Échap à tout moment pour annuler la pipette.

Dégradés

Les dégradés permettent d’appliquer un mélange progressif de couleurs à un objet pour créer une transition de couleur uniforme et apporter davantage de profondeur à cet objet. Peut-être voulez-vous utiliser cet objet comme arrière-plan, où le côté gauche de l’objet contient une couleur unie qui se décolore progressivement jusqu’au blanc à droite de l’objet. Vous pouvez ainsi créer deux zones perceptibles d’un objet qui serait autrement plat.

Cliquez sur Pinceau de dégradé  sous Pinceaux dans le panneau Propriétés pour créer un dégradé. Cliquez sur le pinceau de dégradé linéaire et le pinceau de dégradé radial  sous l’éditeur de couleurs pour passer d’un type de pinceau de dégradé à un autre. Vous pouvez utiliser les deux types de pinceau de dégradé pour créer des remplissages en dégradé, des traits en dégradé, du texte dont la propriété Foreground possède un dégradé ou des arrière-plans en dégradé pour les objets possédant une propriété Background.

Lorsqu’un pinceau de dégradé est sélectionné, la pipette de couleur de l’éditeur de couleurs devient une pipette de dégradé . Lorsque vous placez le pointeur sur une couleur dans Expression Blend ou sur le bureau lorsque la pipette de dégradé est sélectionnée, la couleur apparaît sous la forme d’aperçu dans le point de dégradé de couleur sélectionné. Lorsque vous cliquez sur une couleur à l’aide de la pipette de dégradé, la couleur est appliquée au point de dégradé de couleur sélectionné. De plus, vous pouvez faire glisser la pipette de dégradé sur un dégradé existant, soit dans Expression Blend, soit sur le bureau, pour appliquer le dégradé à l’objet existant.

Le déplacement de la pipette de dégradé sur un dégradé existant duplique le dégradé dans Expression Blend

Lorsque vous appliquez un dégradé à un objet, les icônes de point de dégradé apparaissent. Vous pouvez changer la couleur de chaque point de dégradé et ajouter autant de points que vous le souhaitez au curseur de dégradé en cliquant simplement dessus. Inversement, vous pouvez facilement supprimer des points dont vous n’avez plus besoin en faisant glisser le point de dégradé pour l’exclure par le bas du curseur de dégradé (un glissement par les côtés ou le haut du curseur ne supprime pas les points). Vous pouvez également modifier la valeur de décalage d’un point de dégradé sélectionné en faisant glisser les points le long de la ligne de dégradé ou en modifiant la valeur dans le champ Décalage de point de dégradé sélectionné.

Pour inverser un dégradé, cliquez sur Inverser les points de dégradé . Vous pouvez accéder au point de dégradé précédent et suivant à l’aide des flèches Sélectionner le point de dégradé précédent et Sélectionner le point de dégradé suivant.

Pour appliquer un dégradé à plusieurs objets, sélectionnez tous les objets auxquels vous souhaitez appliquer le dégradé, puis appliquez le dégradé.

Cliquez sur Afficher les propriétés avancées  pour afficher des propriétés supplémentaires qui peuvent être modifiées directement dans le panneau Propriétés.

Pour les propriétés de pinceau de dégradé linéaire, vous pouvez modifier les propriétés suivantes dans le panneau Propriétés :

• StartPoint   Spécifie les coordonnées du point de départ du dégradé linéaire.

• EndPoint    Spécifie les coordonnées du point d’arrivée du dégradé linéaire.

• MappingMode   Spécifie si le pinceau de dégradé est positionné de manière absolue ou relative par rapport au rectangle englobant.

• SpreadMethod   Spécifie comment dessiner un dégradé qui commence ou se termine à l’intérieur du rectangle englobant. Pad Applique les couleurs des points de dégradé les plus éloignés aux bords de l’objet. Reflect Réfléchit le remplissage en dégradé. Repeat Répète le remplissage en dégradé.

• Opacity    Spécifie l’opacité du pinceau de dégradé.

Pour les propriétés de pinceau de dégradé radial, vous pouvez modifier les propriétés suivantes dans le panneau Propriétés :

• GradientOrigin   Spécifie les coordonnées de début d’un dégradé.

• Center   Spécifie le dégradé radial le plus éloigné.

• RadiusX   Spécifie le rayon horizontal du cercle le plus à l’extérieur du dégradé radial.

• RadiusY   Spécifie le rayon vertical du cercle le plus à l’extérieur du dégradé radial.

• MappingMode   Spécifie si le pinceau de dégradé est positionné de manière absolue ou relative par rapport au rectangle englobant.

• SpreadMethod   Spécifie comment dessiner un dégradé qui commence ou se termine à l’intérieur du rectangle englobant. Pad Applique les couleurs des points de dégradé les plus éloignés aux bords de l’objet. Reflect Réfléchit le remplissage en dégradé. Repeat Répète le remplissage en dégradé.

• Opacity    Spécifie l’opacité du pinceau de dégradé.

Pour les deux types de pinceaux de dégradé, vous pouvez également modifier la propriété RelativeTransform dans le panneau Propriétés en cliquant sur les onglets suivants dans la zone RelativeTransform, puis en modifiant les valeurs associées :

• Déplacer

• Faire pivoter

• Échelle

• Incliner

• Retourner

Vous pouvez également modifier les pinceaux de dégradé radial et linéaire sur la planche graphique en utilisant l’outil Dégradé ou Transformation du pinceau. Pour plus d’informations, voir les sections « Outil dégradé » et « Outil Transformation du pinceau » ci-dessous.

Outil Dégradé

Pour modifier le remplissage, le trait, le masque d’opacité d’un pinceau de dégradé appliqué à un objet directement sur la planche graphique, sélectionnez la propriété brush dans le panneau Propriétés, puis sélectionnez l’outil Dégradé  dans le panneau Outils.

Conseil :
Une fois l’objet sélectionné sur la planche graphique, appuyez sur G pour sélectionner l’outil Dégradé.

Une flèche apparaît sur la planche graphique afin que vous puissiez modifier le dégradé. Le point de départ et le point d’arrivée de la flèche correspondent aux points de dégradé aux deux extrémités de la barre de couleurs. Les points de dégradé sont indiqués par des cercles avec des bordures bleues et des remplissages intérieurs qui sont identiques à ceux du dégradé.

Flèche de dégradé linéaire

Flèche de dégradé radial

Le fait de cliquer sur un point de dégradé le sélectionne ; la sélection est indiquée par une bordure bleue en gras. Le fait de double-cliquer sur le point de dégradé affiche le sélecteur de couleurs à partir duquel vous pouvez modifier la couleur du point de dégradé sélectionné.

Vous pouvez ajouter un point de dégradé en cliquant sur à tout endroit sur la flèche. Vous pouvez supprimer un point de dégradé en cliquant sur le cercle qui indique un point de dégradé et en le faisant glisser en dehors de la flèche.

Vous pouvez également modifier les propriétés de dégradé de l’une des manières suivantes :

• Maintenez la touche MAJ enfoncée lorsque vous faites glisser le point de départ ou d’arrivée afin de limiter le mouvement le long de la courbe droite entre le point de départ et le point d’arrivée.

• Maintenez la touche Maj enfoncée lorsque vous déplacez la flèche pour limiter le déplacement vers le plan X ou Y.

• Maintenez la touche MAJ enfoncée lorsque vous faites pivoter un point de départ ou d’arrivée pour l’aligner tous les 15 degrés.

• Maintenez la touche ALT enfoncée lorsque vous faites glisser un point de départ ou d’arrivée pour déplacer les deux points d’arrivée en même temps, en conservant la position du point central.

Outil Transformation du pinceau

L’outil Transformation du pinceau modifie la propriété RelativeTransform d’une ressource pinceau, y compris la propriété RelativeTransform des dégradés linéaires et radiaux. L’outil Transformation du pinceau modifie le pinceau qui est sélectionné dans le panneau Pinceaux et appliqué à l’objet sélectionné sur la planche graphique.

Pour modifier la transformation d’un pinceau appliqué à un objet directement sur la planche graphique, sélectionnez la propriété brush dans le panneau Propriétés, puis sélectionnez l’outil Transformation du pinceau  dans le panneau Outils.

Conseil :
Une fois l’objet sélectionné sur la planche graphique, appuyez sur B pour sélectionner l’outil Transformation du pinceau.

Un ornement (une bordure bleue) apparaît autour de l’objet. Une fois l’objet sélectionné avec l’outil Transformation du pinceau, vous pouvez maintenant modifier l’objet sélectionné de l’une des manières suivantes :

• Pour déplacer un pinceau, faites-le glisser n’importe où à l’intérieur de l’objet. Cela correspond à l’onglet Transformer dans la zone RelativeTransform du panneau Propriétés.

• Pour faire pivoter un pinceau, placez votre pointeur à l’extérieur de n’importe quel coin du contour englobant de l’objet, puis faites-le glisser lorsqu’il se transforme en une poignée de rotation . Cela correspond à l’onglet Pivoter dans la zone RelativeTransform du panneau Propriétés.

• Pour remettre à l’échelle un pinceau de mosaïque ou de dégradé radial, placez votre pointeur sur n’importe quelle poignée latérale ou d’angle de l’objet, puis faites-le glisser. Cela correspond à l’onglet Redimensionner dans la zone RelativeTransform du panneau Propriétés.

• Pour incliner un pinceau, placez votre pointeur à l’extérieur d’une poignée latérale, puis faites-le glisser lorsqu’il se transforme en poignée d’inclinaison . Cela correspond à l’onglet Incliner dans la zone RelativeTransform du panneau Propriétés.

Vous pouvez également retourner une transformation. Dans le panneau Propriétés, dans la catégorie Pinceaux, cliquez sur Afficher les propriétés avancées . Dans la zone RelativeTransform, cliquez sur l’onglet Retourner, puis cliquez sur Retourner l’axe X ou Retourner l’axe Y.

Détourage

Parfois, lorsque vous transformez un pinceau, des parties de l’objet seront détourées (c’est-à-dire que des parties disparaîtront à l’extérieur du rectangle englobant). Vous pouvez résoudre les problèmes de détourage comme suit :

• Décochez la case pour la propriété ClipToBounds sous Apparence dans le panneau Propriétés.

• Utilisez les propriétés de la catégorie LayoutTransform au lieu de RenderTransform sous Transformer dans le panneau Propriétés. Ceci est particulièrement utile lors de la transformation d’un pinceau visuel.

Traits

Les traits sont les bordures des objets. Vous pouvez changer le pinceau appliqué (uni, dégradé ou mosaïque), l’opacité, la largeur et la limite d’angle du trait sur un objet, ainsi que le style des jointures d’angle et des extrémités. Le trait sur un objet est toujours appliqué par-dessus un remplissage, même si aucun remplissage n’est appliqué à cet objet. Pour apporter des modifications au trait d’un objet, l’option Trait doit être sélectionnée dans la liste sous Pinceaux dans le panneau Propriétés.

• **Épaisseur du trait  **   L’épaisseur d’un trait sur un objet est mesurée en pixels (ou en unités indépendantes du périphérique qui sont approximativement 1/96 pouce) et peut prendre une valeur comprise entre 0 et la moitié de la largeur ou de la hauteur de la forme. En général, une fois que l’épaisseur du trait a atteint la moitié de la largeur et de la hauteur de la forme, le trait couvre la totalité du remplissage. Vous pouvez définir la valeur de l’épaisseur du trait en utilisant la propriété StrokeThickness sous Apparence dans le panneau Propriétés.

• **Joints  ** Pour les objets qui ont des angles aigus, tels que les rectangles, vous pouvez modifier la façon dont le trait apparaît à chaque point d’angle en appliquant l’un des trois styles de joint : Joint d’angle , Joint arrondi  et Joint biseauté . Vous pouvez définir le style de joint en utilisant la propriété StrokeLineJoin sous Apparence dans le panneau Propriétés.

  

• Limite d’angle    La limite d’angle contrôle la longueur que le point d’angle d’un joint d’angle peut atteindre avant d’être automatiquement transformé en joint biseauté. Vous pouvez définir la limite de l’angle en utilisant la propriété StrokeMiterLimit sous Apparence dans le panneau Propriétés. L’image suivante affiche trois angles avec une valeur StrokeThickness de 40, et une valeur StrokeMiterLimit de 1 , 2,2 , et 4 . La taille de l’angle et l’épaisseur du trait déterminent l’effet visuel de la limite d’angle.

  

• **Extrémités  ** Pour les tracés qui contiennent des extrémités non connectées, telles que des lignes, vous pouvez modifier la façon dont le trait s’affiche à chaque extrémité en appliquant l’un des quatre styles d’extrémité : Extrémité plate , Extrémité arrondie , Extrémité carrée  et Extrémité triangulaire . Vous pouvez définir le style de l’extrémité en utilisant la propriété StrokeEndLineCap ou StrokeStartLineCap sous Apparence dans le panneau Propriétés.

  

• StrokeDashArray     StrokeDashArray est un trait représentant un motif de tirets et d’espacements. StrokeDashCap et StrokeDashOffset sont des propriétés qui s’appliquent spécifiquement à StrokeDashArray .

  L’image suivante représente un rectangle unique disposant d’une valeur StrokeDashArray de 5 4 (la première valeur spécifie la longueur du tiret et la deuxième valeur spécifie la longueur d’espacement), d’une valeur StrokeDashCap définie sur Round et d’un StrokeDashOffset (distance à laquelle commence un tiret dans un motif de tirets) de 2 .

  

Opacité et visibilité

Lorsque vous diminuez l’opacité d’un objet, vous augmentez sa transparence et vous pouvez distinguer d’autres objets derrière lui. L’opacité est gérée par un canal alpha qui stocke toutes les informations de transparence d’un objet, d’un dégradé ou d’un masque d’opacité. Le tableau suivant décrit trois méthodes que vous pouvez sélectionner pour modifier l’opacité de l’objet.

Méthode	Résultats
Opacity    Modifie la transparence d’un objet tout entier, y compris tous ses attributs visuels. L’image à droite illustre une valeur d’opacité définie à 60 pour cent.
Transparency    Définit la valeur alpha (A) de l’attribut d’un pinceau individuel, par exemple le remplissage ou le trait, légèrement transparente, sans avoir à modifier tous les attributs d’un seul objet. L’image à droite montre que seul le remplissage de l’ellipse est plus transparent, car la valeur alpha du remplissage est définie à 50 pour cent. Le trait de l’ellipse reste à 100 pour cent.
Visibility    Permet de masquer ou d’afficher un objet à différents instants. Cette propriété est particulièrement efficace en animation pour éviter d’éliminer complètement un objet de la planche graphique. Dans l’image à droite, l’objet de gauche avec le remplissage bleu et le trait noir épais, qui figure dans les deux images précédentes de ce tableau, est désormais défini sur Hidden .

Voir aussi

Concepts

Application d'effets

Copyright © 2011 Microsoft Corporation. Tous droits réservés.