Freigeben über

Erstellen einer Master-Details-Datenbindung

  • Artikel

Ein Master-Details-Design bietet zwei Ansichten:

  • Eine Masteransicht, in der eine Liste von Elementen angezeigt wird. In der Regel ist dies eine Sammlung von Daten.

  • Eine Detailansicht, in der Details zum Element angezeigt werden, das in der Liste ausgewählt ist

Dieses Benutzerhandbuch ist ein Beispiel für das Master-Details-Design, in dem das Inhaltsverzeichnis die Masteransicht und das angezeigte Hilfethema die Detailansicht ist.

Mit Microsoft Expression Blend können Sie auf einfache Weise Daten zur Zeichenfläche in einem Master-Details-Design hinzufügen. Dazu stehen zwei Modi für das Datenpanel zur Verfügung:

  • Im Listenmodus wird aus Elementen, die Sie aus dem Datenpanel ziehen, die Masteransicht erstellt. Sie können Elemente auf ein ListBox-, DataGrid- oder TreeView-Steuerelement ziehen. Wenn Sie Elemente auf einen leeren Bereich der Zeichenfläche ziehen, wird automatisch ein ListBox-Steuerelement erstellt.

  • Im Detailmodus wird aus Elementen, die Sie aus dem Datenpanel ziehen, die Detailansicht in einem Rasterpanel erstellt. Alternativ dazu können Sie ein anderes Layoutpanel (z. B. ein Canvas-Layoutpanel) erstellen und die Elemente auf dieses Layoutpanel ziehen.

Im Hintergrund konfiguriert Expression Blend die Beziehung zwischen der Masteransicht und der Detailansicht automatisch, indem die DataContext-Eigenschaft des Grid-Objekts auf die SelectedItem-Eigenschaft des Objekts gesetzt wird, das die Masteransicht anzeigt. Diese Beziehung kann auch manuell konfiguriert werden.

Ee341499.alert_tip(DE-DE,Expression.30).gifTipp:

Expression Blend beinhaltet ein Beispiel, das ein einfaches Master-Details-Design veranschaulicht und in dem die Darstellung der Master- und Detailobjekte angepasst wird. Um das Beispiel in Expression Blend zu öffnen, klicken Sie im Menü Hilfe auf Willkommensseite, anschließend auf die Registerkarte Beispiele und auf ColorSwatchSL.

