Anzeigen von Daten
Daten sind die Grundlage aller Benutzeroberflächen. Von Websites für Hotelzimmerreservierungen bis hin zu Darstellungen der Börsenkurse ermöglichen Benutzeroberflächen die Anzeige von und Interaktion mit Daten. Welche Benutzeroberflächenkomponenten verwendet werden, und wie diese für einen sinnvollen Arbeitsablauf angeordnet werden, hängt im Wesentlichen von den Daten ab, die verwendet werden sollen.
Datenquellen
Für Ihre Anwendung werden möglicherweise nur interne Datenquellen verwendet, und eventuell werden mit einigen Zahlen, die ein Benutzer in ein Formular eingegeben hat, Berechnungen durchgeführt. Andere Anwendungen, die Sie erstellen, benötigen möglicherweise Zugriff auf externe Datenquellen wie z. B. Datenbanken, Webfeeds, Webdienste oder lokale Dateien mit Informationen. Von Microsoft Expression Blend werden die folgenden Arten von Datenquellen unterstützt:
XML-Datenquelle Eine lokale oder eine Remote-XML-Datei, die für die Anwendung Daten im XML-Format bereitstellt. Sie können eine XML-Datei verwenden, die Sie dem Projekt hinzugefügt haben, oder Sie können für die Datenquelle die URL einer XML-Datei auf einer Website festlegen.
Weitere Informationen finden Sie unter Verwenden einer Live-XML-Datenquelle.
.gif "Hinweis")
Hinweis:Microsoft Silverlight bietet keine Unterstützung für XML-Datenquellen. Informationen zum Arbeiten mit XML-Daten finden Sie jedoch unter Analysieren von XML-Daten in Silverlight (möglicherweise in englischer Sprache) in MSDN.
Objektdatenquelle Ein Objekt mit öffentlichen Eigenschaften, an die die Zieleigenschaften gebunden werden können. Für WPF-Anwendungen können Sie eine Microsoft .NET Framework-Klassenbibliothek verwenden, mit der Daten aus einer Datenbank in ein ObservableCollection-Objekt konvertiert werden.
Weitere Informationen finden Sie unter Verwenden einer Objektdatenquelle, um eine Verbindung mit einer Datenbank herzustellen oder in den Themen in der Weiterführende Themen: Anzeigen von Daten aus einer SQL-BeispieldatenbankÜbersicht über Datenbindung in MSDN. Weitere Informationen zu Silverlight-Anwendungen finden Sie unter Silverlight-Datenbindung (möglicherweise in englischer Sprache) in MSDN.
Hinweis:Microsoft Expression Blend unterstützt keine CLR-Objektdatenquellen-Klassen, die im Konstruktor Parameter enthalten.
Beispieldatenquellen Eine Gruppe von lokalen Dateien, die Sie mithilfe des Werkzeugs Beispieldatenquelle hinzufügen im Datenpanel erstellen. Da Sie keine externen Daten auf der Zeichenfläche anzeigen können, unterstützt Expression Blend Beispieldaten, die Sie während des Entwurfs Ihrer Anwendung verwenden können.
Weitere Informationen finden Sie unter Erstellen von Beispieldaten.
Eine Liste der Datenquellen im Datenpanel
.png "Cc295161.5466a442-fd31-47e2-893e-4a738a1eaf2e(DE-DE,Expression.30).png")
Datenquellen, die mit dem aktiven Dokument in Expression Blend verknüpft sind, werden im Datenpanel unter Dieses Dokument aufgelistet. Datenquellen, die allen Dokumenten in einem Projekt zur Verfügung stehen, werden im Datenpanel unter Anwendung aufgelistet. Sie können Datenquellen mithilfe der Schaltflächen am oberen Rand des Datenpanels erstellen. Sie können Datenelemente auf die Zeichenfläche ziehen, um Steuerelemente zu erstellen, deren Daten an diese Elemente gebunden sind.
Weitere Informationen finden Sie unter Anzeigen von Daten in Steuerelementen.
Datenbindung
Bei der Datenbindung wird ein Element in einer Datenquelle an Benutzeroberflächenkomponenten (Steuerelemente) gebunden. Das bedeutet, dass beim Ändern der Daten die Änderungen in den Oberflächenkomponenten und umgekehrt angezeigt werden können. Das einfachste Beispiel für eine Datenbindung ist ein Schieberegler-Steuerelement, das intern an die Breite eines Rechtecks gebunden ist. Beim Verschieben des Schiebereglers wird das Rechteck größer oder kleiner.
Von Expression Blend wird eine einfache und einheitliche Möglichkeit zum Binden der Elemente in der Anwendung an unterschiedliche Datenquellen sowie zum Konfigurieren der Elemente zum Anzeigen und Ändern der Daten bereitgestellt. Eine Bindung wird im Wesentlichen zwischen einer Quelle und einem Ziel erstellt. Die Quelle ist in der Regel eine Datenquelle oder ein anderes Steuerelement, und das Ziel ist ein Steuerelement. Bei dem Beispiel mit dem Schieberegler ist die Quelle die Value-Eigenschaft des Schieberegler-Steuerelements, und das Ziel ist die Width-Eigenschaft des Rechtecks.
Sie können Bindungen mit der Schaltfläche Erweiterte Eigenschaftenoptionen .png "Cc295161.12e06962-5d8a-480d-a837-e06b84c545bb(DE-DE,Expression.30).png")
erstellen, die mit den Eigenschaften im Eigenschaftenpanel verknüpft ist, oder Sie können die Elemente aus dem Datenpanel auf die Zeichenfläche ziehen. Mit beiden Optionen wird das Dialogfeld Datenbindung erstellen aufgerufen. Hier können Sie Bindungslinks zwischen einem Steuerelement (dem Ziel) und einem Datenfeld oder einem anderen Steuerelement (der Quelle) erstellen.
Weitere Informationen finden Sie unter Binden eines Objekts an Daten.
Das Dialogfeld "Datenbindung erstellen" mit dem erweiterten Bereich für erweiterte Optionen
.png "Cc295161.8fcdc007-d9cd-430d-81d5-29ac9b88ee31(DE-DE,Expression.30).png")
Das Dialogfeld Datenbindung erstellen enthält drei grundlegende Optionen zum Auswählen einer Datenquelle sowie erweiterte Optionen:
Datenfeld Diese Option enthält die im Projekt erstellten XML- und CLR-Objektdatenquellen sowie die zugehörigen verknüpften Felder. Sie können neue XML-Datenquellen oder CLR-Objektdatenquellen hinzufügen oder bereits erstellte, vorhandene Verbindungen verwenden. Um ein Feld zum Binden auszuwählen, wählen Sie unter Datenquellen ein Element und dann unter Felder ein Datenelement aus. Der Datenelementtyp muss mit dem Eigenschaftentyp übereinstimmen, an den er gebunden wird, außer Sie verfügen über einen Wertkonverter, den Sie anwenden können (Informationen hierzu finden Sie unter "Erweiterte Optionen" weiter unten in diesem Thema). Nach dem Erstellen der Datenbindung wird der Wert der Zieleigenschaft mit dem Datenelement gefüllt.
Elementeigenschaft Mithilfe dieser Option kann eine Eigenschaft eines Elements ähnlich wie bei der Bindung der Width-Eigenschaft eines Rechtecks an die Value-Eigenschaft eines Schiebereglers im Beispiel weiter oben in diesem Thema an eine andere Eigenschaft des Elements in derselben XAML-Datei (Extensible Application Markup Language) gebunden werden. Suchen Sie zum Erstellen dieser Bindung im Eigenschaftenpanel nach der Zieleigenschaft (in diesem Beispiel die Width-Eigenschaft eines Rechtecks), klicken Sie auf Erweiterte Eigenschaftenoptionen
und dann auf Datenbindung. Klicken Sie auf die Registerkarte Elementeigenschaft, suchen Sie in den Elementen im linken Fensterbereich den Schieberegler (Quellelement), und suchen Sie anschließend in der Liste mit Eigenschaften im rechten Fensterbereich die Value-Eigenschaft.Expliziter Datenkontext Mithilfe dieser Option können Sie in dem für das aktuelle Element oder für eines der zugehörigen übergeordneten Elemente festgelegten Kontext eine Bindung an eine Datenquelle erstellen. Ein Datenkontext ist eine bequeme Möglichkeit, Daten durch Festlegen eines Bereichs, in dem alle datengebundenen Eigenschaften eine gemeinsame Quelle verwenden, in mehreren Steuerelementen zu verwenden. Beispiel: Sie können einem Grid-Objekt, das ein ListBox- und ein TextBlock-Objekt enthält, einen Datenkontext zuweisen und Eigenschaften von beiden Objekten an unterschiedliche Datenelemente in demselben Kontext binden. Dies ist nützlich, wenn Sie ein Master-Details-Design erstellen möchten, bei dem Sie auf ein Element in einer Liste (Masterbereich) klicken und daraufhin die Informationen zu diesem Element in einem anderen Objekt (Detailbereich) angezeigt werden. Auf der Registerkarte Expliziter Datenkontext sind im Bereich Felder die im vererbten Datenkontext verfügbaren Datenverbindungsfelder aufgelistet. Hier können Sie das entsprechende Feld für die Zieleigenschaft auswählen.
Hinweis:Bei allen drei oben aufgeführten Optionen können Sie für die Datenbindung einen benutzerdefinierten Pfad-Ausdruck oder einen XPath-Ausdruck (XML Path Language) eingeben. Das Feld XPath wird automatisch mit dem Pfad zu dem Element gefüllt, das unter Felder ausgewählt wurde. Sie können den Pfad jedoch anfügen, um die Daten einzugrenzen, die aus der Datenquelle eingebracht werden. Geben Sie hierzu beispielsweise bestimmte Knoten in den XML-Daten an, die Sie verwenden möchten, wie z. B. ein Element in einem Array. Weitere Informationen zum Verwenden von XPath finden Sie in den Themen XPath-Syntax und Gewusst wie: Binden an XML-Daten mithilfe von XMLDataProvider und XPath-Abfragen in MSDN.
Erweiterte Optionen Über den erweiterten Optionsbereich des Dialogfelds, auf den Sie mit einem Klick auf die untere Erweiterungsschaltfläche
.png "Cc295161.de239c9d-42ce-4f5e-83b9-5f9924c0431f(DE-DE,Expression.30).png")
zugreifen können, können Sie erweiterte Optionen festlegen, wie z. B. die Richtung des Datenflusses (Informationen hierzu finden Sie unter "Datenfluss" weiter unten in diesem Thema), einen Standardwert für die Zieleigenschaft, einen Wertkonverter und Konverterparameter. Wertkonverter sind .NET Framework-Klassenmethoden, mit deren Hilfe Werte aus einem Typ in einen anderen konvertiert werden. Sie werden benötigt, wenn die Quell- und Zieleigenschaften nicht übereinstimmende Typen aufweisen. Sie können einen Wertkonverter hinzufügen, indem Sie neben dem Feld Wertkonverter auf die Schaltfläche Neuen Wertkonverter hinzufügen .png "Cc295161.3f9fe48b-caf8-4989-8a91-017ba1e0cb77(DE-DE,Expression.30).png")
klicken, und im Dialogfeld Wertkonverter hinzufügen einen Konverter auswählen. Darüber hinaus können Sie hier auch einen Konverterparameter festlegen. (Zum Konvertieren von double in decimal müssen Sie beispielsweise einen Wert für die Anzahl der Ziffern angeben, die nach dem Dezimalkomma angezeigt werden sollen.)Ein Beispiel für einen Wertkonverter finden Sie unter Weiterführende Themen: Konvertieren zwischen Datentypen.
Datenfluss
Der Datenfluss ist als die Richtung definiert, in die Daten zwischen der Quelle und dem Ziel fließen. In dem Beispiel mit dem Schieberegler, bei dem ein Rechteck in der Größe angepasst wird, ist lediglich eine unidirektionale Bindung vom Schieberegler (Quelle) zum Rechteck (Ziel) erforderlich. Folgende Bindungskonfigurationen werden für den Datenfluss unterstützt:
Standard Bei Änderungen an der Quelle wird das Ziel automatisch aktualisiert und umgekehrt. Dies entspricht dem TwoWay-Datenfluss.
OneWay Bei Änderungen an der Quelle wird das Ziel automatisch aktualisiert, bei Änderungen am Ziel wird die Quelle allerdings nicht aktualisiert.
TwoWay Bei Änderungen an der Quelle wird das Ziel automatisch aktualisiert und umgekehrt.
OneWayToSource Bei Änderungen am Ziel wird die Quelle automatisch aktualisiert, bei Änderungen an der Quelle wird das Ziel allerdings nicht aktualisiert. Dies ist die umgekehrte Funktion von OneWay. Sie ist in bestimmten Fällen nützlich, wenn die Zieleigenschaft im Eigenschaftenpanel nicht angezeigt wird, was vorkommen kann, wenn es sich nicht um eine Abhängigkeitseigenschaft handelt. Mithilfe einer OneWayToSource-Bindung können Sie die Datenbindung stattdessen auf dem Ziel festlegen. Diese Option wird nicht in Silverlight-Projekten unterstützt.
**OneTime **Es werden keine Änderungen vorgenommen. Das Ziel wird auf den Wert der Quelle gesetzt, wenn die Anwendung initialisiert wird. Das Ziel wird danach nicht aktualisiert.
Um Datenfluss in Aktion zu sehen, stellen Sie sich das folgende Beispiel für eine Benutzeroberfläche vor, die ein Slider-Steuerelement (Quelle) und ein TextBox-Steuerelement (Ziel) enthält:
Darstellung des Datenflusses mittels Bindungstypen
.png "Cc295161.955af9ad-a12d-41c6-9106-1ec4be43d0d4(DE-DE,Expression.30).png")
In der Darstellung wird die Bindung mithilfe des folgenden Verfahrens für das Textfeld (Ziel) festgelegt:
Klicken Sie im Eigenschaftenpanel auf die Schaltfläche Erweiterte Eigenschaftenoptionen
, die der Text-Eigenschaft (unter Allgemeine Eigenschaften) des TextBox-Steuerelements zugewiesen ist, und dann auf Datenbindung.Klicken Sie im angezeigten Dialogfeld Datenbindung erstellen auf die Registerkarte Elementeigenschaft, und wählen Sie die Value-Eigenschaft des Slider-Knotens aus.
In der folgenden Tabelle wird das Bindungsverhalten abhängig vom Bindungstyp für dieses Beispiel beschrieben:
Bindungstyp |
Ergebnis |
|---|---|
OneWay |
Durch Verschieben des Schiebereglers (Quelle) wird das Textfeld (Ziel) aktualisiert. Durch Eingabe einer Zahl in das Textfeld wird der Schieberegler jedoch nicht verschoben. |
TwoWay |
Durch Verschieben des Schiebereglers (Quelle) wird das Textfeld (Ziel) aktualisiert. Zudem ändert sich die Position des Schiebereglers, wenn in das Textfeld eine Zahl eingegeben wird, sobald Sie mit der Maus auf eine Stelle außerhalb des Textfelds klicken. |
OneWayToSource |
Durch Eingabe einer Zahl in das Textfeld (Ziel) und anschließendem Klicken auf eine Stelle außerhalb des Textfelds wird der Schieberegler (Quelle) verschoben. Das Textfeld wird jedoch durch Verschieben des Schiebereglers nicht aktualisiert. |
OneTime |
Durch den Anfangswert des Schiebereglers (Quelle) wird das Textfeld (Ziel) beim Starten der Anwendung aktualisiert. Durch nachfolgende Änderungen am Schieberegler wird das Textfeld nicht aktualisiert. Und durch Eingabe einer Zahl in das Textfeld wird der Schieberegler in keinem Fall aktualisiert. |
Das entsprechende Verfahren, das dieses Szenario veranschaulicht, finden Sie unter Binden eines Objekts an Benutzereingaben oder andere interne Werte.
Methoden zum Binden an Datenquellen
Workflow 1: Bindung von der Quelle zum Ziel
Nach dem Erstellen der externen Datenquelle können Sie die Datenquelle an Steuerelemente der Datenoberfläche binden. Hierzu stehen zwei Möglichkeiten zur Verfügung:
Bindung eines vorhandenen Steuerelements Wenn sich das Steuerelement bereits im Dokument befindet, können Sie es an die Daten binden, indem Sie den Datenknoten aus dem Datenpanel auf das Steuerelement ziehen. Eine Meldung während des Ziehens des Datenknotens zeigt an, an welche Eigenschaft des Objekts die Daten gebunden werden.
.png "Cc295161.054f8f1c-c18a-4268-a963-390e84fa2809(DE-DE,Expression.30).png")
Wenn Sie eine andere Eigenschaft festlegen möchten, können Sie die UMSCHALTTASTE drücken, bevor Sie die Maustaste loslassen.
.png "Cc295161.a1b9bdb2-3bb6-436d-a955-b2153b6ffba0(DE-DE,Expression.30).png")
Erstellen eines neuen Steuerelements Sie können einen beliebigen Datenknoten aus dem Datenpanel in ein Dokument ziehen. Mit dieser Option wird ein neues Steuerelement in das Dokument eingefügt.
Weitere Informationen finden Sie unter den folgenden Themen:
Workflow 2: Bindung vom Ziel zur Quelle
Der vorherige Workflow startete immer bei der Datenquelle und endete beim Zielsteuerelement. Dieser Vorgang kann jedoch auch umgekehrt werden, wenn das Steuerelement bereits erstellt wurde und bekannt ist, welche Eigenschaft an die Datenquelle oder an die Eigenschaft eines anderen Steuerelements gebunden werden soll. Dieser Workflow ist bei der Bindung zwischen Elementen besonders hilfreich.
Weitere Informationen finden Sie unter Binden eines Objekts an Benutzereingaben oder andere interne Werte.
Neben den einzelnen Eigenschaftswert-Editoren im Eigenschaftenpanel befindet sich die Schaltfläche Erweiterte Eigenschaftenoptionen , mit deren Hilfe Sie erweiterte Eigenschaftenoptionen, wie z. B. Datenbindungen, festlegen können. Wenn Sie im Menü für erweiterte Optionen auf Datenbindung klicken, wird das in Workflow 1 weiter oben in diesem Thema beschriebene Dialogfeld Datenbindung erstellen angezeigt.
Datenvorlagen
Es könnte sein, dass Sie eine Liste mit Elementen in der Datenquelle anzeigen möchten. Ein Datenelement, das eine Liste mit Elementen enthält, ist mit "(Array)" im Elementnamen gekennzeichnet. Wenn Sie einen Listenknoten aus dem Datenpanel auf ein DataGrid-Steuerelement ziehen, werden Ihre Daten in Objekten angezeigt, deren Vorlagen bearbeitet werden können.
Beispiele für das Bearbeiten von Datenvorlagen finden Sie unter den folgenden Themen:
Datenvorlagen werden genauso wie beliebige andere Stile und Vorlagen als Ressourcen gespeichert. Wenn Sie eine vorhandene Datenvorlage ändern möchten, können Sie neben der Datenvorlage im Ressourcenpanel auf die Schaltfläche Ressource bearbeiten klicken. Der Vorlagenbearbeitungsmodus von Expression Blend wird geöffnet, und die Vorlagenstruktur wird unter Objekte und Zeitachsen angezeigt. In diesem Bearbeitungsmodus können Sie der Vorlage Steuerelemente hinzufügen und eine Datenbindung aus dem Eigenschaftenpanel verwenden, um die Eigenschaften dieser Steuerelemente an neue Elemente aus der Datenquelle zu binden.