Créer une liaison de données liste-détails

Un modèle Liste-Détails comprend deux parties :

• Une vue Liste qui affiche une liste d'éléments, habituellement une collection de données.

• Une vue Détails qui affiche des détails sur l'élément sélectionné dans la liste.

Le présent guide de l'utilisateur est un exemple de modèle Liste-Détails, dans lequel la table des matières est la vue Liste et la rubrique affichée est la vue Détails.

Microsoft Expression Blend facilite l'ajout de données à la planche graphique dans un modèle Liste-Détails en fournissant deux modes pour le panneau Données :

• En mode Liste, les éléments que vous faites glisser du panneau Données créent la vue Liste. Vous pouvez faire glisser des éléments vers un contrôle ListBox , DataGrid ou TreeView . Si vous faites glisser des éléments sur une zone vide de la planche graphique, un contrôle ListBox est automatiquement créé.

• En mode Détails, les éléments que vous faites glisser du panneau Données créent la vue Détails dans un panneau de disposition Grid . Vous pouvez également créer un panneau de disposition différent (tel qu'un panneau de disposition Canvas ) et faire glisser les éléments sur celui-ci.

En coulisses, Expression Blend configure automatiquement la relation entre la vue Liste et la vue Détails en affectant à la propriété DataContext de l'objet Grid la valeur de la propriété SelectedItem de l'objet qui affiche la vue Liste. Alternativement, cette relation peut être configurée manuellement.

Conseil :
Expression Blend est fourni avec un exemple qui illustre un modèle Liste-Détails simple et personnalise l'aspect des objets Liste et Détails. Pour ouvrir l'exemple dans Expression Blend, cliquez sur Écran d'accueil dans le menu ? (Aide), cliquez sur l'onglet Exemples, puis cliquez sur ColorSwatchSL.

Pour créer automatiquement une liaison de données Liste-Détails

1. Si vous ne disposez pas d'une source de données utilisable, créez un exemple de source de données et autorisez son utilisation au moment de l'exécution.

   Pour plus d'informations, voir Générer un échantillon de données.

2. Dans le panneau Données, cliquez sur Mode Liste .

   Conseil :
   En Mode Liste, les éléments de données que vous faites glisser sur la planche graphique sont supposés être des liaisons de données autonomes ou une partie d'une vue Liste. C'est le mode par défaut du panneau Données.

3. Dans le panneau Données, faites glisser une ou plusieurs propriétés de l'intérieur d'une collection de données sur la planche graphique (pour créer un objet ListBox), ou sur un objet ListBox  , DataGrid   ou TreeView   existant.

   Remarque :
   Si une boîte de dialogue Créer une liaison de données s'affiche, il se peut que vous soyez dans le Mode Détails au lieu du Mode Liste.

   L'objet affiche la collection de données pour chaque propriété.

   Faire glisser des données dans le mode Liste sur un objet ListBox

   

   Faire glisser des données dans le mode Liste sur un objet DataGrid

   

   Faire glisser des données dans le mode Liste sur un objet TreeView

   

4. Dans le panneau Données, cliquez sur Mode Détails .

   Conseil :
   Dans le Mode Détails, les éléments de données que vous faites glisser sur la planche graphique sont supposés être une partie d'une vue Détails. Un objet Grid est créé pour afficher les objets enfants de chaque élément de données. L'objet Grid est automatiquement configuré pour utiliser le contexte de données et l'élément sélectionné du dernier objet créé en Mode Liste.

5. Dans le panneau Données, faites glisser une ou plusieurs propriétés de l'intérieur d'une collection de données sur la planche graphique (pour créer un objet Grid ) ou sur un panneau de disposition existant.

   Le panneau de disposition affiche un contrôle TextBlock pour le nom et la valeur de chaque propriété.

   Faire glisser des données dans le mode Détails après création de la liaison ListBox

   

   Faire glisser des données dans le mode Détails après création de la liaison DataGrid

   

   Faire glisser des données dans le mode Détails après création de la liaison TreeView

   

6. Appuyez sur la touche F5 pour tester votre application. Cliquez sur des éléments dans la vue Liste pour voir la vue Détails s'actualiser en conséquence.

   Sélection d'éléments dans les contrôles Liste pour actualiser leur vue Détails

   

Cette procédure vous a montré comment créer une vue Liste-Détails qui comporte deux niveaux de profondeur. Vous pouvez également créer une vue Liste-Détails sur trois niveaux de profondeur.

Pour plus d’informations, voir Essayez ! Créez une liaison liste-détails avec trois niveaux de profondeur.

Pour créer manuellement une liaison de données Liste-Détails

1. Si vous ne disposez pas d'une source de données utilisable, créez un exemple de source de données et autorisez son utilisation au moment de l'exécution.

   Pour plus d'informations, voir Générer un échantillon de données.

2. Dans le panneau Outils, sélectionnez un contrôle que vous voulez utiliser pour afficher la vue Liste, comme un ComboBox , et dessinez-le sur la planche graphique.

3. Dans le panneau Objets et chronologie, cliquez avec le bouton droit sur le nouvel objet, cliquez sur Renommer, tapez un nouveau nom, puis appuyez sur Entrée.

   Conseil :
   Lorsqu'un objet est créé, il ne lui est pas attribué de nom explicite. En renommant l'objet, vous créez un nom qui peut être référencé par la propriété DataContext de l'objet de la vue Détails.

4. Dans le panneau Données, cliquez sur Mode Liste .

5. Dans le panneau Données, faites glisser une ou plusieurs propriétés de l'intérieur d'une collection de données sur l'objet Liste.

   Faire glisser des données dans le mode Liste sur un objet ComboBox

   

6. Dans le panneau Données, cliquez sur Mode Détails .

7. Dans le panneau Données, faites glisser une ou plusieurs propriétés de l'intérieur d'une collection de données sur la planche graphique (pour créer un objet Grid ) ou sur un panneau de disposition existant.

   Le panneau de disposition affiche un contrôle TextBlock pour le nom et la valeur de chaque propriété.

   Faire glisser des données dans le mode Détails après création de la liaison ComboBox

   

8. Appuyez sur la touche F5 pour tester votre application. Si le fait de sélectionner un élément différent dans l'objet Liste ne produit pas l'actualisation de la vue Détails, continuez à l'étape suivante.

9. Sélectionnez le panneau de disposition (habituellement un objet Grid ) qui représente la vue Détails.

10. Dans le panneau Propriétés, à côté de la propriété DataContext , cliquez sur Options avancées , puis cliquez sur Liaison de données.

11. Dans la boîte de dialogue Créer une liaison de données, cliquez sur l'onglet Propriété de l'élément.

12. Sous Éléments de la scène, sélectionnez l'objet Liste, puis sous Propriétés, sélectionnez la propriété SelectedItem .

    Création d'une relation entre l'objet Détails et l'objet Liste

    

13. Cliquez sur OK pour fermer la boîte de dialogue Créer une liaison de données.

    Tous les éléments enfants du panneau de disposition Détails utilisent le contexte de données de l'élément sélectionné de l'objet Liste.

14. Vérifiez que les éléments enfants du panneau de disposition Détails sont liés aux propriétés des données appropriées. Certains des éléments enfants ne sont pas liés à des données car ils n'affichent que le nom d'une propriété de données. Les autres éléments enfants doivent être liés à des données car ils affichent les données associées à l'élément sélectionné dans l'objet Liste. Par exemple, sélectionnez l'un des éléments enfants TextBlock qui n'affiche pas un nom de propriété de données, puis dans le panneau Propriétés, recherchez la propriété Text . S'il n'y a pas de rectangle englobant jaune autour de la propriété, l'objet TextBlock n'est pas lié à des données. Pour lier l'objet TextBlock  :

    1. Cliquez sur Options avancées  à côté de la propriété Text , puis cliquez sur Liaison de données.

    2. Dans la boîte de dialogue Créer une liaison de données, cliquez sur l'onglet Contexte de données explicite.

    3. Sous Champs, développez la Collection, puis sélectionnez les propriétés de données que vous voulez afficher dans cet objet TextBlock .

       

    4. Cliquez sur OK pour fermer la boîte de dialogue Créer une liaison de données.

       Un rectangle englobant jaune s'affiche autour de la propriété Text pour indiquer que la propriété est maintenant liée à des données.

       

15. Appuyez sur la touche F5 pour tester votre application.

Voir aussi

Tâches

Utiliser le contrôle DataGrid
Utiliser le contrôle TreeView

Concepts

Appliquer un style à un contrôle d'affichage de données

Copyright © 2011 Microsoft Corporation. Tous droits réservés.