Procédure pas à pas : effectuer une liaison de données dans le concepteur XAML

Dans le concepteur XAML, vous pouvez définir des propriétés de liaison de données à l'aide de la planche graphique et de la fenêtre Propriétés. L'exemple dans cette procédure pas à pas montre comment lier des données à un contrôle. Plus précisément, la procédure pas à pas montre comment créer une classe de panier d’achat simple dotée d’une propriété DependencyProperty nommée ItemCount, puis lier la propriété ItemCount à la propriété Text d’un contrôle TextBlock.

Pour créer une classe à utiliser comme source de données

1. Dans le menu Fichier, choisissez Nouveau>Projet.

2. Dans la boîte de dialogue Nouveau projet, choisissez le nœud Visual C# ou Visual Basic, développez le nœud Bureau Windows, puis choisissez le modèle Application WPF.

3. Nommez le projet BindingTest, puis choisissez le bouton OK.

4. Ouvrez le fichier MainWindow.xaml.cs (ou MainWindow.xaml.vb) et ajoutez le code suivant. En C#, ajoutez le code dans l'espace de noms BindingTest (avant la dernière parenthèse fermante du fichier). En Visual Basic, ajoutez simplement la nouvelle classe.

   C#

   public class ShoppingCart : DependencyObject
   {
       public int ItemCount
       {
           get { return (int)GetValue(ItemCountProperty); }
           set { SetValue(ItemCountProperty, value); }
       }
   
       public static readonly DependencyProperty ItemCountProperty =
            DependencyProperty.Register("ItemCount", typeof(int),
            typeof(ShoppingCart), new PropertyMetadata(0));
   }
   

   VB

   Public Class ShoppingCart
       Inherits DependencyObject
   
       Public Shared ReadOnly ItemCountProperty As DependencyProperty = DependencyProperty.Register(
            "ItemCount", GetType(Integer), GetType(ShoppingCart), New PropertyMetadata(0))
       Public Property ItemCount As Integer
           Get
               ItemCount = CType(GetValue(ItemCountProperty), Integer)
           End Get
           Set(value As Integer)
               SetValue(ItemCountProperty, value)
           End Set
       End Property
   End Class
   

   Ce code définit la valeur 0 comme nombre d’éléments par défaut à l’aide de l’objet PropertyMetadata.

5. Dans le menu Fichier, choisissez Générer>Générer la solution.

Pour lier la propriété ItemCount à un contrôle TextBlock

1. Dans l’Explorateur de solutions, ouvrez le menu contextuel pour MainWindow.xaml, puis choisissez Concepteur de vues.

2. Dans la boîte à outils, choisissez un contrôle Grid et ajoutez-le au formulaire.

3. Une fois l’élément Grid sélectionné, dans la fenêtre Propriétés, choisissez le bouton Nouveau situé à côté de la propriété DataContext.

4. Dans la boîte de dialogue Sélectionner un objet, vérifiez que la case Afficher tous les assemblys est décochée, choisissez ShoppingCart sous l’espace de noms BindingTest, puis le bouton OK.

   L’illustration suivante montre la boîte de dialogue Sélectionner un objet avec ShoppingCart sélectionné.

   

5. Dans la boîte à outils, choisissez un contrôle TextBlock pour l’ajouter au formulaire.

6. Une fois le contrôle TextBlock sélectionné, dans la fenêtre Propriétés, choisissez le marqueur de propriété à droite de la propriété Text, puis Créer une liaison de données. (Le marqueur de propriété se présente comme une petite case.)

7. Dans la boîte de dialogue Créer une liaison de données, dans la zone Chemin d’accès, choisissez la propriété ItemCount : (int32), puis le bouton OK.

   L’illustration suivante montre la boîte de dialogue Créer une liaison de données avec la propriété ItemCount sélectionnée.

   

8. Appuyez sur F5 pour exécuter l'application.

   Le contrôle TextBlock doit afficher la valeur par défaut 0 sous forme de texte.

Conseil

Pour plus d’informations sur la liaison de données, consultez Lier des contrôles à des données dans Visual Studio.

Contenu connexe

• Créer une IU à l’aide du concepteur XAML
• Boîte de dialogue Ajouter un convertisseur de valeurs