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.

   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 l'objet 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 ou modifier un modèle.

   Conseil :

   Pour quitter le mode d’édition de modèle et revenir à l’étendue de votre document : cliquez sur Étendue supérieure, situé 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 souhaitez 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. Cliquez sur l'objet Grille pour l’activer afin de pouvoir ajouter des objets enfants.

5. Dans la barre d’outils, ajoutez trois contrôles Grid dans l’objet Grid racine du modèle. Pour que les nouveaux objets Grid remplissent l'objet Grid parent, sélectionnez-les, pointez sur Taille automatique dans le menu Objet puis cliquez sur Remplir.

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

7. Dans le panneau Objets et chronologie, renommez respectivement les nouveaux objets Grille en « Default », « Enfoncé » 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 grille par déclencheur. Par exemple, avec Default sélectionné dans le panneau Déclencheurs, cliquez sur les objets de grille Enfoncé et MouseOver tout en maintenant enfoncée la touche Ctrl pour sélectionner ces objets. Puis sous Apparence dans le panneau Propriétés, définissez la propriété Visibilité sur Masqué.

9. Cliquez sur IsMouseOver = True dans le panneau Déclencheurs, sélectionnez les objets de grille Enfoncé, puis sous Apparence et Default, dans le panneau Propriétés, définissez la propriété Visibilité sur Masquée. Sélectionnez l'objet Grid MouseOver et définissez la propriété Visibility sur Visible.

10. Enfin, IsPressed = True étant sélectionné sous Déclencheurs, sélectionnez les objets grille MouseOver et Default, puis sous Apparence dans le panneau Propriétés, attribuez à la propriété Visibility la valeur Masquée. Sélectionnez l'objet Grid Pressed et définissez la propriété Visibility sur Visible.

11. Vous pouvez maintenant concevoir chaque objet Grid comme vous souhaitez qu'ils apparaissent sous les différentes conditions sélectionnées dans le panneau Déclencheurs.

    Vous pouvez utiliser des outils de dessin et des chronologies d’animation pour créer un comportement unique pour votre bouton.

    Pour plus d’informations, voir Dessiner des objets et Animation d'objets.

    Pour prévoir l’affichage de l’un des objets grille et le masquage des autres, vous pouvez cliquer sur le bouton Masquer/Afficher  en regard des autres objets grille dans le panneau Objets et chronologie.

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

Voir aussi

Concepts

SimpleButton