Un des effets sympa que l'on utilise très courament c'est le rollover sur un bouton. En quoi cela consiste pour le néophyte ? C'est simplement le fait d'appliquer une modification visuelle sur un objet dés que la souris passe dessus. Alors comme ça c'est simple mais en Silverlight les choses se complique un peu et je m'en vais vous expliquer comment ajouter cet effet. L'avantage c'est que cela nous permettra de faire le tour de quelques notions sympa en Silverlight comme les styles et les templates. Alors prenons l'exemple d'nu bouton "insert"

Lorsque le bouton est dans son état normal il a ce rendu là : 

image

Une foi la souris passé dessus voilà le rendu :

image

Bien sur rien de magique la dedans j'ai juste utilisé deux images différentes. Il est à noter qu'un bouton Silverlight à d'origine cette tête là :

image

Je remercie mitch pour le design comme d'hab un développeur WPF et Silverlight n'est rien sans le meilleur designer :o)

 

Création d'un bouton avec deux images:

La création d'un bouton en Xaml est réalisé par la classe "Button"

<Button  Width="140" Height="30" x:Name="insertButton" Click="insertButton_Click" />

Pour bien comprendre notre bouton, une petite explication s'impose , définissons ce que sont les Styles et les Templates.

Les styles

Ils correspondent au style css, ils permettent de spécifier des valeurs à des propriétés pour un type donné. ils sont basés sur la classe Style. Par exemple si je veux créer des boutons qui sont toujours espacés de 3 pixels il suffit de créer le style suivant :

<Style x:Key="ButtonStyle" TargetType="Button">
          <Setter Property="Margin" Value="3" />
</Style>

Puis pour qu'ils soient appliqués à un bouton, il faut affecter la propriété Style de ce dernier à notre "ButtonStyle":

<Button  Width="140" Height="30" x:Name="insertButton" Style="{StaticResource ButtonStyle}" Click="insertButton_Click" />

Les Templates

Les templates correspondent au rendu du bouton. Par exemple si je veux que mon bouton soit elliptique au lieu de carré, si je veux qu'il comporte une image au lieu de son rendu actuel c'est le rôle du Template.

Dans notre cas, nous allons nous attarder sur le contrôle Template et redéfinir complètement le layout de notre bouton.

Les styles et les templates peuvent se méler car le ControlTemplate est une propriété des contrôles silverlight. On peut donc créer un style qui modifie le ControlTemplate. Ce sera notre cas.

Nous réalisons cela comme suit :

<Style x:Key="ButtonStyle" TargetType="Button">
                <Setter Property="Margin" Value="3" />
                <Setter Property="ControlTemplate">
                    <Setter.Value>
                        <ControlTemplate>
                            <!-- Nous mettons ici le rendu de notre Control-->
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
</Style>

Le Template de notre Boutton contient donc deux images qui se superspose. Seule l'une des deux images s'affiche suivant l'état de notre contrôle. Pour cela nous jouons sur l'opacité des images. Dans notre cas, l'opacité de l'image normale est de 1 et celle de l'image s'affichant lors du rollover est de 0.

 <Style TargetType="Button" x:Key="ButtonStyle">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Grid x:Name="RootElement">
                            <Image x:Name="ImgInsert" Source="/Images/IcoInsert.png" Opacity="1"/>
                            <Image x:Name="ImgInsertRO" Source="/Images/IcoInsertRO.png" Opacity="0"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

L'animation

Une fois notre contrôle créé, il nous reste à créer l'animation et appliquer notre style au contrôle. L'animation modifiera l'opacité des boutons pour les passer de 1 à 0 et inversement. Le déclencheur sera l'évènement MouseOver.

<Style TargetType="Button" x:Key="ButtonStyle">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Grid x:Name="RootElement">
                            <Image x:Name="ImgInsert" Source="/Images/IcoInsert.png" Opacity="1"/>
                            <Image x:Name="ImgInsertRO" Source="/Images/IcoInsertRO.png" Opacity="0"/>
                            <Grid.Resources>
                                <Storyboard x:Key="Normal State" />
                                <Storyboard x:Name="StoryButton" x:Key="MouseOver State">
                                    <DoubleAnimation
                                        Storyboard.TargetName="ImgInsert"
                                        Storyboard.TargetProperty="Opacity"
                                        To="0" 
                                        Duration="0:0:0.1"/>
                                    <DoubleAnimation 
                                        Storyboard.TargetName="ImgInsertRO"
                                        Storyboard.TargetProperty="Opacity"
                                        To="1" 
                                        Duration="0:0:0.1"/>
                                </Storyboard>
                            </Grid.Resources>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Nous appliquons enfin ce style à notre contrôle comme vue précédement et le tour est joué.

Hope to help you !

Musashi.