FluidMoveBehavior, FluidMoveSetTagBehavior und der Datenspeicher

Mithilfe des FluidMoveBehavior -Verhaltens können Sie die Positionsänderung eines Elements animieren. Wenn Sie jedoch FluidMoveBehavior allein verwenden, können Sie lediglich den Übergang zwischen einer bestimmten Position eines identifizierten Elements und seiner neuen Position animieren. Wenn Sie FluidMoveBehavior zusammen mit FluidMoveSetTagBehavior verwenden, können Sie einen Übergang von einem bestimmten Startpunkt aus angeben, auch wenn die ursprüngliche Position nur eine Referenz zu den in Ihrer Anwendung angezeigten Daten ist.

Wenn Sie FluidMoveBehavior mit FluidMoveSetTagBehavior verwenden, wird ein verborgener Datenspeicher erstellt, durch den Sie einfacher auf die benötigten Daten zugreifen können, auch wenn diese sich in einem anderen Bereich befinden. Der Datenspeicher wird zwar nicht angezeigt; es ist jedoch hilfreich, Aufschluss über die Funktionsweise des Datenspeichers zu erhalten, wenn Sie FluidMoveBehavior und FluidMoveSetTagBehavior verwenden.

Durch FluidMoveSetTagBehavior markierte Daten, die unter Verwendung eines verborgenen Datenspeichers für FluidMoveBehavior bereitgestellt werden

Hinweis:
FluidMoveSetTagBehavior wird verwendet, um Werte in den Datenspeicher zu schreiben. FluidMoveBehavior liest Daten aus dem Datenspeicher und schreibt Daten in diesen.

Das folgende Beispiel zeigt, wie FluidMoveBehavior , FluidMoveSetTagBehavior und der Datenspeicher zusammenarbeiten, um einen fließenden Übergang zwischen ListBox -Objekten und einer Detailansicht von Elementen in einem ListBoxItem -Objekt zu bilden, während Sie Detailansichten von Daten verwenden.

Besuchen Sie die Expression Community Gallery .

FluidMoveBehavior und FluidMoveSetTagBehavior werden verwendet, um den Übergang zwischen einem Listenelement und der Detailansicht dieses Elements zu animieren, wenn es ausgewählt wird.

In diesem Beispiel wird mit dem ListBox -Objekt eine Reihe von ListBoxItems-Objekten (Listenansicht), von zum Verkauf angebotenen Stühlen angezeigt. Die Listenansicht schließt eine Auswahl von Eigenschaften jedes Stuhls ein, wie die Bezeichnung, den Preis und eine Abbildung.

Bei Auswahl eines Stuhls im ListBox-Objekt wird eine Detailansicht angezeigt. In der Detailansicht werden die Informationen des in der Liste ausgewählten Elements angezeigt.

Im oben genannten Beispiel ist der Übergang von dem in der Liste ausgewählten Stuhl zu dem in der Detailansicht angezeigten Stuhl animiert. Zum Aktivieren dieses Übergangs muss der Stuhl in der Liste als Startpunkt für diese Animation angegeben werden. Dies wird durch Markieren des Image -Objekts im ItemTemplate -Element (d. h. in der Vorlage, die die Darstellung der Listenelemente definiert) mit einem FluidMoveSetTagBehavior -Verhalten erreicht.

Wenn Sie das Beispiel aus der Expression Community Gallery  heruntergeladen und geöffnet haben, finden Sie die Vorlage folgendermaßen: Klicken Sie im Panel Objekte und Zeitachsen mit der rechten Maustaste auf ListBox, klicken Sie auf Zusätzliche Vorlagen bearbeiten, auf Generierte Elemente bearbeiten (Elementvorlage) und anschließend auf Aktuelle bearbeiten. Beachten Sie, dass FluidMoveSetTagBehavior zum Image-Objekt hinzugefügt wurde.

FluidMoveSetTagBehavior auf ein Image-Objekt angewendet

Wenn FluidMoveSetTagBehavior einem Objekt hinzugefügt wird, werden die Kategorien Allgemeine Eigenschaften und Tag-Eigenschaften im Eigenschaftenpanel angezeigt.

FluidMoveSetTagBehavior im Eigenschaftenpanel

Für die AppliesTo-Eigenschaft (Betrifft) wird Self (Mich) festgelegt, da das Bild selbst das Element ist, auf das FluidMoveSetTagBehavior angewendet wird.

Für die Tag-Eigenschaft wird DataContext festgelegt, da das Bild außerhalb der Vorlage nicht verfügbar ist. Im DataContext -Tag sind die Daten angegeben, an die die Vorlage gebunden ist, d. h. in unserem Beispiel die Daten zu dem Stuhl.

Das FluidMoveSetTagBehavior -Verhalten markiert die Daten (in diesem Fall das Bild) und legt sie im Datenspeicher ab, wo sie von FluidMoveBehavior aufgerufen werden können, nachdem FluidMoveBehavior angewendet wurde.

Klicken Sie im Beispielprojekt auf ****Bereich auf "<Bereichsname>" zurücksetzen ****, um diesen Vorgang anzusehen. Erweitern Sie im Panel Objekte und Zeitachsen die Option Raster. Beachten Sie, dass FluidMoveBehavior zum Raster-Objekt hinzugefügt wurde.

FluidMoveBehavior auf ein Raster angewendet

Wenn FluidMoveBehavior einem Objekt hinzugefügt wird (in diesem Beispiel einem Raster-Objekt), werden die Kategorien Allgemeine Eigenschaften, Animationseigenschaften und Tag-Eigenschaften im Eigenschaftenpanel angezeigt.

FluidMoveBehavior im Eigenschaftenpanel

Beachten Sie, dass InitialTag-Eigenschaft in der Kategorie Tag-Eigenschaften als DataContext markiert ist. Dies bedeutet, dass beim Auslösen dieses Verhaltens der letzte Speicherort von DataContext im Datenspeicher aufgerufen wird (in diesem Fall das Image -Objekt in der ItemTemplate -Vorlage des ausgewählten ListBoxItem -Elements). Das Verhalten verwendet dann diese Instanz als Startpunkt.

Zusammenfassend markiert das FluidMoveSetTagBehavior-Verhalten das Objekt in der Vorlage, in der die Animation gestartet werden soll. Der Datenkontext verweist auf die Quelle der Daten und registriert sie in einem verborgenen Datenspeicher. Das FluidMoveBehavior-Verhalten ruft die Informationen in FluidMoveSetTagBehavior ab und bestimmt auf diese Weise den Startpunkt der Animation. Anschließend werden die Animationseigenschaften für das mit den Daten des FluidMoveBehavior-Verhaltens markierte Objekt angewendet. In diesem Beispiel wurde FluidMoveBehavior verwendet, um den größeren Stuhl (denjenigen in der Detailansicht) wie aus dem kleineren Stuhl (demjenigen in der Listenansicht) "herauszuzaubern".

Copyright © 2011 Microsoft Corporation. Alle Rechte vorbehalten.