So erstellen Sie automatisch eine Master-Details-Datenbindung

  1. Wenn Sie über keine Datenquelle verfügen, die Sie verwenden können, erstellen Sie eine Beispieldatenquelle und aktivieren eine Laufzeitverwendung für diese Datenquelle.

    Weitere Informationen finden Sie unter Generieren von Beispieldaten.

  2. Klicken Sie im Datenpanel auf Listenmodus Ee341499.9ad55afc-08ac-4f9a-ab3a-d55d0cf184d3(DE-DE,Expression.30).png.

    Ee341499.alert_tip(DE-DE,Expression.30).gifTipp:

    Im Listenmodus wird für Elemente von Daten, die Sie auf die Zeichenfläche ziehen, vorausgesetzt, dass diese eigenständige Datenbindungen oder Teil einer Masteransicht sind. Dies ist der Standardmodus des Datenpanels.

  3. Ziehen Sie im Datenpanel eine oder mehrere Eigenschaften aus einer Datensammlung auf die Zeichenfläche (um ein ListBox-Objekt zu erstellen) oder auf ein vorhandenes ListBox- Ee341499.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(DE-DE,Expression.30).png, DataGrid- Ee341499.55bfb0df-05d2-4b58-8312-24a3aed103e3(DE-DE,Expression.30).png oder TreeView-Objekt Ee341499.7ecbf7de-e46f-44e9-b931-98c8c12c0b2a(DE-DE,Expression.30).png.

    Ee341499.alert_note(DE-DE,Expression.30).gifHinweis:

    Wenn das Dialogfeld Datenbindung erstellen angezeigt wird, befinden Sie sich vermutlich im Detailmodus anstatt im Listenmodus.

    Das Objekt zeigt die Datensammlung für jede Eigenschaft an.

    Ziehen von Daten im Listenmodus auf ein "ListBox"-Objekt

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

    Ziehen von Daten im Listenmodus auf ein "DataGrid"-Objekt

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

    Ziehen von Daten im Listenmodus auf ein "TreeView"-Objekt

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

  4. Klicken Sie im Datenpanel auf Detailmodus Ee341499.7786ee28-da1d-41b2-93fd-b4caeb75ab98(DE-DE,Expression.30).png.

    Ee341499.alert_tip(DE-DE,Expression.30).gifTipp:

    Im Detailmodus wird für Elemente von Daten, die Sie auf die Zeichenfläche ziehen, vorausgesetzt, dass diese Teil einer Detailansicht sind. Ein Grid-Objekt wird erstellt, um die untergeordneten Objekte für jedes Datenelement anzuzeigen. Das Grid-Objekt wird automatisch konfiguriert, sodass es den Datenkontext und das ausgewählte Element des letzten Objekts verwendet, das im Listenmodus erstellt wurde.

  5. Ziehen Sie im Datenpanel eine oder mehrere Eigenschaften aus einer Datensammlung auf die Zeichenfläche (um ein Rasterpanel zu erstellen) oder auf ein vorhandenes Layoutpanel.

    Im Layoutpanel wird ein TextBlock-Steuerelement für den Namen und Wert jeder Eigenschaft angezeigt.

    Ziehen von Daten im Detailmodus nach Erstellen der "ListBox"-Steuerelementbindung

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

    Ziehen von Daten im Detailmodus nach Erstellen der "DataGrid"-Steuerelementbindung

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

    Ziehen von Daten im Detailmodus nach Erstellen der "TreeView"-Steuerelementbindung

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

  6. Drücken Sie F5, um Ihre Anwendung zu testen. Klicken Sie auf Elemente in der Masteransicht, um die entsprechende Aktualisierung in der Detailansicht zu sehen.

    Auswählen von Elementen in Mastersteuerelementen zum Aktualisieren ihrer Detailansicht

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

