Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Créer un bouton animé réutilisable avec Expression Blend et Visual Studio

Par tannoy (Antony Chauviré), le 03 juin 2008

Nous allons voir à travers cet article comment créer des composants réutilisables dans Silverlight 2.0 en utilisant le principe des contrôles utilisateurs (User Control).

Création du contrôle utilisateur dans Visual Studio 2008

Après avoir créé un projet Silverlight, nous allons créer un composant de type bouton, qui aura une animation simple lors du survol. Les parties design et animation seront créées dans Expression Blend.

Nous allons ajouter un contrôle utilisateur en réalisant un clic droit sur le projet Silverlight puis Ajouter | Nouvel Elément…

Dans la liste des catégories, sélectionnez Silverlight et choisissez ensuite Silverlight User Control. Nommez le contrôle BoutonAnime.xaml.

Design et animation dans Expression Blend

Nous utiliserons Expression Blend 2.5 que vous pouvez le télécharger à cette adresse :

http://www.microsoft.com/downloads/details.aspx?FamilyID=32a3e916-e681-4955-bc9f-cfba49273c7c&DisplayLang=en

Pour ouvrir le fichier BoutonAnime.xaml dans Blend, nous allons effectuer un clic droit puis choisir Open in Expression Blend

Par défaut, le contrôle utilisateur utilise un conteneur de positionnement de type Grid. Nous allons modifier ce type de positionnement en Canvas afin que le contenu de notre contrôle (texte, dessin) soit toujours positionné par rapport à son conteneur parent.

Nous allons faire un clic droit sur LayoutRoot dans le panneau Objects and Timeline et choisir Change Layout Type | Canvas…

Nous allons utiliser l’objet TextBlock et l’objet Pen pour dessiner notre bouton. Le texte par défaut du bouton sera Texte. Nous nommerons les 2 objets : Texte et Filet en utilisant pour cela la propriété name du panneau properties.

Afin de gérer le texte et le filet comme un seul objet, nous allons les grouper dans un canvas. Avec l’outil Selection directe (flèche blanche) et la touche Ctrl, nous allons sélectionner les 2 objets et réaliser un clic droit sur la sélection puis choisir Group into | Canvas…

Nous nommerons ce canvas : bouton.

Nous allons modifier les dimensions de notre contrôle utilisateur en double cliquant sur User Control dans le panneau Objects and Timeline et en spécifiant une largeur de 143 et une hauteur de 93.

Pour l’objet LayoutRoot, nous spécifierons une largeur et une hauteur sur Auto. Pour l’objet bouton, nous spécifierons un positionnement à gauche et en haut à 10 pixels via les propriétés Left et Top.

<UserControl x:Class="ControleReutilisable.BoutonAnime"
    xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="193" Height="63" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
	<Canvas Height="Auto" x:Name="LayoutRoot" Width="Auto" Background="White">
		<Canvas Height="43" x:Name="bouton" Width="173" Canvas.Top="10" Canvas.Left="10">
			<TextBlock x:Name="Texte" Width="131.097" Canvas.Left="26.5" Canvas.Top="10.5" TextWrapping="Wrap" d:LayoutOverrides="Width">
				<Run FontFamily="Portable User Interface" FontSize="14.666666984558106" FontStretch="Normal" FontStyle="Normal" FontWeight="Normal" Foreground="#FF000000" Text="Texte"/>
			</TextBlock>
			<Path Height="43" x:Name="Filet" Width="173" Data="M27,10 L14,44 L186,52" Stretch="Fill" Stroke="#FF000000"/>
		</Canvas>
	</Canvas>
</UserControl>

Nous souhaitons donner un effet de relief au survol du bouton. Nous allons pour cela réaliser une petite animation qui va légèrement modifier la taille du bouton.

Nous allons créer une animation en cliquant sur le bouton New (le signe ‘+’) du panneau Objects and Timeline. Nous la nommerons AnimatedButton.

Nous allons modifier la présentation de l’interface en cliquant sur Window | Active workspace | Animation Workspace…

Nous allons sélectionner l’objet bouton et ajouter une image clé à l’instant 0 en cliquant sur le bouton Record Keyframe.

Ensuite, nous allons déplacer la tête de lecture à la position 0,5 secondes et réduire légèrement les dimensions du bouton. Vous pouvez tester l’animation en cliquant sur le bouton Play.

Nous allons enregistrer le fichier et fermer Expression Blend.

Intégration du contrôle utilisateur dans notre application

Afin d’intégrer notre contrôle utilisateur dans une autre page, nous allons devoir ajouter une déclaration de namespace qui pointe vers le CLR namespace dans lequel le contrôle est défini.

Nous allons ouvrir le fichier page.xml et ajouter, après le namespace xmlns :x, le code suivant :

xmlns:myControl="clr-namespace:ControleReutilisable"

Nous allons ensuite pouvoir intégrer une instance de notre contrôle en utilisant le préfixe myControl déclaré précédemment.

<Grid x:Name="LayoutRoot" Background="White">
        <myControl:BoutonAnime x:Name="btSilverlight" />
 </Grid>

Ajout de propriétés modifiables à notre contrôle utilisateur

Afin de rendre un peu plus dynamique notre bouton, nous allons lui ajouter des propriétés modifiables qui permettront de changer le texte, la couleur du texte et la couleur du filet.

Nous allons ouvrir le fichier BoutonAnime.xaml.cs.

Nous allons ensuite ajouter une propriété publique de type string, nommée Legende. Les accesseurs de cette propriété vont être définis. La méthode get renverra la valeur de la propriété text de l’objet TextBlock nommé Texte et la méthode set valorisera cette même propriété.

