Définir différents états visuels et durées de transition pour un contrôle utilisateur
Lorsque vous créez votre propre contrôle utilisateur, vous pouvez ajouter des états personnalisés et des groupes d’états pour définir une apparence différente pour chaque état de votre contrôle utilisateur. Par exemple, si votre contrôle utilisateur représente une carte de lecture, vous souhaiterez peut-être un état FaceUp et FaceDown.
.gif "Remarque") Remarque : |
|---|
Dans un projet Silverlight, lorsque vous modifiez le modèle d’un contrôle système, tel qu’un bouton, les états et les groupes d’états par défaut sont déjà présents. Vous ne pouvez pas ajouter de nouveaux groupes d’états ou ajouter des états. |
Pour définir un groupe d’état pour votre contrôle utilisateur
Si vous n'avez pas encore de contrôle utilisateur, vous pouvez en créer un dans votre projet et ouvrir le fichier XAML à modifier.
Pour plus d’informations, voir Créer un contrôle utilisateur dans votre projet.
.gif "Conseil")
Conseil :Vous pouvez également définir des groupes d’états pour votre document principal (généralement Page.xaml).
Le volet États affiche l’apparence par défaut des objets dans votre contrôle utilisateur. Vous pouvez sélectionner Base à chaque fois que vous souhaitez quitter le mode enregistrement de l’état, quand vous souhaitez ajouter des objets supplémentaires à votre document par exemple.
.png "Dd185499.2daa57d7-1466-43ca-86e8-960aaa384148(FR-FR,Expression.30).png")
Sous États, cliquez sur Ajouter le groupe d’état
.png "Dd185499.15176e71-c966-415f-8fc6-18d8263cc140(FR-FR,Expression.30).png")
.Un nouveau groupe d’état est ajouté, le nom est mis en surbrillance et vous pouvez entrer un nouveau nom.
.png "Dd185499.b3335795-6267-4f9d-8fa2-618c40ff2f32(FR-FR,Expression.30).png")
Vous pouvez désormais ajouter des états au groupe d’état ou ajouter des groupes d’états supplémentaires.
Pour ajouter des états à un groupe d’états
En regard du nom d’un groupe d’état sous États, cliquez sur Ajouter l’état
.png "Dd185499.d7b5fc2f-1470-48fc-bd81-b09bf261168f(FR-FR,Expression.30).png")
.Un nouvel état est ajouté au groupe d’état, le nom est mis en surbrillance et vous pouvez entrer un nouveau nom.
.png "Dd185499.91a3aada-a295-40c0-bed8-c7bc572df7d9(FR-FR,Expression.30).png")
Sélectionnez l’état pour activer l’enregistrement de l’état. Les modifications apportées à l’apparence des objets dans votre document seront enregistrées pour l’état sélectionné.
.png "Dd185499.59996960-c66b-4be0-abc9-5509c79f3a5d(FR-FR,Expression.30).png")
Conseil :Lorsque vous spécifiez des états et des groupes d’états, considérez tous les états visuels que vous souhaitez voir affichés pour votre contrôle utilisateur, puis identifiez les états que vous ne souhaitez pas afficher simultanément. Vous devez répertorier ces états dans le même groupe d’état étant donné qu’un seul état dans un groupe d’état peut être affiché en même temps. Par exemple, l’image suivante affiche un contrôle utilisateur qui représente une carte dans un jeu de cartes. Deux groupes d’états sont définis : MouseInteraction et SideDisplayed. Le groupe d’état MouseInteraction comprend les états pour Click, MouseOver et Normal, états qui ne sont pas affichés simultanément. Le groupe d’état SideDisplayed comprend les états qui affichent le recto de la carte (FaceUp) et le verso (FaceDown). Vous pouvez disposer d’une carte sur son recto et passer le pointeur de la souris dessus simultanément, étant donné que ces états sont dans des groupes d’états différents.
.png "Dd185499.4fecf399-1962-4668-86e7-efe1a485cbc1(FR-FR,Expression.30).png")
Pour définir le temps de transition pour votre contrôle utilisateur pour passer d’un état à l’autre
Pour définir le temps de transition pour votre contrôle utilisateur pour passer d’un état à l’autre dans un groupe d’état, cliquez dans la zone de texte Transition par défaut et entrer une durée. Cette opération définit le temps nécessaire à votre contrôle utilisateur pour passer d’un état à l’autre dans le groupe d’états.
.png "Dd185499.d1eabf30-62d2-47ae-a52b-453c702b9358(FR-FR,Expression.30).png")
Pour substituer le temps de transition par défaut pour des transitions spécifiques, cliquez sur Ajouter une transition
.png "Dd185499.2fe2c349-41aa-4cc0-b1d3-3ff7d5aed33d(FR-FR,Expression.30).png")
en regard d’un état, puis sélectionnez la transition spécifique dans la liste qui apparaît. L’élément de liste mis en surbrillance par le pointeur de la souris dans l’image suivante indique « de l’état Click vers tout autre état » où la flèche correspond à « vers » et l’étoile (*) à « tout autre état »..png "Dd185499.1ed8d611-1ce5-4101-ad73-54aa166c4e9a(FR-FR,Expression.30).png")
Cliquez dans la zone de texte Durée de la transition et entrez une nouvelle durée.
.png "Dd185499.de14af5e-81fd-4f47-a668-41552a565714(FR-FR,Expression.30).png")
Dépannage
- Si vous rencontrez des problèmes lors de la génération de votre application, vous ne disposez peut-être pas de la version de Silverlight correcte installée. Pour plus d’informations, voir Installer les outils et la visionneuse d'exécution Silverlight.
Étapes suivantes
Vous pouvez faire répondre votre contrôle utilisateur aux clics de souris. Pour plus d’informations, voir Modifier des états en réponse à l’interaction de l’utilisateur.
Vous pouvez ajouter une animation, telle que le pivotage du bouton lorsque le pointeur de la souris passe dessus. Pour plus d’informations, voir Ajouter une animation qui sera passée après une modification d’état.
Vous pouvez voir des scénarios réels qui utilisent des états et des groupes d’états dans les didacticiels vidéo sur le site Web de la communauté d’Expression.