So erstellen Sie manuell eine Master-Details-Datenbindung

  1. Wenn Sie über keine Datenquelle verfügen, die Sie verwenden können, erstellen Sie eine Beispieldatenquelle und aktivieren eine Laufzeitverwendung für diese Datenquelle.

    Weitere Informationen finden Sie unter Generieren von Beispieldaten.

  2. Wählen Sie im Werkzeugpanel ein Steuerelement aus, das Sie in der Masteransicht anzeigen möchten, z. B. ein ComboBox-Steuerelement Ee341499.b174a511-dd12-4a45-a986-034de7693de9(DE-DE,Expression.30).png, und ziehen Sie es auf die Zeichenfläche.

  3. Klicken Sie im Panel Objekte und Zeitachsen mit der rechten Maustaste auf das neue Objekt, dann auf Umbenennen, geben Sie den neuen Namen ein, und drücken Sie die EINGABETASTE.

    Ee341499.alert_tip(DE-DE,Expression.30).gifTipp:

    Wenn ein Objekt erstellt wird, erhält es keinen expliziten Namen. Indem Sie das Objekt umbenennen, erstellen Sie einen Namen, auf den die DataContext-Eigenschaft des Detailansichtobjekts verweisen kann.

  4. Klicken Sie im Datenpanel auf Listenmodus Ee341499.9ad55afc-08ac-4f9a-ab3a-d55d0cf184d3(DE-DE,Expression.30).png.

  5. Ziehen Sie im Datenpanel eine oder mehrere Eigenschaften aus einer Datensammlung auf das Masterobjekt.

    Ziehen von Daten im Listenmodus auf ein "ComboBox"-Objekt

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

  6. Klicken Sie im Datenpanel auf Detailmodus Ee341499.7786ee28-da1d-41b2-93fd-b4caeb75ab98(DE-DE,Expression.30).png.

  7. Ziehen Sie im Datenpanel eine oder mehrere Eigenschaften aus einer Datensammlung auf die Zeichenfläche (um ein Rasterpanel zu erstellen) oder auf ein vorhandenes Layoutpanel.

    Im Layoutpanel wird ein TextBlock-Steuerelement für den Namen und Wert jeder Eigenschaft angezeigt.

    Ziehen von Daten im Detailmodus nach Erstellen der "ComboBox"-Steuerelementbindung

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

  8. Drücken Sie F5, um Ihre Anwendung zu testen. Wenn durch die Auswahl eines anderen Elements im Masterobjekt die Detailansicht nicht aktualisiert wird, fahren Sie mit dem nächsten Schritt fort.

  9. Wählen Sie das Layoutpanel (i. d. R. ein Grid-Objekt) aus, das die Detailansicht darstellt.

  10. Klicken Sie anschließend im Eigenschaftenpanel neben der DataContext-Eigenschaft auf Erweiterte EigenschaftenoptionenEe341499.12e06962-5d8a-480d-a837-e06b84c545bb(DE-DE,Expression.30).png und dann auf Datenbindung.

  11. Klicken Sie im Dialogfeld Datenbindung erstellen auf die Registerkarte Elementeigenschaft.

  12. Wählen Sie unter Szenenelementen das Masterobjekt aus, und klicken Sie dann unter Eigenschaften auf die SelectedItem-Eigenschaft.

    Erstellen einer Beziehung zwischen dem Detailobjekt und dem Masterobjekt

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

  13. Klicken Sie auf OK, um das Dialogfeld Datenbindung erstellen zu schließen.

    Alle untergeordneten Elemente im Detaillayoutpanel verwenden den Datenkontext des ausgewählten Elements des Masterobjekts.

  14. Überprüfen Sie, dass die untergeordneten Elemente des Detaillayoutpanels an die entsprechenden Dateneigenschaften gebunden sind. Einige der untergeordneten Elemente sind nicht an Daten gebunden, da sie nur den Namen einer Dateneigenschaft anzeigen. Die anderen untergeordneten Elemente sollten datengebunden sein, da sie die Daten anzeigen, die mit dem ausgewählten Element im Masterobjekt verknüpft sind. Wählen Sie beispielsweise eines der untergeordneten TextBlock-Elemente aus, für das kein Dateneigenschaftsname angezeigt wird, und suchen Sie dann im Eigenschaftenpanel nach der Text-Eigenschaft. Wenn es keinen gelben Begrenzungsrahmen um die Eigenschaft gibt, ist das TextBlock-Objekt nicht datengebunden. So binden Sie das TextBlock-Objekt

    1. Klicken Sie neben der Text-Eigenschaft auf Erweiterte Eigenschaftenoptionen Ee341499.12e06962-5d8a-480d-a837-e06b84c545bb(DE-DE,Expression.30).png, und klicken Sie auf Datenbindung.

    2. Klicken Sie im Dialogfeld Datenbindung erstellen auf die Registerkarte Expliziter Datenkontext.

    3. Erweitern Sie unter Felder den Knoten Auflistung, und wählen Sie die Dateneigenschaft aus, die Sie in diesem TextBlock-Objekt anzeigen möchten.

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

    4. Klicken Sie auf OK, um das Dialogfeld Datenbindung erstellen zu schließen.

      Ein gelber Begrenzungsrahmen wird um die Text-Eigenschaft angezeigt und gibt an, dass die Eigenschaft jetzt datengebunden ist.

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

  15. Drücken Sie F5, um Ihre Anwendung zu testen.

Siehe auch

Aufgaben

Verwenden von DataGrid-Steuerelementen

Verwenden des "TreeView"-Steuerelements

Konzepte

Formatieren eines Steuerelements für die Datenanzeige