Dessin de formes et de tracés

Microsoft Expression Blend propose des fonctions de dessin vectoriel standard permettant de dessiner des formes, des tracés et des masques comme avec n’importe quel programme de graphiques vectoriels. Pour des dessins et des conceptions graphiques plus avancés, pensez à utiliser un autre programme graphique vectoriel tel que Microsoft Expression Design. Expression Design permet même d’exporter les dessins au format XAML en vue de leur utilisation dans Expression Blend.

Pour plus d’informations, voir Importer du code XAML exporté depuis Expression Design.

Définition des graphiques vectoriels

Les graphiques vectoriels sont définis géométriquement par des points, des lignes, des courbes et des surfaces et non par l’utilisation de pixels comme dans un bitmap. Les moniteurs des ordinateurs sont aujourd’hui équipés d’écrans haute résolution, d’où la nécessité de s’éloigner des bitmaps qui utilisent une définition de pixels élevéé lorsqu’ils sont affichés en hautes résolutions. Les bitmaps redimensionnés sont parfois maladroits et se traduisent généralement par des graphiques de mauvaise qualité. Les contours des graphiques vectoriels restent lisses même en haute résolution, et demeurent nets lorsqu’ils sont agrandis. Pour cette raison, les graphiques vectoriels se prêtent mieux à la personnalisation de contenu car il n’est pas nécessaire de créer plusieurs images à différentes tailles (par exemple, les fichiers d’icônes qui apparaissent dans l’interface utilisateur à diverses tailles). Autres avantages des graphiques vectoriels :

• Mise à l’échelle réelle du contenu   Les graphiques vectoriels intégrés à une disposition souple peuvent être redimensionnés de façon élégante en fonction du contenu. Par exemple, lorsque vous ajoutez du texte à un bouton, le bouton est redimensionné en conséquence tout en restant fidèle au graphique.

• Indépendance de la résolution   La résolution des écrans augmente progressivement et ce n’est qu’un début. Sans la possibilité de mettre à l’échelle l’interface utilisateur d’une application, celle-ci diminue en taille à mesure qu’augmente la résolution; elle peut même devenir inutilisable lorsque le contenu est si petit à l’écran qu’il en est illisible. Si vous appliquez une transformation par mise à l’échelle ou rotation de ces API, seuls les dessins sont affectés. La transformation n’a pas d’incidence sur les dimensions et les positions des contrôles dans la fenêtre. Vous pouvez redimensionner des dessins mais il est plus compliqué de gérer l’espace occupé par les contrôles dans une fenêtre. Comme Windows Presentation Foundation (WPF) organise tous les contrôles de la fenêtre en tant que dessin unique, au lieu d’isoler chaque contrôle dans sa propre zone, il est plus facile d’appliquer à l’interface utilisateur des transformations par mise à l’échelle ou par rotation comme un tout. Ainsi, comme vous pouvez faire évoluer horizontalement ou verticalement n’importe quelle interface utilisateur WPF, les applications WPF sont très clairement indépendantes de la résolution. Les images restent claires et nettes, au lieu de devenir floues comme pourrait le laisser supposer le redimensionnement simple des bitmaps.

Remarque :

Lors de la définition des propriétés liées à la taille dans les applications WPF (telles que celles créées avec Expression Blend), les pixels se réfèrent aux pixels indépendants du périphérique ou aux unités indépendantes du périphérique, qui sont équivalentes à la taille d’un pixel sur un écran défini avec une résolution de 96 PPP. Chaque unité correspond approximativement à 1/96 de pouce, indépendamment de la taille de l’écran ou de sa résolution.

Dans Expression Blend, un objet vectoriel peut être aussi simple qu’une ligne ou qu’une forme ou aussi complexe qu’un tracé ou un contrôle. Vous pouvez modifier les objets de très nombreuses façons en utilisant les poignées de redimensionnement, le déplacement, la rotation, le retournement ou l’inclinaison, ou bien en utilisant le panneau Propriétés qui permet d’indiquer des valeurs précises de taille, de position et de rotation. En principe, chaque objet que vous dessinez sur la planche graphique est au format vectoriel, sauf pour les éléments que vous avez ajoutés à votre projet et qui n’avaient pas ce format au départ, comme des images et des textures 3D. Certains objets vectoriels dans Expression Blend comprennent :

