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
Remplissage	Définit le pinceau appliqué à l’intérieur d’une forme ou d’un tracé.
Trait	Définit le pinceau appliqué au contour (bordure) d’une forme ou d’un tracé.
Arrière-plan	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.
Premier plan	Configure le pinceau qui est appliqué au premier plan d’un objet. Cette propriété est généralement appliquée au texte qui est affiché dans des contrôles, par exemple le contrôle Button ou TextBlock.
BorderBrush	Configure le pinceau qui est appliqué à la bordure sur certains contrôles.
Opacité	Définit l’opacité de l’objet tout entier.
Visibilité	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’élément 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é Remplissage du rectangle à Aucun pinceau, et la propriété Trait à 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é pinceau visuel 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 pinceau 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 le pinceau Dégradélinéaire et le pinceau Dégradé radial  sous Pinceaux dans le panneau Propriétés 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 éléments possédant une propriété Background. En appliquant un dégradé à une propriété d’apparence, notez que de petites icônes , appelées points, apparaissent sur le curseur de dégradé. 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 définir certaines options lorsque vous utilisez un pinceau de dégradé. Cliquez sur Options de propriétés avancées  sous Pinceaux dans le panneau Propriétés pour définir la propriété SpreadMethod sur l’un des éléments suivants :

• Remplir   Applique les couleurs des points de dégradé les plus éloignés aux bords de l’objet.

• Refléchir   Refléchit le remplissage en dégradé.

• Répéter   Répète le remplissage en dégradé.

Ces options concernent à la fois les dégradés linéaires et radiaux lorsque vous utilisez l’outil Transformation du pinceau pour modifier le pinceau. Pour plus d’informations, voir la section « Outil Transformation du pinceau » qui suit.

Outil Transformation du pinceau

Pour transformer le remplissage, le trait, le masque d’opacité ou tout autre pinceau appliqué à un objet, sélectionnez la propriété brush dans le panneau Propriétés, puis sélectionnez Transformation du pinceau  dans le panneau Outils. Une flèche de transformation de pinceau apparaît sur la planche graphique, que vous pouvez modifier avec le pointeur de la souris. Si vous utilisez un pinceau de dégradé, les points de terminaison de la flèche de transformation correspondent aux points de dégradé aux deux extrémités de la barre de couleurs. Vous pouvez modifier le comportement de l’outil Transformation du pinceau de l’une des manières suivantes :

• Maintenez la touche Maj enfoncée lorsque vous faites glisser un point de terminaison pour limiter le mouvement le long de la ligne droite entre les points de terminaison.

• 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 terminaison pour aligner tous les 15 degrés.

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

Les images suivantes montrent l’apparence d’un objet rectangle après l’application de différentes transformations au pinceau de dégradé de la propriété Fill.

Transformations appliquées au pinceau de dégradé linéaire d’un rectangle

Transformations appliquées au pinceau de dégradé radial d’un rectangle

Vous pouvez facultativement définir la méthode d'étalement d’un pinceau de dégradé lorsque vous cliquez sur Options de propriétés avancées  sous Pinceaux dans le panneau Propriétés, puis définissez la propriété SpreadMethod. Dans l’image précédente, l’option Remplir est sélectionnée. Si vous avez sélectionné l’option Réfléchir ou Répéter, puis que vous avez rendu la flèche de transformation plus courte que l’objet, vous voyez un effet d’ondulation.

Vous pouvez transformer des types de pinceaux autres que les pinceaux de dégradé. Pour plus d’informations sur les transformations de pinceau, voir Transformer un pinceau de dégradé ou de mosaïque.

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ésactivez la case à cocher pour la propriété ClipToBounds (détourage jusqu’aux limites) sous Apparence dans le panneau Propriétés.

• Utilisez les propriétés de la catégorie LayoutTransform au lieu de celles de la catégories 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 la jointure d’angle 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 d’angle en utilisant la propriété StrokeMiterLimit sous Apparence dans le panneau Propriétés. L’image suivante contient trois angles avec une valeur StrokeThickness de 40, et 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.

  

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
Opacité   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.
Transparence   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 même 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.
Visibilité   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 Masqué.

Voir aussi

Concepts

Application d'effets