Expression Blend 3 – Effekte für Controls

by Gregor Biswanger 30. April 2009 05:05

Am 19.März 2009 veröffentlichte Microsoft neben der Betaversion von Silverlight 3, auch Expression Blend 3 in der Preview-Version (CTP). Bei Expression Blend 3 hat sich einiges getan, was auf den ersten Blick nicht so ersichtlich ist. Neu dabei wären zwei unterschiedliche Effekte für WPF- und Silverlight-Anwendungen. In der „Objects and Timeline“ können beim Aufzeichnen von Animationen diese an Controls definiert werden.

Der BlurEffect

Als Beispielanwendung wird ein neues WPF-Projekt erzeugt. Die Größe auf 400x400 Definiert und ein Image auf die Mitte gelegt. Dann wird unter „Objects and Timeline“ ein neues Storyboard mittels Plus-icon erstellt. Als Name wird der Standard „Storyboad1“ belassen.



Abb.1.1. – Neues Storyboard anlegen.

Expression Blend wechselt sofort in den Animation-Workspace. Jetzt können Links in der Toolbox die „Asset Library“ aufgerufen werden. Zu Beginn werden alle Standard-Controls angezeigt. Die Effekte liegen nun im Tabulator unter „Effects“.



Abb.1.2. – Effekte auswählen in der „Asset Library“

Für dieses Beispiel soll der BlurEffect mit gedrückter Maustaste auf das Image Control unter „Objects and Timeline“ gezogen werden.



Abb.1.3. – Der BlurEffect für das Image-Control

Unter dem Image-Control wird nun das Icon für den BlueEffect angezeigt. Das wird nun zu Beginn ausgewählt und im rechten Properties-Menü unter Miscellaneous der Radius auf 10 gesetzt. Das Image wird verschwommen und undeutlich angezeigt. In der Timeline wird unter dem Effekt automatisch ein Record Keyframe gesetzt.



Abb.1.4. – BlurEffect Einstellen

Dann wird ein Klick bei der Timeline auf der 2-Sekundenlinie gesetzt und der Radius auf 0 eingestellt.



Abb.1.5. – BlurEffect Animation erzeugen

Ein Trigger wird später für die Steuerung der Animation benötigt. Neben dem Projekte-Fenster befindet sich das Trigger-Fenster. Ein Trigger ist so eine Art Event, was auf bestimmte Aktionen ausgelöst werden soll. Bei einem neuen Storyboard wird dieser automatisch auf „Window.Loaded“ (Wenn Anwendung gestartet) gesetzt.

Bei diesem Beispiel soll die Animation gestartet werden wenn der Mauszeiger den Focus vom Bild erreicht. Dazu wird „Window.Loaded“ Markiert und darunter bei „When Window Loaded is raised“, auf Window das Image ausgewählt. Daneben kommt die Auswahl bei welchem Ereignis der Trigger gestartet werden soll. Hier wird MouseEnter für das Eintreffen der Maus verwendet. Damit der Trigger nun mit unserem Storyboard gebunden wird, muss mittels Plus-Icon daneben „Add new action“ das Storyboad mit der Aktion Begin gewählt werden. Bei einem kurzen Start der Anwendung mit der Taste F5, kann der Trigger live getestet werden.

Wenn der Mauszeiger das Bild verlässt soll das Bild wieder den ursprünglichen Zustand erhalten. Dazu wird mit + Event ein neuer Trigger erzeugt, der auf „Image“ – „MouseLeave“ gestellt wird. Unter deren Storyboard stellt Remove den Ursprung wieder her.



Abb.1.6. – Trigger erzeugen

Die Animation mit dem neuen Effekt wäre nun fertig. Mit ein wenig Feintuning in der Timeline kann dies noch ein wenig verbessert werden (z.B. 0,5 Sekunden).

Fazit

Unter Flash man erinnere sich an Swish, waren fertige Effekt-Animationen eine große Stärke. Microsoft bietet hier direkt in der Designer-Anwendung fertige Effekte, das sehr schön ist. Dennoch sind in der Preview-Version nur zwei dabei, das sich mit Sicherheit noch ändern wird. Umso spannender werden Effekte von Drittanbietern.



Wenn ihnen der Artikel gefallen hat oder er für sie hilfreich war, bitten "kicken" sie ihn.
kick it on dotnet-kicks.de

Kommentare

Powered by BlogEngine.NET 1.4.5.0
Theme by Extensive SEO

Über den Autor

Gregor Biswanger

Microsoft MVP für Client App Dev
XING

Gregor Biswanger (Microsoft MVP für Client App Dev) ist freier Consultant, Trainer, Autor und Speaker.


Seine Schwerpunkte liegen im Bereich der .NET-Architektur, agilen Prozessen und XAML. Er veröffentlichte vor kurzem seine DVD´s mit Video-Trainings zum Thema „Meine erste Windows 8 App“, „Windows Store Apps mit XAML und C#“ und „WPF 4.5 und Silverlight 5“ bei Addison-Wesley von video2brain.


Biswanger ist auch im Auftrag von Intel GmbH als Technologieberater für die Intel Developer Zone aktiv und ist Leader bei der Ingolstädter .NET Developers Group (INdotNET). 

 

Video über mich:
http://www.youtube.com/watch?v=mx_6SiiLxjk


Basta! 2011 Speaker

CLIPer

MCTS
Windows SharePoint Services 3.0 – Application Development (MCTS)