Aus der Sicht eines Entwicklers ist diese Frage einfach zu beantworten. Für einen Designer, der nicht oder wenig programmieren kann, kann diese Anforderung problematisch sein. Die Diskussion erinnerte mich daran, dass Behavior eigentlich als ein Werkzeug für Designer gedacht sind.
Also machte ich mich daran, ein Behavior zu schreiben, dass diese einfachen Aufgaben erledigt. Das Ergebnis sind die StoryboardCompletedBehaviors.
Im Folgenden beschreibe ich, wie man diese Behaviors verwendet.
Der Artikel ist ganz bewußt sehr ausführlich und mit kleinen Schritten gestaltet. Fortgeschrittene Nutzer von Expression Blend können sich darauf beschränken, die "Übersicht (Overview)" und "Schritt 3" zu lesen.
Übersicht
Der Download, den Ihr in der Expression Gallery findet, enthält ein Beispiel-Projekt mit der Datei "SilverLawCompletedBehaviors.dll". Diese Bibliothek stellt eine Action und drei Trigger zur Verfügung. Das ist die "StoryboardCompletedAction" und der "StoryboardCompletedTrigger", der "StateStoryboardCompletedTrigger" sowie der "GoToStateOnStoryboardCompletedTrigger". Alle drei Trigger können der Action als Trigger zugewiesen werden.
Der "StoryboardCompletedTrigger" erledigt die Aufgabe, nach einem Storyboard ein anderes Storyboard zu starten.
Der "StateStoryboardCompletedTrigger" erledigt die Aufgabe, nach einem Storyboard, das zu einem bestimmten visuellen Zustand gehört, ein anderes Storyboard zu starten.
Update:
Der "GoToStateOnStoryboardCompletedTrigger" hat die Aufgabe, in einen bestimmten visuellen Zustand zu wechseln, nachdem ein bestimmtes Storyboard beendet ist.
Zum "StateStoryboardCompletedTrigger" kurz eine Erklärung (für Designer): Ein visueller Zustand kann ein Storyboard enthalten. Dieses Storyboard in einem visuellen Zustand ist dann dafür verantwortlich den Wechsel von einem visuellen Zustand zu diesem visuellen Zustand, in dem das Storyboard enthalten ist, mit einer Animation ablaufen zu lassen. Wenn also zum Beispiel für den visuellen Zustand "VS_2" ein Storyboard definiert ist, dann läuft dieses Storyboard ab, wenn von einem anderen visuellen Zustand, also zum Beispiel "VS_1" zum visuellen Zustand "VS_1" gewechselt wird.
Jeder dieser drei Trigger kann der "StoryboardCompletedAction" als Trigger hinzugefügt werden. Nachfolgend beschreibe ich, wie das geht.
Schrit für Schritt
Schritt 1 - Verweisen auf die SilverLawCompletedBehaviors.dll
In einem neuen Silverlight 4 Projekt wird in der Registerkarte "Projekte" im Projektexplorer mit einem Rechtsklick auf "Verweise" -> "Verweis hinzufügen ..." zum Speicherplatz der Datei "SilverLawCompletedBehaviors.dll" navigiert, diese wird selektiert und mit "Öffnen" zu den Verweisen hinzugefügt.
Um diese Action zu vewenden, brauchen wir ein paar Storyboards und ein Element mit zwei visuellen Zuständen.
Schritt 2 - Erstellen der Storyboards und der visuellen Zustände
Auf die Oberfläche wird ein neues Ellipse-Steuerelement gezeichnet:
Mit "F6" wird in den Animationsarbeitsbereich gewechselt, damit wir zwei Storyboards erstellen können. In der Registerkarte "Objekte und Zeitachsen" wird auf das Plus-Zeichen geklickt.
In dem Dialg, der erscheint, erhält das neue Storyboard den Namen "sbMoveRight". Klick "Ok".
Dann werden zwei KeyFrames hinzugefügt. Einer bei Position 0:00,000 ein weiterer bei Position 0:01,000.
Bei der Position des zweiten KeyFrame soll das Ellipse-Steuerelement nach rechts verschoben sein. Dazu wird das Ellipse-Steuerelement selektiert, und in den Eigenschaften unter "Transformation" eine "Translation" von 200 auf der X-Achse erzeugt:
Dann wird ein zweites Storyboard erstellt, das das Ellipse-Steuerelement wieder von Rechts nach Links zurückbewegt. Dieses Storyboard erhält den Namen "sbMoveLeft". Dazu wird das erste Steuerelement kopiert ...
umgekehrt ...
und umbenannt ...
Als nächstes erzeugen wir für das Ellipse-Steuerelement noch zwei visuelle Zustände. Dazu wird das Storyboard "sbMoveLeft" geschlossen, mit "F6" wieder in den Design-Arbeitsbereich gewechselt und die Registerkarte "Zustände" selektiert. Die folgenden Schritte zeigen den Ablauf.
Es wird eine neue StatusGruppe hinzugefügt ...
und mit "E1_States" benannt ...
Dann wird ein neuer visueller Status hinzugefügt ...
Dieser Zustand erhält den Namen "normal".
Ein weiterer Zustand wird hinzugefügt. Dieser erhält den Namen "pulse".
Dann wird das Ellipse-Steuerelement selektiert.
In diesem visuellen Zustand soll das Ellipse-Steuerelement pulsieren. Das wird mit Hilfe eines Storyboard erledigt, das wir für diesen visuellen Zustand erzeugen. Dazu wird als erstes durch einen Klick auf diese Schaltfläche ...
... die Zeitachse angezeigt:
Es werden drei KeyFrames hinzugefügt ...
Bei der Position des ersten KeyFrame wird keine Eigenschaft verändert. Bei der Position des zweiten KeyFrame ...
... werden die Farbe des Stroke und die Farbe des Fill von dem Ellipse-Steuerelement ausgetauscht ...
Und bei der Position des dritten KeyFrame behalten Stroke und Fill ihre ursprünglichen Farben (es wird also nichts verändert) ...
Jetzt sind alle Vorbereitungen getroffen, um mit der Hilfe von Behavior folgendes zu erreichen: Bei einem Klick mit der Maus auf die Ellipse soll es in den visuellen Zustand "pulse" wechseln. Sobald der Übergang in diesen visuellen Zustand abgeschlossen ist, soll das Storyboard "sbMoveRight" beginnen. Und sobald das Storyboard "sbMoveRight" beendet ist, soll das Storyboard "sbMoveLeft" begínnen.
Schritt 3 - Hinzufügen und Einstellen der Behavior
Um den Übergang in den visuellen Zustand "pulse" bei einem Klick auf das Ellipse-Steuerelement zu bewirken, wird dem Ellipse-Steuerelement per Drag & Drop eine "GoToStateAction" hinzugefügt.
Die "GoToStateAction" wird selektiert und in den Eigenschaft wird als "StateName" der "pulse" Zustand ausgewählt.
Als nächstes werden nacheinander zwei "StoryboardCompletedAction" per Drag & Drop auf das UserControl gezogen. Wir beginnen mit der ersten "StoryboardCompletedAction".
Diese "StoryboardCompletedAction" übernimmt die Aufgabe, das Storyboard "sbMoveRight" zu starten, sobald der Übergang zum visuellen Zustand "pulse" beendet ist. Um das zu erreichen, muss dieser Action in den Eigenschaften ein "StateStoryboardCompletedTrigger" hinzugefügt werden.
Die Eigenschaften der "StoryboardCompletedAction" sehen danach so aus:
Der Eigenschaft "FirstState" wird der Name des visuellen Zustand zugewiesen, an dessen Übergangsende ein anderes Storyboard gestartet werden soll. Das Storyboard, das gestartet werden soll, wird der Eigenschaft "NextStoryboard" zugewiesen ...
Dann wird dem UserControl per Drag & Drop eine weitere "StoryboardCompletedAction" hinzugefügt. Diese Action übernimmt die Aufgabe, nach dem Ende des Storyboard "sbMoveRight" das Storyboard "sbMoveLeft" zu starten. Um das zu erreichen, wird dieser "StoryboardCompletedAction" ein "StoryboardCompletedTrigger" hinzugefügt.
Wichtiger Hinweis: Es gibt einen anderen "StoryboardCompletedTrigger", der aber aus dem Namespace "Microsoft.Expression.Interactivity.Media" stammt. Dieser andere "StoryboardCompletedTrigger" funktioniert nicht mit der von mir entworfenen "StoryboardCompletedAction". Deswegen muss darauf geachtet werden, dass der "StoryboardCompletedAction" unbedingt der "StoryboardCompletedTrigger" aus dem Namespace "SilverLaw" zugewiesen wird.
Jetzt müssen die Eigenschaften für die zweite "StoryboardCompletedAction" eingestellt werden. In der Auswahl für die Eigenschaft "FirstStoryboard" wird das Storyboard ausgewählt, nach dessen Ende ein anderes Storyboard gestartet werden soll. In der Auswahl der Eigenschaft "NextStoryboard" wird das Storyboard ausgewählt, das nach dem ersten Storyboard gestartet werden soll. Im Ergebnis sieht das dann so aus:
Das war's!
"F5" drücken, um das Projekt auszuführen. Ein Klick auf das Ellipse-Steuerelement startet als erstes den Übergang zum visuellen Zustand "pulse". Nachdem dieser Übergang abgeschlossen ist, startet das Storyboard "sbMoveRight". Und nachdem "sbMoveRight" abgeschlossen ist, startet das Storyboard "sbMoveLeft".
Viel Spass mit den "StoryboardCompletedBehaviors".
Download: Beispiel-Projekt mit den "StoryboardCompletedBehaviors"
Keine Kommentare:
Kommentar veröffentlichen