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

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 la durée de transition entre les changements d’états des contrôles système en modifiant une copie du modèle du contrôle.

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.

Conseil :
Vous pouvez également modifier les états et les durées de transition des contrôles utilisateur. Pour plus d’informations, voir Définir différents états visuels et durées de transition pour un contrôle utilisateur.

Pour modifier la durée de transition entre les é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).

   

   En regard de CommonStates, se trouve une zone de texte avec la valeur de 0 seconde (« 0s »). Il s’agit de la durée de transition par défaut pour toutes les transitions entre les états dans le groupe d’états. Par exemple, il faut 0 seconde pour passer de tout état à l’état Normal. Vous pouvez modifier cette durée de transition par défaut.

   

   Cette valeur est remplacée par la valeur « 0,1s » lors du passage à l’état MouseOver et à l’état Pressed. L’étoile et la flèche indiquent « de tout état à celui-ci ».

   

4. Cliquez sur le bouton Ajouter une transition  pour l’état MouseOver sous États, puis cliquez sur la transition MouseOver à Normal.

   

5. Sur la nouvelle ligne pour la transition MouseOver à Normal, passez la valeur de la zone de texte de « 0s » à « 0,5s ».

   

6. 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 au-dessus du bouton pour voir à quelle vitesse il retourne à son état précédent lorsque la souris quitte le bouton.

Dépannage

• 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 changer l’apparence de votre bouton dans différents états. Pour plus d’informations, voir Modifier l’apparence d’un contrôle système dans différents é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

Concepts

Dessiner un contrôle dans votre projet Silverlight 2

Ajouter une animation qui sera passée après une modification d’état