Freigeben über

Erstellen einer Listendetails-Datenbindung

  • Artikel

Zum Listendetails-Design gehören zwei Ansichten:

  • Eine Listenansicht, 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 Listendetails-Design, in dem das Inhaltsverzeichnis die Listenansicht und das angezeigte Hilfethema die Detailansicht ist.

Mit Microsoft Expression Blend können Sie auf einfache Weise Daten zur Zeichenfläche in einem Listendetails-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 Listenansicht erstellt. Sie können die Elemente auf ein ListBox -, ein DataGrid - oder ein 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 Grid -Layoutpanel erstellt. Alternativ dazu können Sie ein anderes Layoutpanel (z. B. ein Canvas -Layoutpanel) erstellen und die Elemente auf dieses Layoutpanel ziehen.

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

tip noteTipp:

Expression Blend enthält ein Beispiel, das ein einfaches Listendetails-Design veranschaulicht und in dem die Darstellung der Listen- 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 Listendetails-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.40).png.

    tip noteTipp:

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

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

    NoteHinweis:

    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.40).png

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

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

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

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

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

    tip noteTipp:

    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 (zur Erstellung eines Grid -Layoutpanels) 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.40).png

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

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

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

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

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

    Auswählen von Elementen in Listensteuerelementen zum Aktualisieren ihrer Detailansicht

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

In diesem Verfahren wurde gezeigt, wie Sie eine Listendetails-Ansicht mit zwei geschachtelten Ebenen erstellen können. Sie können auch eine Listendetails-Ansicht mit drei geschachtelten Ebenen erstellen.

Weitere Informationen finden Sie unter Weiterführende Themen: Erstellen einer drei Ebenen tiefen Listendetails-Datenbindung.

So erstellen Sie eine Listendetails-Datenbindung manuell

  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 Listenansicht anzeigen möchten, z. B. ein ComboBox-Steuerelement Ee341499.b174a511-dd12-4a45-a986-034de7693de9(de-de,Expression.40).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.

    tip noteTipp:

    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.40).png.

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

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

    Ee341499.ef9cdd5e-ebce-419a-afaa-86e2e4f8e4ac(de-de,Expression.40).png

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

  7. Ziehen Sie im Datenpanel eine oder mehrere Eigenschaften aus einer Datensammlung auf die Zeichenfläche (zur Erstellung eines Grid -Layoutpanels) 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.40).png

  8. Drücken Sie F5, um Ihre Anwendung zu testen. Wenn durch die Auswahl eines anderen Elements im Listenobjekt 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 Optionen Ee341499.12e06962-5d8a-480d-a837-e06b84c545bb(de-de,Expression.40).png und dann auf Datenbindung.

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

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

    Erstellen einer Beziehung zwischen dem Detailobjekt und dem Listenobjekt

    Ee341499.ab312546-3416-42c8-83e5-610590939041(de-de,Expression.40).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 Listenobjekts.

  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 Listenobjekt 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 kein gelber Begrenzungsrahmen um die Eigenschaft angezeigt wird, ist das TextBlock -Objekt nicht datengebunden. So binden Sie das TextBlock -Objekt an:

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

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

    3. Erweitern Sie unter Felder den Knoten Collection (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.40).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.40).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

Copyright © 2011 Microsoft Corporation. Alle Rechte vorbehalten.