Créer un bouton avec XAML

Un exemple simple de création de composant graphique pour étendre le langage XAML.

Le langage XAML dispose d'un élément Button, mais celui-ci ne semble pas faire partie de Silverlight, en version 1.0 tout au moins, et donc ne peut être utilisé pour une application Web. On pourrait en fait utiliser l'élément <input type="button" > de HTML, mais dans ce cas l'application ne fonctionnera qu'avec un navigateur.
Pour disposer de boutons communs aux applications Web et locales, on peut aussi bien dessiner ses propres boutons.

Dessiner un bouton

On reprend le code du rectangle aux bords arrondis:

<Rectangle
  Canvas.Top="4"
  Canvas.Left="4"
  Height="20"
  Width="80"
  Fill="LightGray"
  Stroke="Black"
  StrokeThickness="1" 
  RadiusX="4"
  RadiusY="4"
/>

On obtient le cadre d'un bouton ci-dessous:



Pour embellir le bouton il faut supprimer la propriété de couleur et ouvrir une balise plus élaborée. Quand on transforme ainsi la propriété en balise, la couleur peut être donnée avec la balise SolidColorBrush:

<Rectangle.Fill>
    <SolidColorBrush Color="LightGray" />
</Rectangle.Fill>

L'image reste la même:


Maintenant on ajoute un dégradé de couleur, clair en haut à gauche, sombre au coin opposé:

<Rectangle.Fill>
    <LinearGradientBrush >
         <GradientStop Color="White" Offset="0.0" />
         <GradientStop Color="LightGray" Offset="0.20" />
         <GradientStop Color="Gray" Offset="0.9" />
         <GradientStop Color="LightGray" Offset="0.20" />
    </LinearGradientBrush>
</Rectangle.Fill>

Ajouter un texte

Pour ajouter un texte, ce qui ne peut être fait dans un rectangle, on va créer un Canvas interne et c'est dans ce Canvas que l'on alignera le Rectangle et le TextBlock.

<Canvas>
    <Canvas>
        <Rectangle Canvas.Top="4" Canvas.Left="4" >
        </Rectangle>
        <TextBlock Canvas.Left="14" Canvas.Top="6">
              Click
        </TextBlock>
     </Canvas>
</Canvas>

Le bouton doté maintenant d'un libellé:


Définir une interaction

Pour ajouter la gestion des actions de l'utilisateur, on crée des fonctions JavaScript que l'on associe au Canvas de notre bouton.
Quand la souris:
- passe sur le bouton (MouseEnter), le cadre noir apparait,
- et il disparait lorsqu'elle quitte la surface (MouseLeave).
- Quand on clique sur le bouton (MouseLeftButtonDown), le bouton sur l'écran se décale, une action est exécutée, en l'occurence un message est affiché dans notre exemple, puis le bouton redevient normal.
- Quand on relâche le bouton de la souris (MouseLeftButtonUp), ou après exécution de l'action, le bouton reprend la position normale.

<Canvas
	MouseLeftButtonDown="javascript:buttonDown"
	MouseLeftButtonUp="javascript:buttonUp"
	MouseEnter="javascript:buttonEnter"
	MouseLeave="javascript:buttonLeave"
	>

Pour décaler le bouton sur la page et simuler un bouton pressé, le Canvas du bouton, qui contient à la fois le rectangle et le texte, est décalé.
Pour cela, il nous faudra utiliser une nouvelle propriété, RenderTransform, qui permet d'effectuer des transformations diverses sur un objet, mais tout ce qui nous intéresse ici, c'est la translation de coordonnées.
Pour cela nous donnons un nom à la balise, "addoffset" que l'on utilisera dans le code JavaScript.

<Canvas.RenderTransform>
    <TransformGroup>
           <TranslateTransform x:Name="addoffset" X="0" Y="0"/>
    </TransformGroup>
</Canvas.RenderTransform>

Vous pouvez cliquer sur Le bouton ci-dessous:

Les fichiers complets