Partager via

Créer une liaison de données maître-détails

  • Article

Un modèle Maître-Détails comprend deux parties :

  • Une vue Maître 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.

Ce Guide de l'utilisateur est un exemple de modèle Maître-Détails, dans lequel la table des matières est la vue Maître, 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 Maître-Détails en fournissant deux modes pour le panneau Données :

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

  • Dans le mode Détails, les éléments que vous faire glisser du panneau Données créent la vue Détails dans un panneau de dispositionGrille. Alternativement, vous pouvez créer un panneau de disposition différent (tel qu'un panneau de disposition Canevas) et faire glisser les éléments sur celui-ci.

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

Ee341499.alert_tip(FR-FR,Expression.30).gifConseil :

Expression Blend est fourni avec un exemple qui illustre un modèle Maître-Détails simple et personnalise l'aspect des objets Maître 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 Maître-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 Ee341499.9ad55afc-08ac-4f9a-ab3a-d55d0cf184d3(FR-FR,Expression.30).png.

    Ee341499.alert_tip(FR-FR,Expression.30).gifConseil :

    Dans le 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 Maître. 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 Ee341499.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(FR-FR,Expression.30).png, DataGrid Ee341499.55bfb0df-05d2-4b58-8312-24a3aed103e3(FR-FR,Expression.30).png ou TreeView Ee341499.7ecbf7de-e46f-44e9-b931-98c8c12c0b2a(FR-FR,Expression.30).png existant.

    Ee341499.alert_note(FR-FR,Expression.30).gifRemarque :

    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

    Ee341499.86a5a839-015a-4510-8617-94487f4adb09(FR-FR,Expression.30).png

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

    Ee341499.8a772e67-9d6e-434d-8b39-fd3b69858e94(FR-FR,Expression.30).png

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

    Ee341499.2677bde8-9d64-4d15-8877-517d0a66ea14(FR-FR,Expression.30).png

  4. Dans le panneau Données, cliquez sur Mode Détails Ee341499.7786ee28-da1d-41b2-93fd-b4caeb75ab98(FR-FR,Expression.30).png.

    Ee341499.alert_tip(FR-FR,Expression.30).gifConseil :

    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 pour 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éé dans le 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

    Ee341499.50bc24c3-45a6-46cc-8baa-fe8e1640b245(FR-FR,Expression.30).png

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

    Ee341499.7f71870f-8b3d-4de9-8ddf-258893b424a5(FR-FR,Expression.30).png

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

    Ee341499.b668febc-be6f-456f-8ad7-969d88f7aaea(FR-FR,Expression.30).png

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

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

    Ee341499.6c17e27b-5c6f-45c8-a961-fd177406042d(FR-FR,Expression.30).png

Pour créer manuellement une liaison de données Maître-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 Maître, comme un ComboBox Ee341499.b174a511-dd12-4a45-a986-034de7693de9(FR-FR,Expression.30).png, 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.

    Ee341499.alert_tip(FR-FR,Expression.30).gifConseil :

    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 Ee341499.9ad55afc-08ac-4f9a-ab3a-d55d0cf184d3(FR-FR,Expression.30).png.

  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 Maître.

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

    Ee341499.ef9cdd5e-ebce-419a-afaa-86e2e4f8e4ac(FR-FR,Expression.30).png

  6. Dans le panneau Données, cliquez sur Mode Détails Ee341499.7786ee28-da1d-41b2-93fd-b4caeb75ab98(FR-FR,Expression.30).png.

  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

    Ee341499.96269f5b-09d6-4e4a-8fdb-c8f5fd3240f2(FR-FR,Expression.30).png

  8. Appuyez sur la touche F5 pour tester votre application. Si le fait de sélectionner un élément différent dans l'objet Maître 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 de propriétés avancées Ee341499.12e06962-5d8a-480d-a837-e06b84c545bb(FR-FR,Expression.30).png, 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 Maître, puis, sous Propriétés, sélectionnez la propriété SelectedItem.

    Création d'une relation entre l'objet Détails et l'objet Maître

    Ee341499.ab312546-3416-42c8-83e5-610590939041(FR-FR,Expression.30).png

  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 Maître.

  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 Maître. 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 de propriétés avancéesEe341499.12e06962-5d8a-480d-a837-e06b84c545bb(FR-FR,Expression.30).png à 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.

      Ee341499.e7cf00b9-285a-45ab-a4d6-5b94881917fa(FR-FR,Expression.30).png

    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.

      Ee341499.9712d7c9-c15b-4fed-a816-881fa0809a61(FR-FR,Expression.30).png

  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