Partager via

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

  • Article

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 Dd185503.xtlink_newWindow(fr-fr,Expression.40).png sur MSDN.

NoteRemarque :

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 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 une méthode de 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.

    Dd185503.74c3b2ef-32ab-4aaa-839d-852741d9b2c2(fr-fr,Expression.40).png

  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 Dd185503.6c67bb3b-e8a2-4a63-bad5-54d5c15b04dd(fr-fr,Expression.40).png pour basculer de l’affichage propriétés à l’affichage événements.

    tip noteConseil :

    Pour faire revenir le panneau Propriétés à l’affichage propriétés, cliquez sur Propriétés Dd185503.cee1494c-ef95-4dd4-9fbc-9d02edfa78b7(fr-fr,Expression.40).png.

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

    Dd185503.98d2b5bb-eedc-4a13-bf87-7b7514868f87(fr-fr,Expression.40).png

    tip noteConseil :

    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 Dd185503.xtlink_newWindow(fr-fr,Expression.40).png 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 2010, vous ne disposez peut-être pas des outils Silverlight pour Visual Studio 2010. Installez les outils, puis essayez d’entrer un nom dans le panneau Événements dans Expression Blend.

    Pour plus d’informations, voir Microsoft Silverlight Tools pour Visual Studio 2010 Dd185503.xtlink_newWindow(fr-fr,Expression.40).png.

  • 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 Dd185503.0d8b8d29-1af9-418f-8741-be3097d76eab(fr-fr,Expression.40).png) 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

Copyright © 2011 Microsoft Corporation. Tous droits réservés.