Modifier l’apparence d’un contrôle système dans différents états

Les contrôles ont un aspect différent suivant l’état dans lequel ils se trouvent. Par exemple, lorsque vous placez le pointeur de la souris au-dessus d’un bouton, sa couleur est légèrement modifiée. « MouseOver » est l’un des états de bouton. Vous pouvez personnaliser l’apparence de différents états des contrôles système.

La procédure suivante nécessite l'utilisation d'un bouton, mais vous pouvez personnaliser n'importe quel contrôle système inclus avec Microsoft Expression Blend ou tout contrôle Microsoft Silverlight personnalisé importé héritant de la classe Control .

Pour modifier l’apparence d’un bouton dans différents états

1. Créez un modèle réutilisable pour un contrôle système tel que le contrôle Button.

2. Si vous n'êtes pas déjà en mode d'édition d'un modèle, cliquez avec le bouton droit sur un contrôle de la planche graphique, pointez sur Modifier le modèle, puis cliquez sur Modifier l'élément actuel. Vous pouvez aussi sélectionner l’objet puis cliquer sur Modèle dans le chemin de navigation.

   

3. Lorsque vous êtes en mode d'édition de modèle, les états du bouton (tels que Normal et MouseOver ) s'affichent dans le panneau État. Les états sont contenus dans des groupes d’états (tels que CommonStates et FocusStates ).

   

   Les parties du modèle sont affichées dans le panneau Objets et chronologie. C’est l’apparence de ces parties que vous pouvez modifier pour un état sélectionné.

   

4. Cliquez sur MouseOver dans le panneau États. Remarquez qu’un cercle rouge apparaît en haut de la planche graphique pour vous indiquer que l’enregistrement d’état est activé. Cela signifie que toute modification de propriété apportée sera enregistrée pour l’état sélectionné. Dans le panneau Objets et chronologie, les parties du modèle dont des propriétés sont définies différemment par rapport aux cas où Base est sélectionné sont identifiées par des cercles rouges autour des boutons de développement.

   

5. Pour modifier la taille du bouton à l’état MouseOver , cliquez sur [Grid] dans le panneau Objets et chronologie.

   Conseil :
   La Grid   est un panneau de disposition qui classe les objets enfants en fonction de l’alignement horizontal, de l’alignement vertical et des marges. Pour plus d’informations sur les panneaux de disposition, voir Organisation des objets et Utilisation du panneau de disposition Grille.

6. Dans le panneau Propriétés, sous Transformer, cliquez sur l'onglet Mettre à l'échelle . Passez les valeurs X et Y sur 1.1.

7. Enregistrez votre travail (Ctrl+S), puis appuyez sur F5 pour générer et tester votre application. Une fois votre application ouverte dans une fenêtre de navigateur, déplacez le pointeur de votre souris sur le bouton pour le développer.

Dépannage

• Certaines parties de modèles ont des propriétés liées à des valeurs extérieures au modèle. Par exemple, la propriété Fill de la partie Background est liée par modèle à la propriété Background du bouton. Cela signifie que lorsque vous dessinez un bouton qui utilise ce modèle, le modèle reprendra la valeur définie sur le bouton lui-même. La liaison par modèle permet de créer un contrôle personnalisé, ainsi que d’activer certaines modifications lorsque vous incluez les contrôles dans votre application.

  Les propriétés liées sont identifiées dans le modèle par un rectangle englobant jaune. Si vous voulez modifier une propriété liée par modèle, commencez par cliquer sur le bouton Options avancées  en regard de la propriété, puis cliquez sur Réinitialiser.

  

• Vous pouvez ajouter des états et groupes d’états personnalisés au modèle d’un contrôle système. Vous pouvez aussi créer un contrôle utilisateur personnalisé, puis définir des états personnalisés et ajouter du code pour modifier les états en fonction des interactions de l'utilisateur.

  Pour plus d’informations, voir les rubriques suivantes :

  • Créer un contrôle utilisateur dans votre projet

  • Définir différents états visuels et durées de transition pour un contrôle utilisateur

  • Modifier des états en réponse à l’interaction de l’utilisateur

• Si vous avez des problèmes à afficher votre application dans un navigateur, il se peut que la version d'exécution appropriée de Silverlight ne soit pas installée sur votre poste.

  Pour plus d'informations, voir Installer les outils et la visionneuse d'exécution Silverlight.

Étapes suivantes

• Vous pouvez modifier le temps nécessaire au développement du bouton lorsque le pointeur de la souris passe au-dessus. Pour plus d’informations, voir Modifier la durée de transition entre les changements d’états.

• Vous pouvez ajouter des animations, par exemple faire tourner le bouton lorsque le pointeur de la souris passe au-dessus. Pour plus d’informations, voir Ajouter une animation qui sera passée après une modification d’état.

• Vous pouvez appliquer ce modèle à un autre bouton dans votre projet, ou dessiner un nouveau bouton dont le modèle est déjà affecté. Pour plus d’informations, voir Appliquer une ressource de style.

Voir aussi

Tâches

Dessiner un contrôle dans votre projet
Modifier la durée de transition entre les changements d’états
Créer un modèle réutilisable pour appliquer un style à un contrôle système

Copyright © 2011 Microsoft Corporation. Tous droits réservés.