Essayez ! Ajouter de l’animation à un bouton

Le style 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 objet SimpleButton sur la planche graphique d’Expression Blend.

   Conseil :
   Les contrôles de style simple se trouvent sous Styles simples dans la catégorie Styles du panneau 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 dans le panneau Objets et chronologie, pointez sur Modifier le modèle, puis cliquez sur Modifier l'élément actuel. Si vous ne souhaitez pas changer le dictionnaire de ressources SimpleStyles.xaml, vous pouvez cliquer sur Modifier une copie et non sur Modifier l'élément actuel 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’objets dans le panneau Objets et chronologie. Pour revenir au mode d’édition de modèle pour un modèle existant, dans le panneau Objets et chronologie, cliquez avec le bouton droit sur l’objet dont vous voulez modifier le modèle, pointez sur Modifier le modèle, puis cliquez sur Modifier l'élément actuel.

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

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

5. Dessinez un Rectangle dans la grille.

6. Cliquez avec le bouton droit sur l’objet Rectangle, pointez sur Trier, puis cliquez sur Mettre en arrière-plan pour le placer derrière l’objet 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’objet 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é. Vous pouvez utiliser la liaison de modèle pour transporter les propriétés des objets vers le modèle et pouvoir créer différents boutons avec différentes couleurs d'arrière-plan tout en continuant à utiliser 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 vous définissez une couleur par défaut pour la propriété Fill (remplissage) dans le modèle.

8. Dans le panneau Déclencheurs, 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 Ajouter une nouvelle action pour ajouter une chronologie d’animation. Si vous n’avez pas déjà une chronologie à déclencher lorsque le pointeur 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 Déclencheurs pour voir tous les déclencheurs et toutes les actions. Utilisez la souris pour redimensionner les fenêtres.

9. Dans le panneau Objets et chronologie, placez la tête 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 votre pointeur se positionne au-dessus du bouton.

10. Dans le panneau Déclencheurs, cliquez sur 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 votre pointeur 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 dans le panneau Déclencheurs.

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

Voir aussi

Tâches

Ajouter ou supprimer un déclencheur

Créer une animation simple

Concepts

SimpleButton

Utilisation de déclencheurs pour la définition du comportement d'un contrôle WPF