• Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 29/04/2014

Dessiner avec le XAML

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

En plus des contrôles, le XAML possède les formes (en anglais Shape). Elles permettent de dessiner différentes formes sur nos pages. Voyons à présent comment cela fonctionne.

Dessin 2D

Il existe plusieurs types de formes. Elles sont représentées par des classes qui dérivent toutes d’une classe abstraite de base : Shape. Shape est un élément affichable sur une page dans la mesure où elle dérive, comme les contrôles, de FrameworkElement et de UIElement. Nous avons à notre disposition :

Si vous vous rappelez, nous avons utilisé la classe Rectangle dans un précédent chapitre pour illustrer les marges.
Dessinons par exemple un carré et un cercle. Pour cela, je peux utiliser les classes Rectangle et Ellipse :

<StackPanel>
    <Rectangle Width="100" Height="100" Fill="Aqua" />
    <Ellipse Height="100" Width="100" Fill="Azure" />
</StackPanel>

Ce qui nous donne la figure suivante.

Affichage d'un rectangle et d'une ellipse grâce à leurs contrôles respectifs
Affichage d'un rectangle et d'une ellipse grâce à leurs contrôles respectifs

Remarquons que la propriété Fill permet de colorer les formes. Nous allons y revenir. Mais le plus simple est encore d’utiliser Blend pour ce genre de choses.
Vous avez accès aux formes soit dans l’onglet des composants, soit en cliquant sur le rectangle (voir la figure suivante).

Accès aux formes depuis Blend
Accès aux formes depuis Blend

Blend est votre meilleur allié pour dessiner sur vos pages. N’oubliez pas qu’il est capable d’exploiter le XAML que vous avez saisi à la main dans Visual Studio, par exemple :

<Canvas>
    <Line X1="10" Y1="100" X2="150" Y2="100" Stroke="Blue" StrokeThickness="15"/>
</Canvas>

qui va nous permettre de tracer une ligne bleue horizontale d’épaisseur 15.
Nous la voyons apparaître dans Blend (voir la figure suivante).

Affichage d'une ligne bleue dans Blend
Affichage d'une ligne bleue dans Blend

Je vais m’arrêter là pour les exemples de formes car la documentation en ligne possède des exemples qui sont plutôt simples à comprendre. Vous allez d’ailleurs voir dans le prochain chapitre un exemple de polygone.

Pinceaux

Les pinceaux vont nous permettre de colorier nos formes. Nous avons rapidement vu tout à l'heure que nous pouvions colorier nos formes grâce à la propriété Fill. Par exemple, le XAML suivant :

<Canvas>
    <Polygon Points="50,50 200, 200 50,200" Fill="Aqua" Stroke="Blue" StrokeThickness="5" />
</Canvas>

dessine un triangle rectangle de couleur Aqua dont le trait est bleu, d’épaisseur 5 (voir la figure suivante).

Le triangle est coloré grâce au pinceau Aqua
Le triangle est coloré grâce au pinceau Aqua

En fait, Aqua et Blue sont des objets dérivés de la classe Brush, en l’occurrence ici il s’agit d’une SolidColorBrush. Comme on l’a déjà vu, on peut donc écrire notre précédent pinceau de cette façon :

<Polygon Points="50,50 200, 200 50,200" Stroke="Blue" StrokeThickness="5">
    <Polygon.Fill>
        <SolidColorBrush Color="Aqua" />
    </Polygon.Fill>
</Polygon>

Ce qui nous offre un meilleur contrôle sur le pinceau. Nous pouvons par exemple changer l’opacité et la passer de 1 (valeur par défaut) à 0.4 par exemple :

<Polygon Points="50,50 200, 200 50,200" Stroke="Blue" StrokeThickness="5">
    <Polygon.Fill>
        <SolidColorBrush Color="Aqua" Opacity="0.4" />
    </Polygon.Fill>
</Polygon>

Et nous pouvons voir que la couleur est un peu plus transparente (voir la figure suivante).

L'opacité joue sur la transparence du contrôle
L'opacité joue sur la transparence du contrôle

Vous vous en doutez, il existe d’autres pinceaux que le pinceau uni. Nous avons également à notre disposition :

Utilisons par exemple une ImageBrush pour afficher la mascotte d'OpenClassrooms dans notre triangle (voir la figure suivante).

Zozor, la mascotte
Zozor, la mascotte

Nous aurons le XAML suivant :

<Polygon Points="50,50 200, 200 50,200" Stroke="Blue" StrokeThickness="5">
    <Polygon.Fill>
        <ImageBrush ImageSource="http://uploads.siteduzero.com/files/337001_338000/337519.png" />
    </Polygon.Fill>
