Modifier l’état en réponse à une interaction 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.

Remarque :
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

1. Si vous n’avez pas déjà créé de groupes d’état ou des états, vous pouvez Définir différents états visuels et durées de transition 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).

   

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

3. Sous 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 le bouton É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 le bouton 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 avoir appuyé sur Entrée, Microsoft Expression Blend ouvre votre projet dans Microsoft Visual Studio 2008 s’il est installé. Si vous ne disposez pas d’un éditeur de code installé, Expression Blend copie le code pour la méthode de gestionnaire d’événements dans le Presse-papiers pour que vous puissiez ouvrir le fichier code-behind pour le contrôle utilisateur dans un éditeur de texte et coller le code à partir du Presse-papiers.

   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 sur l’interopérabilité entre Visual Studio 2008 et Expression Blend, 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 boldfaced 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 Microsoft Silverlight Tools pour Visual Studio 2008 installés. Installez les outils, puis essayez d’entrer un nom dans le panneau Événements dans Expression Blend.

• 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), ouvrir votre document de démarrage (généralement Page.xaml), ouvrir la Bibliothèque de composants , sélectionner votre contrôle utilisateur dans l’onglet Contrôles utilisateur, puis dessiner 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 Microsoft Silverlight correcte installée. Pour plus d’informations, voir Installer les outils et la visionneuse d’exécution Silverlight 2.

Étapes suivantes

• 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.