Procédure pas à pas : utilisation d'un DesignInstance à lier aux données dans le concepteur

[Cette documentation constitue un aperçu et pourra faire l'objet de modifications dans les versions ultérieures. Des rubriques vierges sont incluses en tant qu'espaces réservés.]

Cette procédure pas à pas vous indique comment utiliser le Concepteur WPF pour Visual Studio pour créer des liaisons de données au moment du design pour un contexte de données assigné au moment de l'exécution. Pour créer la liaison de données, vous utilisez le générateur de liaisons de données pour créer un contexte de données au moment du design spécial et affecter la propriété DesignInstance à un type d'objet métier. DesignInstance est une propriété au moment du design.

Dans cette procédure pas à pas, vous allez effectuer les tâches suivantes :

• créer le projet ;

• Créer un objet métier de la classe Customer.

• Lier les données d'un contrôle TextBox à une instance au moment du design de la classe Customer dans un contexte de données.

Lorsque vous aurez terminé, vous disposerez d'une zone de texte liée au moment de l'exécution à un objet métier. La liaison de données est définie dans le WPF Designer.

Composants requis

Pour exécuter cette procédure pas à pas, vous devez disposer des composants suivants :

• Visual Studio 2010.

Création du projet

La première étape consiste à créer un projet d'application WPF et à activer les propriétés au moment du design.

Pour créer le projet

1. Créez un projet d'application WPF en Visual Basic ou Visual C# nommé DataBindingDemo. Pour plus d'informations, consultez Comment : créer un projet d'application WPF.

   MainWindow.xaml s'ouvre dans le WPF Designer.

2. En mode Design, cliquez sur la balise de taille racine ( ) dans l'angle inférieur droit de la MainWindow pour affecter à la taille racine la taille automatique.

   Dans la vue XAML, le concepteur ajoute le mappage d'espaces de noms d, qui permet l'accès aux attributs au moment du design tels que DesignHeight et DesignInstance.

Création de l'objet métier

Créez ensuite l'objet métier. L'objet métier est une classe Customer simple qui possède les propriétés FirstName et LastName.

Pour créer l'objet métier

1. Ajoutez une nouvelle classe nommée Customer au projet. Pour plus d'informations, consultez How to: Add New Project Items.

2. Remplacez le code généré automatiquement par le code suivant.

   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Text;
   
   namespace DataBindingDemo
   {
       public class Customer
       {   
           public string FirstName { get; set; }
           public string LastName { get; set; }
       }
   }
   

Définition du contexte de données au moment du design

Pour créer des liaisons de données à l'aide du générateur de liaisons de données, vous créez un contexte de données au moment du design spécial et affectez la propriété DesignInstance au type d'objet métier.

Pour définir le contexte de données au moment du design

1. Ouvrez MainWindow.xaml dans le WPF Designer.

2. Dans la vue XAML, ajoutez le mappage d'espaces de noms suivant à la balise d'ouverture de MainWindow. Pour plus d'informations, consultez Comment : importer un espace de noms en XAML.

   xmlns:local="clr-namespace:DataBindingDemo"
   

3. Remplacez la balise d'ouverture de l'élément Grid par le code XAML suivant.

   <Grid d:DataContext="{d:DesignInstance Type=local:Customer}" Name="_grid">
   

   Ce code XAML établit un contexte de données au moment du design et met la classe Customer à disposition pour la création de liaisons de données.

4. Générez la solution.

Création de la liaison de données

Vous pouvez maintenant créer des liaisons de données avec l'objet métier Customer à l'aide du générateur de liaisons de données. La procédure suivante indique comment lier un contrôle TextBox à la propriété FirstName d'un objet Customer.

Pour créer la liaison de données

1. Depuis la Boîte à outils, faites glisser un contrôle TextBox sur Window.

2. Dans la fenêtre Propriétés, accédez par défilement à la propriété Text.

3. Au niveau du bord de la colonne de gauche, cliquez sur le marqueur de propriété ().

   Un menu s'affiche.

   Conseil

   Vous pouvez également cliquer avec le bouton droit sur la ligne pour afficher le menu.

4. Cliquez sur Appliquer la liaison de données.

   Le générateur de liaison de données apparaît avec le volet Chemin ouvert.

   

5. Cliquez sur FirstName et appuyez sur la touche Entrée.

   Dans la vue XAML, la propriété Text possède une liaison de données avec la propriété FirstName du type Customer.

Définition du contexte de données au moment de l'exécution

Pour finir, vous assignez le contexte de données au moment de l'exécution. La liaison de données que vous avez créée au moment du design fonctionne au moment de l'exécution sans modification de XAML ou de code.

Pour définir le contexte de données au moment de l'exécution

1. Ouvrez MainWindow.xaml.cs ou MainWindow.xaml.vb dans l'éditeur de code.

2. Remplacez le constructeur MainWindow généré automatiquement par le code suivant.

   public MainWindow()
   {
       InitializeComponent();
   
       Customer c = new Customer();
       c.FirstName = "Brenda";
       c.LastName = "Diaz";
   
       this._grid.DataContext = c;
   }
   

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

   La zone de texte affiche le prénom de l'objet Customer créé au moment de l'exécution.

   

Étapes suivantes

• Vous pouvez créer une liaison avec des exemples de données au moment du design, ce qui vous permet de construire un comportement de disposition correct au moment de l'exécution lorsque vos données réelles sont disponibles. Pour plus d'informations, consultez Procédure pas à pas : utilisation d'exemples de données dans le Concepteur WPF.

Voir aussi

Référence

DataContext

Concepts

Attributs au moment du design

Autres ressources

Liaison de données dans le Concepteur WPF