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

Article
08/10/2011

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 Concepteur WPF.

Notes

Les boîtes de dialogue et les commandes de menu qui s'affichent peuvent être différentes de celles qui sont décrites dans l'aide, en fonction de vos paramètres actifs ou de l'édition utilisée. Pour modifier vos paramètres, choisissez Importation et exportation de paramètres dans le menu Outils. Pour plus d'informations, consultez Utilisation des paramètres.

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

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 Concepteur WPF.
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.

Notes

Le type d'objet métier n'a pas besoin de pouvoir être créé pour être utilisé dans la liaison de données au moment du design. Par exemple, vous pouvez créer une liaison avec une classe abstraite au moment du design.

Pour créer l'objet métier

Ajoutez une nouvelle classe nommée Customer au projet. Pour plus d'informations, consultez Comment : ajouter de nouveaux éléments de projet.

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

Ouvrez MainWindow.xaml dans le Concepteur WPF.
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"
```
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.
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

Depuis la Boîte à outils, faites glisser un contrôle TextBox sur Window.
Dans la fenêtre Propriétés, accédez par défilement à la propriété Text.
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.
Cliquez sur Appliquer la liaison de données.

Le générateur de liaison de données apparaît avec le volet Chemin ouvert.
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

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

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

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

Autres ressources

Attributs au moment du design

Liaison de données dans le Concepteur WPF

Partager via