eigene Visual States mit Expression Blend 3 erzeugen

In einer Diskussion mit Max Knor  (Evangelist Microsoft Österreich) ging es um Trigger und warum die diese schlecht sind. Der klassische Trigger aus WPF oder Silverlight 2 existieren in Silverlight 3 so nicht mehr. Ich hab da auch ne Flasche Sekt dafür aufgemacht.

Trotzdem braucht man die Funktion, daß UI auf Benutzeraktivitäten reagieren soll, auf Designer Seite. Der klassische Code Ansatz Storyboard.Begin() reicht nicht. Wer schon mal ein SL 3 Control, wie einen Button, mit Expression Blend in sein Template zerlegt hat, wird den Visual State Manager schon kennen gelernt haben. Mit diesem können nun Statusänderungen definiert werden. Z.B. hat eine Checkbox den Status Check und Unchecked. Im Status Checked muss ein Haken angezeigt werden. (dieser Haken ist ein Path Element mit dem Namen CheckIcon). Der Übergang von Haken auf Haken weg, wird über klassische Animationen direkt im ViewstateManager erledigt. Bei der Checkbox wird einfach die Transparenz verändert.

Im folgenden werde ich kurz zeigen, wie man eigene Visual States definiert. Dabei führt kein Weg an einem UserControl vorbei. In diesem erzeuge ich nun ein Rechteck das zwei Stati hat. Rot und Blau. Im Reiter State wird zunächst eine Gruppe angelegt- hier farbewechseln- und dann per Add State ein neuer Status hinzugefügt. Solange der rote Knopf an ist, wird eine Änderung am Rechteck als Animation aufgezeichnet. Ich setze einfach die Background Farbe passend in jeweiligen States auf Rot oder Blau.

image

Um den Effekt mit fliessenden Übergang zu gestalten, aktiviere ich das Icon mit den Wellen ( Fluid Layout) und setze die Default Zeit auf 2 Sekunden.

Als nächstes wird dieses UserControl (Reiter Assets) auf eine neue XAML Page gezogen. Im Reiter Assets findet sich ein weiters neues wunderbares Feature von Expression Blend 3, die behaviours. Von dort ziehe ich das GoToStateAction Behavior auf das Control, das eine Änderung des UI Status bewirken soll.

image

Da ich zwei Stati habe, brauche ich auch zwei GoToStateAction, um diese Statusänderung zu steuern. Alles weitere ist schon Kinderspiel. Über den Trigger Dialog (ja ich weis, Trigger gibts doch nicht mehr),  der GotoStateActionkann man festlegen, welches Event, welche Statusänderung auslösen soll.

image

Diese und weitere Tricks lernt man in meine Silverlight Kurs oder Expression Blend Schulungen.

Kommentar schreiben