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 tout contrôle système inclus avec Microsoft Expression Blend 2 ou tout contrôle Silverlight 2 personnalisé importé héritant de la classe Control.

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

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

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 des parties du contrôle (Modèle), puis cliquez sur Modifier le modèle. 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) apparaissent sous États dans le panneau Interaction. Les états sont contenus dans des groupes d’états (tels que CommonStates et FocusStates).

   

   Les parties du modèle apparaissent sous Objets et chronologie. C’est l’apparence de ces parties que vous pouvez modifier pour un état sélectionné.

   

4. Cliquez sur MouseOver sous É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é. Sous Objets et chronologie, les parties du modèle dont des propriétés sont définies différemment par rapport à quand 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 [Grille] sous Objets et chronologie.

   Conseil :
   La Grille  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 Vue d’ensemble de la disposition et Panneau 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 orange. Si vous voulez modifier une propriété liée par modèle, commencez par cliquer sur le bouton Options de propriétés 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 d’interactions de l’utilisateur. Pour plus d’informations, voir Créer un contrôle utilisateur dans votre projet Silverlight 2, Définir différents états visuels et durées de transition pour un contrôle utilisateur et Modifier l’état en réponse à une interaction utilisateur.

• Si vous avez du mal à afficher votre application dans un navigateur, il se peut que la bonne visionneuse d’exécution Silverlight 2 ne soit pas installée sur votre poste. Pour plus d’informations, voir Installer les outils et la visionneuse d’exécution Silverlight 2.

É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 dans les contrôles système.

• 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

Concepts

Dessiner un contrôle dans votre projet Silverlight 2

Modifier la durée de transition entre les changements d’états dans les contrôles système