Essayez ! Ajouter de l’animation à un bouton

Le contrôle SimpleButton n’anime pas les changements dans son état. Il définit plutôt des ressources pinceau lors de changements d’état. Dans Microsoft Expression Blend, une animation est impossible d’une couleur à une ressource pinceau. La procédure suivante illustre une autre solution, utilisant des déclencheurs de propriétés pour démarrer des chronologies avec animation.

Pour animer un bouton

1. Dessinez un contrôle SimpleButton sur la planche graphique d’Expression Blend.

   Conseil :
   Les contrôles de styles simples sont disponibles dans la catégorie Styles simples de l’onglet Contrôles dans la Bibliothèque de composants. Une fois que vous avez sélectionné un contrôle de style simple dans la liste, vous pouvez le dessiner sur la planche graphique.

2. Cliquez avec le bouton droit sur le bouton sous Objets et chronologie, pointez sur Modifier des parties du contrôle (Modèle), puis cliquez sur Modifier le modèle. Si vous ne souhaitez pas changer le dictionnaire de ressources SimpleStyles.xaml, vous pouvez cliquer sur Modifier une copie et non sur Modifier le modèle pour créer un nouveau modèle et l’enregistrer dans le document. Pour plus d’informations sur la création d’une copie, voir Créer une ressource.

   Conseil :

   Pour quitter le mode d’édition de modèle et revenir à l’étendue de votre document, cliquez sur le bouton Étendue supérieure, qui se trouve au-dessus de l’arborescence d’éléments dans le panneau Interaction. Pour revenir au mode d’édition de modèle pour un modèle existant : sous Objets et chronologie, cliquez avec le bouton droit sur l’élément dont vous voulez modifier le modèle, pointez sur Modifier des parties du contrôle (Modèle), puis cliquez sur Modifier le modèle.

3. Dans l’étendue d’édition du modèle de contrôle, supprimez l’élément enfant Border de la Grille.

4. Double-cliquez sur l’élément Grid pour l’activer afin de pouvoir ajouter des éléments enfants.

5. Dessinez un Rectangle dans la grille.

6. Cliquez avec le bouton droit sur l’élément Rectangle, pointez sur Trier, puis cliquez sur Mettre en arrière-plan pour le placer derrière l’élément ContentPresenter.

7. Sélectionnez une nouvelle valeur pour la propriété Fill du rectangle sous Pinceaux dans le panneau Propriétés. C’est la couleur par défaut du bouton.

   Conseil :

   L’élément enfant Border du modèle d’origine utilisait la liaison de modèle pour lier la propriété Fill (remplissage) du modèle à la propriété Background (arrière-plan) du contrôle auquel le modèle est appliqué. La liaison de modèle vous permet d’utiliser dans votre modèle certaines propriétés qui sont définies dans le contrôle, et vous permet ainsi de créer de multiples boutons qui ont différentes couleurs d’arrière-plan mais utilisent quand même le même modèle. Cependant, une animation est impossible d’une propriété liée à un modèle à une couleur spécifique, c’est pourquoi nous définissons une couleur par défaut pour la propriété Fill (remplissage) dans le modèle.

8. Sous Déclencheurs dans le panneau Interaction, cliquez sur le déclencheur IsMouseOver = True pour activer l’enregistrement de déclencheur. Puis, en regard de Actions lors de l’activation, cliquez sur le bouton Ajouter une nouvelle action pour ajouter une chronologie d’animation. Si vous n’avez pas déjà une chronologie à déclencher lorsque la souris passe au-dessus du bouton, une fenêtre Chronologie nécessaire apparaît. Cliquez sur OK pour créer une nouvelle chronologie et commencer l’enregistrement.

   Conseil :
   Vous devrez éventuellement régler les fenêtres du panneau Interaction pour voir tous les déclencheurs et toutes les actions sous Déclencheurs. Utilisez la souris pour redimensionner les fenêtres.

9. Sous Objets et chronologie, placez le curseur de lecture à 1 seconde, puis définissez une nouvelle valeur pour la propriété Fill (remplissage) sous Pinceaux dans le panneau Propriétés.

   Dès que vous changez la propriété Fill (remplissage), une image clé apparaît sur la chronologie. Il n’est pas nécessaire de définir une image clé à 0 seconde. La chronologie s’anime à partir du remplissage précédent jusqu’au remplissage défini à 1 seconde, lorsque le pointeur de la souris se positionne au-dessus du bouton.

10. Sous Déclencheurs dans le panneau Interaction, cliquez sur le déclencheur IsMouseOver = True de nouveau pour quitter la chronologie d’animation et revenir au mode d’enregistrement du déclencheur. Cliquez sur Ajouter une nouvelle action en regard de Actions lors de la désactivation. Créez ou sélectionnez la chronologie d’animation qui s’exécute lorsque le pointeur de la souris s’éloigne du bouton. Par exemple, vous pouvez utiliser la chronologie précédente, mais sélectionner la méthode Stop pour la chronologie.

11. Si vous le souhaitez, vous pouvez créer des chronologies d’animation pour d’autres états sous Déclencheurs.

12. Testez votre application (F5) pour voir les effets.

Voir aussi

Concepts

SimpleButton

Ajouter ou supprimer un déclencheur

Vue d’ensemble des déclencheurs

Créer une animation simple