• des objets de dessin tels que des ellipses et des rectangles ;

• des objets de tracé tels que des lignes et des courbes ;

• un texte ;

• des objets 3D ;

• des contrôles.

Outils de dessin

Le panneau Outils contient des outils vectoriels courants pour créer des éléments de forme et de tracé et manipuler des objets.

Pour des exemples d’utilisation de ces outils, voir les rubriques suivantes :

• Dessiner une forme ou un chemin dans votre projet

• Tracer une ligne droite

• Tracer une courbe

• Dessiner un tracé de forme libre

• Modifier la forme d’une courbe

• Redéfinir les poignées de contrôle pour un point d’un tracé.

Outil	Nom	Utilisation
	Rectangle	Tracer des rectangles et des carrés, que vous pouvez également modifier pour obtenir des coins arrondis.
	Ellipse	Tracer des ellipses et des cercles.
	Ligne	Tracer une ligne droite entre deux points.
	Plume	Dessiner et modifier des tracés lorsque vous définissez chaque nœud. L’outil Plume vous permet d’ajouter, de supprimer et de modifier des nœuds dans le tracé.
	Plume	Dessiner des tracés à main levée.
	Sélection	Sélectionner des formes, des tracés et des objets sur la planche graphique que vous souhaitez modifier. Pour plus d’informations sur l’utilisation de l’outil Sélection, voir Sélectionner des objets ou annuler leur sélection.
	Sélection directe	Sélectionner des nœuds individuels d’un tracé après leur dessin. L’outil Sélection directe permet également de sélectionner des objets enfants imbriqués dans un objet parent sur la planche graphique, tel qu’un panneau de disposition. Pour plus d’informations sur l’utilisation de l’outil Sélection directe, voir Sélectionner des objets ou annuler leur sélection.

Formes et tracés

Les formes, telles que des rectangles et des ellipses, sont des objets vectoriels. Vous devez dessiner des formes à l’aide de l’outil Rectangle ou à l’aide de l’outil Ellipse.

Les tracés, qui sont également des objets vectoriels, sont probablement les objets vectoriels les plus souples dans Expression Blend. Les tracés sont une série de lignes et de courbes connectées. Après avoir dessiné des tracés sur la planche graphique, vous pouvez en changer la forme, les combiner, voire les modifier pour créer n’importe quelle forme vectorielle. Vous pouvez dessiner des polygones, formes fermées constituées de lignes droites et connectées, outre des polylignes, tracés non fermés constitués de lignes droites et connectées. Vous devez dessiner des tracés à l’aide des outils Plume, Crayon, et Ligne. Vous pouvez ensuite utiliser les outils Sélection et Sélection directe pour les modifier.

Pour plus d’informations sur la modification des tracés, voir les rubriques suivantes :

• Supprimer une partie d’un tracé

• Ajouter ou supprimer un point dans un tracé

• Modifier la forme d’une courbe

• Redéfinir les poignées de contrôle pour un point d’un tracé

• Touches modificatrices de l'outil Sélection directe

• Touches de modification de l'outil Plume

Conversion de formes en tracés

Les formes d’objets ne peuvent pas être modifiées de la même manière que les objets de tracé sauf si vous convertissez l’objet de forme en objet de tracé avec la commande Convertir en tracé (dans le menu Objet, choisissez l’option Tracé, puis sélectionnez Convertir en tracé).

Pour obtenir un exemple, voir Convertir une forme en tracé.

Remarque :
Vous ne pourrez pas modifier les propriétés spécifiques d’une forme (telles que le rayon de l’angle d’un rectangle) après la conversion d’une forme en un tracé. En outre, si un style a été appliqué à la forme avant la conversion, les propriétés du tracé converti reprennent les valeurs par défaut d’un tracé (pas de pinceau de remplissage et un trait noir).

Modification du rayon de l’angle

Vous pouvez modifier le rayon de l’angle d’un rectangle en sélectionnant le rectangle et en faisant glisser les poignées correspondantes dans le coin supérieur gauche du rectangle. La poignée de rayon d’angle apparaît lorsque le pointeur passe au-dessus de l’une des extrémités des lignes pointillées qui sortent du coin supérieur gauche du rectangle.

