Procédure pas à pas : utilisation d'exemples de données dans le Concepteur WPF

Article
08/10/2011

Cette procédure pas à pas vous indique comment utiliser les exemples de données du Concepteur WPF pour Visual Studio pour créer des liaisons de données au moment du design. Avec les exemples de données affichés au moment du design, vous pouvez vous assurer que votre disposition se comporte correctement au moment de l'exécution. Pour rendre les exemples de données accessibles aux contrôles dans le concepteur, vous appliquez l'action de génération DesignData au fichier d'exemples de données et référencez ce fichier dans l'attribut au moment du design DesignData.

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.
Créer des fichiers XAML qui contiennent les exemples de données.
Lier les contrôles TextBox et DataGrid aux exemples de données.

Lorsque vous aurez terminé, les contrôles TextBox et DataGrid seront liés au moment du design aux exemples de données. 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 dans Visual C#, nommé DesignDataDemo. 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 propriétés au moment du design telles que DesignInstance et DataContext.

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, LastName et CustomerID.

Pour créer l'objet métier

Ajoutez une nouvelle classe nommée Customer au 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 DesignDataDemo
{
    // The Customer class defines a simple Customer business object.
    class Customer
    {
        // Default constructor is required for usage as sample data 
        // in the WPF and Silverlight Designer.
        public Customer() {}

        public string FirstName { get; set; }
        public string LastName { get; set; }
        public Guid CustomerID { get; set; }
        public int Age { get; set; }
    }

    // The CustomerCollection class defines a simple collection
    // for Customer business objects.
    class CustomerCollection : List<Customer>
    {
        // Default constructor is required for usage in the WPF Designer.
        public CustomerCollection() {}
    }
}

Création des fichiers de données au moment du design

Définissez les exemples de données au moment du design en créant des instances de vos objets métier dans un fichier XAML. Spécifiez que le fichier XAML contient les exemples de données en affectant à l'Action de génération la valeur DesignData.

Le concepteur remplace les instances que vous déclarez dans le fichier XAML par les types au moment du design générés automatiquement qui ont les mêmes propriétés que vos exemples de types. Cela élimine des comportements au moment de l'exécution, tels que des requêtes de base de données, qui pourraient interférer avec le concepteur. Ces propriétés sont en lecture seule et vous les définissez dans les exemples de fichiers de données.

Utilisez l'action de génération DesignDataWithDesignTimeCreatableTypes pour remplacer ce comportement et indiquez que le concepteur créera des instances de vos exemples de types de données.

Pour créer les fichiers de données au moment du design

Dans l'Explorateur de solutions, ajoutez un nouveau dossier nommé DesignData au projet.
Dans le dossier DesignData, ajoutez un nouveau fichier texte nommé SampleCustomer.xaml.

SampleCustomer.xaml s'ouvre dans la vue XAML.

Notes

Vous pouvez également utiliser un dictionnaire de ressources.

Ajoutez le code XAML suivant.

<local:Customer 
    xmlns:local="clr-namespace:DesignDataDemo" 
    FirstName="Syed" LastName="Abbas" Age="23" CustomerID="E7181DC6-3F9E-45A4-A5F7-AC0B119D1FD8" />

Dans le dossier DesignData, ajoutez un nouveau fichier texte nommé SampleCustomers.xaml.

SampleCustomers.xaml s'ouvre dans la vue XAML.

Ajoutez le code XAML suivant.

    <local:CustomerCollection 
    xmlns:local="clr-namespace:DesignDataDemo" >

    <local:Customer FirstName="Syed" LastName="Abbas" Age="23" CustomerID="E7181DC6-3F9E-45A4-A5F7-AC0B119D1FD8" />
    <local:Customer FirstName="Brenda" LastName="Diaz" Age="55" CustomerID="BB638D72-8B72-495A-B0F9-79F37964BBAE" />
    <local:Customer FirstName="Lori" LastName="Kane" Age="17" CustomerID="B168D811-5548-4D28-8171-318F9A4D7219" />

</local:CustomerCollection>

Dans l'Explorateur de solutions, sélectionnez les deux fichiers d'exemples de données.
Dans la fenêtre Propriétés, affectez à l'Action de génération la valeur DesignData, vérifiez que Copier dans le répertoire de sortie a la valeur Ne pas copier et effacez le champ Outil personnalisé.

Notes

Pour l'action de génération, vous pouvez également sélectionner DesignDataWithDesignTimeCreatableTypes.

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

Pour créer un contexte de données au moment du design qui fournit des exemples de données, vous utilisez l'attribut au moment du design d:DataContext avec l'extension de balisage d:DesignData.

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 Window. Pour plus d'informations, consultez Comment : importer un espace de noms en XAML.
```
xmlns:local="clr-namespace:DesignDataDemo"
```
Générez la solution.
En mode Design, ajoutez un quadrillage horizontal près du centre du contrôle Grid pour définir deux lignes. Pour plus d'informations, consultez Comment : ajouter des lignes et des colonnes à une grille.
Depuis la boîte à outils, faites glisser un contrôle StackPanel dans la ligne du haut.
Dans la vue XAML, remplacez l'élément StackPanel par le code XAML suivant.
```
<StackPanel d:DataContext="{d:DesignData Source=./DesignData/SampleCustomer.xaml}" Grid.Row="0"></StackPanel>
```
Ce code XAML établit un contexte de données au moment du design pour le StackPanel et ses contrôles enfants. Il met également les exemples de données à disposition pour la liaison de données.

Création d'une liaison avec une instance unique d'exemples de données

Vous pouvez créer une liaison vers toute propriété de l'instance Customer du fichier SampleCustomer.xaml. La procédure suivante indique comment lier la propriété FirstName à un contrôle TextBox à l'aide du générateur de liaisons de données. Pour plus d'informations, consultez Procédure pas à pas : création d'une liaison de données à l'aide du Concepteur WPF.

Pour lier un contrôle TextBox aux exemples de données

À partir de la boîte à outils, faites glisser un contrôle TextBox dans le contrôle StackPanel.
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 la propriété FirstName.
En mode Design, notez que le contrôle TextBox affiche la valeur FirstName spécifiée dans le fichier SampleCustomer.xaml.

Création d'une liaison avec une collection d'exemples de données

La procédure suivante indique comment lier un contrôle DataGrid à une collection d'objets Customer dans le fichier SampleCustomers.xaml.

Pour lier un contrôle DataGrid à une collection d'exemples de données

À partir de la boîte à outils, faites glisser un contrôle DataGrid dans la deuxième ligne de la grille et dimensionnez-le de façon à remplir la ligne.
Dans la vue XAML, remplacez l'élément DataGrid par le code XAML suivant.
```
<DataGrid Grid.Row="1" d:DataContext="{d:DesignData Source=./DesignData/SampleCustomers.xaml}" />
```
Ce code XAML établit un contexte de données au moment du design pour la DataGrid et met les exemples de données à disposition pour la liaison de données.
Sélectionnez la DataGrid.
Dans la fenêtre Propriétés, accédez par défilement à la propriété ItemsSource.
Au niveau du bord de la colonne de gauche, cliquez sur le marqueur de propriété ().
Cliquez sur Appliquer la liaison de données.

Le générateur de liaison de données apparaît avec le volet Chemin ouvert.
En mode Design, notez que le contrôle DataGrid est rempli avec les instances Customer du fichier SampleCustomers.xaml.