Comment lier des données dans le concepteur XAML

Dans le concepteur XAML, vous pouvez définir les 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 rubrique montre comment lier des données à un contrôle. Spécifiquement, la procédure indique comment créer une classe de panier d'achat simple dotée d'une propriété DependencyProperty nommée ItemCount, puis comment 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. Créez un projet C# ou Visual Basic dans le modèle Application vide.

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

   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));
   }
   

   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.

   Conseil

   Dans Visual Studio, vous pouvez ajouter un code stub pour une propriété de dépendance en tapant propdp dans la classe ShoppingCart, puis en appuyant sur la touche TAB.

3. Cliquez sur Générer > Générer la solution.

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

1. Cliquez avec le bouton droit sur MainPage.xaml, puis cliquez sur Concepteur de vues.

2. Dans la fenêtre Structure du document, sélectionnez le panneau Grille racine, qui apparaît en tant que [Grille] dans la fenêtre.

3. Une fois l'élément Grid sélectionné, cliquez sur le bouton Nouveau en regard de la propriété DataContext dans la fenêtre Propriétés.

4. Dans la boîte de dialogue Sélectionner un objet, assurez-vous que l'option Afficher tous les assemblys est désactivée, sélectionnez ShoppingCart sous l'espace de noms projectName, puis cliquez sur OK.

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

   

5. Dans la Boîte à outils, double-cliquez sur un contrôle TextBlock pour l'ajouter à la planche graphique.

6. Une fois le contrôle TextBlock sélectionné, cliquez sur le marqueur de propriété situé à droite de la propriété Text sous Propriétés communes dans la fenêtre Propriétés. (Le marqueur de propriété se présente comme une petite case.)

7. Cliquez sur Créer une liaison de données dans le menu résultant.

8. Avec le type de liaison Contexte de données (valeur par défaut dans la liste Type de liaison), sélectionnez la propriété ItemCount dans la zone Chemin d'accès, puis cliquez sur 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.

   

9. Appuyez sur F5 pour démarrer l'application.

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

Voir aussi

Référence

Ajouter un convertisseur de valeurs, boîte de dialogue

Concepts

Création d'une interface utilisateur à l'aide du concepteur XAML