public string Legende
        {
            get { return Texte.Text; }
            set { Texte.Text = value; }
        }

Pour modifier la couleur du texte, nous utiliserons la propriété Foreground de l’objet TextBlock. La valeur de cette propriété est de type Brush. Dans notre exemple, nous utiliserons un type SolidColorBrush qui permet de définir une couleur solide.

La classe SolidColorBrush possède une propriété Color qui obtient ou renvoie une valeur de type Color, qui peut-être notamment une valeur RVB héxadécimale.

Nous allons donc créer une propriété de type Color, nommée CouleurTexte. Nous implémenterons ensuite les accesseurs en n’oubliant pas, dans la méthode get, de caster la propriété Foreground en SolidColorBrush.

public Color CouleurTexte
        {
            get { return ((SolidColorBrush)Texte.Foreground).Color; }
            set { Texte.Foreground = new SolidColorBrush(value); }
        }

Pour modifier la couleur du filet, nous utiliserons la propriété Stroke de l’objet de type Path. Nous utiliserons, comme pour la couleur du Texte, le type SolidColorBrush.

public Color CouleurFilet
        {
            get { return ((SolidColorBrush)Filet.Stroke).Color; }
            set { Filet.Stroke = new SolidColorBrush(value); }
        }

Utilisation des propriétés de notre contrôle

Nous allons ajouter 2 autres contrôles BoutonAnime dans notre page et nous valoriserons les couleurs et le texte de ces controles.

<myControl:BoutonAnime x:Name="btSilverlight" Legende="Silverlight" CouleurTexte="#00FF00" CouleurFilet="#FF0000" VerticalAlignment="Top" Margin="10,10,183.5,0" Height="63" />
        <myControl:BoutonAnime x:Name="btMicrosot" Legende="Microsoft" CouleurTexte="#0000FF" CouleurFilet="Pink" VerticalAlignment="Top" Margin="10,70,183.5,0" Height="63" />
        <myControl:BoutonAnime x:Name="btExpressionBlend" Legende="Expression Blend" CouleurTexte="Red" CouleurFilet="Aqua" VerticalAlignment="Top" Margin="10,130,183.5,0" Height="63" /> 

Jouer l’animation au survol du bouton

Nous allons maintenant utiliser l’animation réalisée dans Blend afin de donner un effet à notre bouton lors du survol.

Nous allons ouvrir le fichier BoutonAnime.xaml.cs et dans le constructeur, nous allons nous abonner à l’événement MouseEnter. Pour cela, nous allons saisir this.MouseEnter += et appuyer 2 fois sur la touche tabulation pour définir le gestionnaire d’événement.

this.MouseEnter += new MouseEventHandler(BoutonAnime_MouseEnter);

Nous allons ensuite modifier la fonction qui est exécutée en réponse à l’événement en lui demandant de joueur notre animation. Avec la propriété AutoReverse, nous allons indiquer que notre animation sera jouée en sens inverse après avoir été exécuté une fois.

void BoutonAnime_MouseEnter(object sender, MouseEventArgs e)
        {
            this.AnimatedButton.AutoReverse = true;
            this.AnimatedButton.Begin();
        }

Création d’événements pour notre bouton animé

Notre contrôle BoutonAnimé va devoir, comme beaucoup de contrôles d’interface, posséder un événement Click afin de pouvoir détecter dans notre animation, le clic sur un bouton.

Nous allons tout d’abord ajouté un évènement public de type EventHandler dans notre fichier BoutonAnime.xaml.cs afin que notre contrôle utilisateur puisse bénéficier d’un événement de clic.

public event EventHandler Click;

Notre événement Click sera évoqué lorsque le pointeur de souris sera relâché sur notre bouton. Nous allons nous abonner à l’événement MouseLeftButtonUp dans notre constructeur.

this.MouseLeftButtonUp += new MouseButtonEventHandler(BoutonAnime_MouseLeftButtonUp);

Nous allons ensuite évoquer notre événement Click dans le gestionnaire d’événement BoutonAnime_MouseLeftButtonUp. Cependant, l’événement ne devra être évoqué que si des abonnements existent.

void BoutonAnime_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            if(Click != null)
            {
                Click(this, EventArgs.Empty);
            }
        }

Utilisation de l’événement dans notre application

Nous allons utiliser l’événement de Click de notre contrôle utilisateur afin d’afficher une page web lors du clic sur le bouton Silverlight.

<myControl:BoutonAnime x:Name="btSilverlight" Legende="Silverlight" CouleurTexte="#00FF00" CouleurFilet="#FF0000" VerticalAlignment="Top" Margin="10,10,183.5,0" Height="63" Click="btSilverlight_Click" />

Dans le fichier Page.xaml.cs, nous allons implémenter le gestionnaire d’événements btSilverlight_Click en lui demandant de réaliser un lien vers la page http://www.silverlight.net.

Nous allons pour cela utiliser l’espace de noms System.Windows.Browser

using System.Windows.Browser;

Nous allons ensuite utiliser les classes HtmlWindow et HtmlPage pour créer le lien.

private void btSilverlight_Click(object sender, EventArgs e)
        {
            HtmlWindow w = HtmlPage.Window;
            w.Navigate(new Uri("http://www.silverlight.net"));
        }

Vous pouvez tester votre application (F5) pour vérifier que le clic sur le bouton Silverlight vous amène bien sur la page http://www.silverlight.net.

Nous répéterons les mêmes opérations pour définir les liens sur les 2 autres boutons.