Essayez ! Créer un bouton à l’aide d’effets bitmap

Outre l’utilisation de déclencheurs de propriété pour changer l’aspect d’un bouton selon l’interaction utilisateur, dans Microsoft Expression Blend, vous pouvez aussi appliquer un effet bitmap sur chaque état.

Pour créer des effets bitmap sur un bouton

1. Placez un contrôle SimpleButton sur la planche graphique dans 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, puis choisissez le Jaune pour la propriété Fill sous Pinceaux dans le panneau Propriétés.

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. Arrondissez les bords de l’élément Rectangle à l’aide de l’ornement qui apparaît lorsque vous placez le pointeur de la souris au-dessus des deux poignées à l’extérieur du coin supérieur gauche du rectangle, ou à l’aide des propriétés RadiusX et RadiusY sous Apparence dans le panneau Propriétés.

8. Le Rectangle étant toujours sélectionné, recherchez la propriété BitmapEffect dans la section Avancé sous Apparence dans le panneau Propriétés. Cliquez sur la flèche déroulante, puis cliquez sur Biseau. Laissez la propriété BevelWidth à la valeur 5, mais changez les autres propriétés de biseau jusqu’à ce que vous obteniez l’effet souhaité.

9. Sous Déclencheurs dans le panneau Interaction, cliquez sur le déclencheur IsMouseOver = True pour activer l’enregistrement de déclencheur. Dans le panneau Propriétés, cliquez de nouveau sur la flèche déroulante en regard de la propriété BitmapEffect, cliquez sur Biseau, puis affectez à la propriété BevelWidth la valeur 10.

   Une nouvelle ligne apparaît sous Propriétés une fois actif sous Déclencheurs, reflétant ainsi le changement de propriété qui se produit lorsque la souris passe au-dessus du bouton.

   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.

10. Sous Déclencheurs dans le panneau Interaction, cliquez sur le déclencheur IsPressed = True pour activer l’enregistrement de déclencheur, puis dans le panneau Propriétés, cliquez de nouveau sur la flèche déroulante en regard de la propriété BitmapEffect, cliquez sur Biseau, puis attribuez à la propriété BevelWidth la valeur 2.

    Une nouvelle ligne apparaît sous Propriétés une fois actif sous Déclencheurs, reflétant ainsi le changement de propriété qui se produit lors d’un clic du bouton de la souris.

11. Cliquez sur Par défaut sous Déclencheurs dans le panneau Interaction, pour désactiver l’enregistrement de déclencheur.

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

    Conseil :
    Les effets bitmap ne bénéficient pas d’une accélération matérielle, il est donc préférable de définir une valeur explicite et de ne pas tenter d’animer les valeurs avec un déclencheur d’événements et une chronologie d’animation.

Voir aussi

Concepts

SimpleButton

Ajouter ou supprimer un déclencheur

Vue d’ensemble des déclencheurs

Ajouter un effet bitmap à un objet