Si vous maintenez la touche Maj enfoncée tout en faisant glisser l’une des poignées de rayon d’angle, vous pouvez modifier les rayons X et Y individuellement.

Pour obtenir un exemple, voir Arrondir les angles d’un rectangle.

Combinaison de tracés

La combinaison de tracés (ou de formes) peut donner les résultats suivants :

	Deux formes avant la combinaison		Définir une intersection
	Unir		Exclure le chevauchement
	Diviser		Soustraire

Vous pouvez combiner plusieurs objets (tracés ou formes) en un objet de tracé. L’objet de tracé résultant remplace le dernier objet qui a été sélectionné avant la combinaison, adoptant les propriétés de cet objet. Souvent, le résultat est un tracé composite.

Pour obtenir un exemple, voir Combiner des formes ou des tracés.

Pour plus d’informations sur la modification des tracés, voir Touches modificatrices de l'outil Sélection directe et Touches de modification de l'outil Plume.

Remarque :
Vous ne pourrez pas modifier les propriétés spécifiques d’une forme (telles que le rayon de l’angle d’un rectangle) après une combinaison de cette forme avec un autre objet. En outre, si un style a été appliqué au dernier objet sélectionné avant la conversion, les propriétés du tracé combiné reprennent les valeurs par défaut d’un tracé (pas de pinceau de remplissage et un trait noir).

Tracés composites

Lorsque vous créez un tracé composite, toutes les parties situées à l’intersection des tracés sont soustraites du résultat ; par ailleurs, le tracé résultant prend les propriétés visuelles du tracé situé tout en bas.

Deux tracés convertis en un tracé composite

Vous devez convertir les formes en tracés avant de les inclure dans un tracé composite (sélectionnez Convertir en tracé sous Tracé dans le menu Objet). Vous pouvez constituer un tracé composite à partir de plusieurs tracés. Le tracé résultant remplace le tracé le plus bas (dans l’ordre de plan) qui a été sélectionné avant la composition, adoptant les propriétés de ce tracé. Vous pouvez dissocier un tracé composite à tout moment après sa création, mais les propriétés d’origine ne seront pas restaurées.

Pour obtenir un exemple, voir Créer ou annuler un tracé composite.

Tracés de détourage

Un tracé de détourage est un tracé ou une forme appliqué à un autre objet et masquant les parties de l’objet masqué qui sont hors du tracé de détourage.

Objet Image auquel un tracé de détourage est appliqué

Dans Expression Blend, vous pouvez modifier les tracés de détourage sur la planche graphique après les avoir créés et vous pouvez libérer un tracé de détourage sans perdre l’objet de tracé d’origine. Pour obtenir un exemple, voir Appliquer, modifier ou supprimer un tracé de détourage.

Vous pouvez également animer les différents sommets des tracés de détourage (par exemple, pour exposer progressivement l’objet masqué). Pour obtenir un exemple, voir Animer les points sur un tracé ou un tracé de détourage.

Masques d’opacité

Un masque d’opacité peut être un tracé ou une forme appliqué(e) à un autre objet. Les parties transparentes du tracé représentent des zones où l’objet masqué est estompé, alors que les parties opaques du masque indiquent l’emplacement où l’objet masqué est autorisé à transparaître. Tout objet peut avoir un masque d’opacité défini pour lui seul dans la section Apparence du panneau Propriétés.

Un masque d’opacité peut également être un simple pinceau dégradé qui affiche ou masque des parties d’un objet en fonction de la transparence. Dans l’exemple suivant, aucun masque d’opacité n’est appliqué sur l’image à gauche, et l’image à droite pourrait être produite de l’une des deux manières suivantes :

• La propriété OpacityMask de l’objet Image peut être réglée à un pinceau de dégradé radial avec l’alpha du point de dégradé droit réglé à une valeur de 0.

• Un objet Rectangle pourrait être créé devant l’objet Image, et la propriété OpacityMask du Rectangle pourrait être réglée à un pinceau de dégradé radial avec l’alpha du point de dégradé gauche réglé à une valeur de 0.

Image sans masque (à gauche) comparée à une image à laquelle un masque d’opacité est appliqué (à droite)

Pour obtenir un exemple, voir Créer un masque d’opacité.