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

Lorsque vous créez votre propre contrôle utilisateur, vous pouvez ajouter des états et des groupes d’état pour modifier l’apparence de votre contrôle utilisateur en fonction de l’état dans lequel il se trouve. Pour modifier ces états en réponse à l’interaction de l’utilisateur (telle qu’un clic de souris), ajoutez les méthodes de gestionnaire d’événements pour appeler la méthode GoToState.

Pour plus d'informations, voir GoToState sur MSDN.

Remarque :

Dans un projet Microsoft Silverlight, lorsque vous modifiez le modèle d’un contrôle système, tel qu’un bouton, les états par défaut sont déjà définis, en plus de la réponse au contrôle de l’interaction de l’utilisateur. Vous ne pouvez ni ajouter ni supprimer les états par défaut. Cependant, vous pouvez modifier l’apparence du contrôle dans ces différents états. Utilisez la procédure suivante pour modifier les états.

Pour modifier l’état en réponse à un clic de souris

Pour changer d'état, vous pouvez utiliser le comportement GoToStateAction ou écrire un code dans un gestionnaire d'événements.

Pour plus d’informations sur l'utilisation d'un comportement, voir Ajouter un comportement à un objet.

La procédure suivante explique l'ajout d'une méthode de gestionnaire d'événement permettant de modifier l'état.

1. Si vous n'avez pas encore créé de groupes d'états et d'états, vous pouvez définir différents états visuels et transitions pour un contrôle utilisateur. Par exemple, l’image suivante affiche un contrôle utilisateur qui représente une carte dans un jeu de cartes. Le groupe d’état SideDisplayed comprend un état qui affiche le recto de la carte (FaceUp) et un état qui affiche le verso de la carte (FaceDown).

   Pour plus d’informations, voir Définir différents états visuels et durées de transition pour un contrôle utilisateur.

   

2. Sous États, sélectionnez Base pour désactiver l’enregistrement de l’état.

3. Dans le panneau Objets et chronologie, sélectionnez l’objet [UserControl] pour connecter un événement qui répondra à l’action sur toute la surface du contrôle utilisateur.

4. Dans le panneau Propriétés, cliquez sur Événements  pour basculer de l’affichage propriétés à l’affichage événements.

   Conseil :
   Pour faire revenir le panneau Propriétés à l’affichage propriétés, cliquez sur Propriétés .

5. En regard de l’événement MouseLeftButtonDown, entrez un nom pour la méthode de gestionnaire d’événements, tels que « goClick ».

   

   Conseil :
   Vous pouvez également double-cliquer dans la zone de texte de l’événement pour générer un nom par défaut pour la méthode de gestionnaire d’événements.

   Après que vous avez appuyé sur ENTRÉE, Microsoft Expression Blend ouvre le fichier code-behind pour le contrôle utilisateur dans un éditeur de code et colle le code pour la méthode de gestionnaire d'événements.

   private void goClick(object sender, MouseButtonEventArgs e)
   {
   
   }
   

   Private Sub goClick(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs)
   
   End Sub
   

   Pour plus d’informations, voir Modifier un fichier code-behind.

6. Pour que votre contrôle utilisateur change d’état, appelez la méthode GoToState avec le nom de l’état. Par exemple, collez le code suivant dans votre fichier code-behind :

   private bool isFaceUp = false;  
   
   private void goClick(object sender, MouseButtonEventArgs e)
   {
     if (isFaceUp)  
     {  
       VisualStateManager.GoToState(this, "FaceDown", true);  
     }  
     else  
     {  
       VisualStateManager.GoToState(this, "FaceUp", true);  
     }  
     isFaceUp = !isFaceUp;  
   }
   

   Private isFaceUp As Boolean = False  
   
   Private Sub goClick(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs)
     If isFaceUp Then  
       VisualStateManager.GoToState(Me, "FaceDown", True)  
     Else  
       VisualStateManager.GoToState(Me, "FaceUp", True)  
     End If  
     isFaceUp = Not (isFaceUp)  
   End Sub
   

7. Générez votre projet (Ctrl+Maj+B).

8. Testez votre projet (F5) puis cliquez sur votre contrôle utilisateur pour le voir changer d’état.

Dépannage

• Si vous obtenez l'erreur « Impossible de modifier le fichier code-behind. La classe suivante est introuvable » lorsque vous tapez un nom dans le panneau Événements dans Expression Blend, vous devrez basculer dans votre éditeur de code externe (généralement Microsoft Visual Studio) pour recharger la solution. Le rechargement inclura les nouveaux fichiers qui définissent la classe manquante.

• Si vous obtenez l’erreur indiquant que « le chargement de la solution ne peut pas être effectué » dans Visual Studio 2008, vous ne disposez peut-être pas des outils Silverlight pour Visual Studio 2008 installés. Installez les outils, puis essayez d’entrer un nom dans le panneau Événements dans Expression Blend.

  Pour plus d’informations, voir Microsoft.

• Si vous ne voyez pas votre contrôle utilisateur lorsque vous testez votre projet (F5) et que la fenêtre du navigateur n’indique pas d’erreur, vous n’avez peut-être pas dessiné une instance de votre contrôle utilisateur dans le document de démarrage. Le document de démarrage est le premier document qui apparaît lorsque vous exécutez votre application. Si vous avez créé un contrôle utilisateur dans un document séparé, vous devez générer votre projet (Ctrl+Maj+B), ouvrez votre document de démarrage (généralement Page.xaml), ouvrez le panneau Composants, (cliquez sur Composants ) sélectionnez votre contrôle utilisateur dans la catégorie Projet, puis dessinez le contrôle utilisateur sur la planche graphique.

• Si vous rencontrez des problèmes lorsque vous générez 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 ajouter une animation, telle que le pivotage du bouton lorsque le pointeur 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.