Essayez ! créer un bouton de substitution

Un effet de substitution peut être créé dans un bouton en changeant son aspect selon l’interaction de l’utilisateur. Au lieu de déclencher une chronologie d’animation ou de déclencher des changements de propriété pour produire un effet de substitution, vous pouvez utiliser la procédure suivante pour créer de multiples panneaux Grille pour représenter chaque état du bouton, puis basculer les propriétés Visibility (visibilité) de chaque panneau Grille.

Pour créer un effet de substitution sur un bouton

1. Dessinez un contrôle SimpleButton sur la planche graphique dans Microsoft 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. Dans la barre d’outils, ajoutez trois contrôles Grid dans l’objet Grid du modèle. Vous pouvez les ajouter rapidement en double-cliquant sur l’icône Grille dans la boîte à outils, en cliquant avec le bouton droit sur chaque contrôle Grid sous Objets et chronologie, en pointant sur Taille automatique, puis en cliquant sur Remplir.

6. Cliquez avec le bouton droit sur l’élément ContentPresenter, pointez sur Trier, puis cliquez sur Mettre au premier plan pour le disposer devant les nouveaux objets Grid.

7. Sous Objets et chronologie, renommez respectivement les nouveaux objets Grid en « Default », « Pressed » et « MouseOver » en cliquant avec le bouton droit sur chacun et en cliquant sur Renommer.

8. Pour définir le comportement du déclencheur, il convient de ne rendre visible qu’un seul objet de grille par déclencheur. Par exemple, avec Default sélectionné sous Déclencheurs dans le volet Interaction, cliquez sur les objets de la grille Pressed et MouseOver tout en maintenant enfoncée la touche Ctrl pour sélectionner ces objets. Ensuite, sous Apparence dans le panneau Propriétés, affectez à la propriété Visibility la valeur Masquée.

9. Cliquez sur IsMouseOver = True sous Déclencheurs dans le panneau Interaction, sélectionnez les objets de grille Pressed and Default, et sous Apparence dans le panneau Propriétés, attribuez à la propriété Visibility la valeur Masquée.

10. Enfin, IsPressed = True étant sélectionné sous Déclencheurs, sélectionnez les objets de grille MouseOver et Default, puis sous Apparence dans le panneau Propriétés, attribuez à la propriété Visibility la valeur Caché.

11. Vous pouvez maintenant concevoir chaque objet de grille tel que vous voulez qu’il apparaisse sous les différentes conditions. Vous pouvez utiliser des outils de dessin et des chronologies d’animation pour créer un comportement unique pour votre bouton. Pour prévoir l’affichage de l’un des objets de grille et le masquage des autres, vous pouvez cliquer sur le bouton Masquer/Afficher  en regard des autres objets de grille sous Objets et chronologie.

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

Voir aussi

Concepts

SimpleButton