</Polygon>

Qui donnera la figure suivante.

Le triangle avec un pinceau utilisant l'image de Zozor
Le triangle avec un pinceau utilisant l'image de Zozor

Et voilà comment utiliser une image comme pinceau. Sauf que ce triangle rectangle ne lui rend vraiment pas honneur … !
Pour faire un dégradé, le mieux est d’utiliser Blend. Reprenons notre triangle rectangle et cliquez à droite sur le pinceau de dégradé (voir la figure suivante).

Création d'un pinceau de dégradé
Création d'un pinceau de dégradé

Il ne reste plus qu’à choisir les couleurs de votre dégradé. Il faut vous servir de la bande en bas pour définir les différentes couleurs du dégradé (voir la figure suivante).

Choix du dégradé
Choix du dégradé

Et nous aurons un mââââgnifique triangle dégradé (voir la figure suivante) !

Le triangle avec le pinceau dégradé
Le triangle avec le pinceau dégradé

Notons que le XAML généré est le suivant :

<Polygon Points="50,50 200, 200 50,200" Stroke="Blue" StrokeThickness="5">
    <Polygon.Fill>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="Black" Offset="0"/>
            <GradientStop Color="#FF1FDC0C" Offset="1"/>
            <GradientStop Color="#FFE8AD11" Offset="0.488"/>
        </LinearGradientBrush>
    </Polygon.Fill>
</Polygon>

Voilà pour ce petit tour des pinceaux.

Les transformations

Le XAML possède un système de transformations qui permet d’agir sur les contrôles. Il existe plusieurs types de transformations dites affines car elles conservent la structure originale du contrôle.
Il est par exemple possible d’effectuer :

Par exemple, pour faire pivoter un bouton de 45°, je peux utiliser le code suivant :

<Grid x:Name="LayoutRoot" Background="Transparent">
    <StackPanel>
        <Button Content="Cliquez-moi !">
            <Button.RenderTransform>
                <RotateTransform x:Name="Rotation" Angle="45" CenterX="100" CenterY="50" />
            </Button.RenderTransform>
        </Button>
    </StackPanel>
</Grid>

Ce qui nous donne la figure suivante.

Rotation d'un contrôle de 45°
Rotation d'un contrôle de 45°

Il suffit de renseigner la propriété RenderTransform du contrôle, sachant que cette propriété fait partie de la classe UIElement qui est la classe mère de tous les contrôles affichables. Dans cette propriété, on met la classe RotateTransform en lui précisant notamment l’angle de rotation et les coordonnées du centre de rotation.
Illustrons encore une transformation grâce à la classe ScaleTransform pour effectuer un grossissement d’un TextBlock :

<TextBlock Text="Hello world" />
<TextBlock Text="Hello world">
    <TextBlock.RenderTransform>
        <ScaleTransform  ScaleX="3" ScaleY="10" />
    </TextBlock.RenderTransform>
</TextBlock>

Qui donne la figure suivante.

Mise à l'échelle du contrôle
Mise à l'échelle du contrôle

Ces transformations peuvent se combiner grâce à la classe TransformGroup, par exemple ici je combine une rotation avec une translation :

<TextBlock Text="Hello world">
    <TextBlock.RenderTransform>
        <TransformGroup>
            <RotateTransform Angle="90" />
            <TranslateTransform X="150" Y="100" />
        </TransformGroup>
    </TextBlock.RenderTransform>
</TextBlock>

Et nous aurons la figure suivante.

Rotation combinée à une translation
Rotation combinée à une translation

Sachant qu’il est possible de faire la même chose avec une transformation composite, grâce à la classe CompositeTransform.
Elle s’utilise ainsi :

<TextBlock Text="Hello world">
    <TextBlock.RenderTransform>
        <CompositeTransform TranslateX="150" TranslateY="100" Rotation="90" />
    </TextBlock.RenderTransform>
</TextBlock>

Voilà pour les transformations. En soi elles ne sont pas toujours très utiles, mais elles révèlent toutes leurs puissances grâce aux animations que nous découvrirons dans le chapitre suivant.

  • Le XAML possède plein de formes que nous pouvons utiliser pour dessiner dans nos applications, comme le trait, l’ellipse, le rectangle, etc.

  • À chaque forme peut être appliquée une couleur de remplissage ou de traits grâce aux pinceaux.

  • Il est également possible de faire subir des transformations à un contrôle comme une rotation ou une translation.

Exemple de certificat de réussite
Exemple de certificat de réussite