Unterschiede Pfade und Formen
Der große Vorteil der Flexibilität von Pfaden wird Ihnen in der Praxis
schnell zum Verhängnis. Pfade bestehen aus festen Koordinaten,
somit lassen sich ganze Pfade nicht ohne Weiteres ausrichten. Sie
müssen erst in ein Container-Element, zum Beispiel in ein Canvas,
eingefügt werden, und dieses Canvas kann dann ausgerichtet
werden. Bei komplexen Pfaden sind die resultierenden Daten derart
komplex, dass sie kaum noch bearbeitbar sind.
Der gravierendste Nachteil ist aber, dass Größenänderungen von
Pfaden gleichermaßen in Breite und Höhe vollzogen werden müssen.
Eine Größenänderung nur in eine Richtung führt zu Verzerrungen
des Pfades, wie Abbildung 3.17 verdeutlicht.
Abbildung 3.17: Ein Pfad,
dessen runde Ecken aufgrund
einer Verbreiterung des Pfades
verzerrt sind
Die Nachteile der Pfade im Überblick:
Pfade lassen sich nicht ausrichten.
Pfade können sich nicht dynamisch in eine Richtung ausdehnen,
sie verzerren stattdessen.
Pfade werden schnell derart komplex, dass sie kaum noch bearbeitbar
sind.
Somit eignen sich Pfade nur für die Gestaltung von Zeichnungen,
die nicht ihre Proportionen ändern. Typisches Einsatzgebiet von
Pfaden sind beispielsweise Symbole.
Formen hingegen bestehen aus spezifischen Eigenschaften, zum Beispiel
Höhe und Breite. Aus diesem Grund sind Formen ausrichtbar.
Und da sich bei Größenänderung nur die jeweilige Größe ändert,
alle anderen Eigenschaften wie der Radius aber gleich bleiben, kann
sich das Element ohne Verzerrung ausdehnen.
Abbildung 3.18: Ein
Rechteck, welches bei rund
bleibenden Ecken breiter
gezogen wurde
Pfade eignen sich für die Abbildung komplexerer Zeichnungen. Verwenden
Sie nie Pfade für die Gestaltung von Flächen, deren Größe
sich gegebenenfalls ändern kann. Verwenden Sie stattdessen die
Formen Rechteck und Ellipse. Komplexe Formen lassen sich häufig
durch Kombination mehrerer Border umsetzen.
Animation und Auslöser in WPF
Die Möglichkeit, Animationen zu erstellen, ist eine der Neuerungen,
die WPF für das clientseitige User Interface mitbringt. Das Erstaunliche
ist, dass sich beliebige Animationen definieren lassen und
diese sich direkt über den XAML-Code und somit auch direkt über
Expression Blend steuern lassen. Es besteht keine Notwendigkeit zu
komplexer .NET-Programmierung.
In den folgenden beiden Abschnitten wird anhand eines praktischen
Beispiels gezeigt, wie einfach Sie mit Expression Blend eine Animation
erstellen können, die die Farbe eines Rechtecks ändert und die
bei Klicken auf das Rechteck ausgelöst wird.
Silverlight bietet des Weiteren ein neues Statusmodell, den Visual
State Manager, welcher es ermöglicht, Objekten zunächst unabhängige
visuelle Status zuzuordnen und diese dann anzusteuern.
Es gibt bereits Bestrebungen, dieses Statusmodell auch in WPF zu
integrieren. Somit ist in späteren Versionen von .NET Framework
mit einer Implementierung dieser Mechanismen zu rechnen.
Ich möchte an dieser Stelle noch einmal auf den Newsletter der
Community www.yourexpression.deaufmerksammachen.Er
informiert Sie über Neuerungen rund um die Thematik Microsoft
Expression.
Erstellen einer Animation
In diesem Abschnitt wird zunächst eine Animation erstellt, die
die Farbe eines Rechtecks von Blau auf Grün ändert. Im Anschluss
daran wird gezeigt, wie diese Animation nach Klicken auf das
Rechteck angestoßen werden kann.
Um in WPF eine neue Animation zu erstellen, gehen Sie wie folgt
vor:
Erstellen Sie ein neues WPF-Projekt.
Fügen Sie ein neues Rechteck in das LayoutRootdurch Doppelklicken
auf das Symbol in der Werkzeugpalette ein. Es wird von
Expression Blend mit den Dimensionen 100 x 100 Pixel und der
Ausrichtung oben links eingefügt.
Färben Sie das Rechteck über das Eigenschaftenpanel ein. Eine
Beispielfärbung anhand eines GradientBrush können Sie Abbildung
3.19 entnehmen.
Erstellen Sie eine neue Animation, indern Sie im Interaktionspanel
unter Objekte und Zeitachsen rechts oben das Plus anklicken.
Ein kleines Dialogfeld öffnet sich, in dem Sie aufgefordert
werden, einen Namen für das Storyboard zu vergeben (siehe
Abbildung 3.20).
Abbildung 3.19: Ein Rechteck mit Farbverlauf als Ausgang einer Animation
Geben Sie einen beliebigen Namen ein und klicken Sie auf
OK. Die Zeitachse blendet sich rechts im Bereich Objekte und
Zeitachsen ein, ein roter Kreis über der Zeichenfläche signalisiert'
dass alle Veränderungen zum markierten Zeitpunkt auf der
Zeitachse aufgenommen werden.
Abbildung 3.20: Benennen eines neuen Storyboards
Wählen Sie den Menübefehl Fenster/Aktiver Arbeitsbereich/Animationsarbeitsbereich
oder drücken Sie [F6]. Der Animationsarbeitsbereich
ordnet die Fenster so, dass die Zeitachse mehr Platz
in der Horizontalen erhält.
Klicken Sie in der Zeitachse auf die 1, sodass sich der gelbe Zeitmarker
wie in Abbildung 3.21 an diese Stelle setzt. Wenn Sie nun
am Rechteck Änderungen egal welcher Art vornehmen, werden
sie in der Zeitachse bei Sekunde 1 festgehalten.
Abbildung 3.21: Zeitmarker im Animationsarbeitsbereich
Falls das Rechteck nicht mehr aktiviert sein sollte, wählen Sie es
jetzt unter Objekte und Zeitachsen an und öffnen anschließend
das Eigenschaftenpanel.
Ändern Sie eine der Farben des Rechtecks. In Abbildung 3.22
wurden die Blautöne bei gleicher Position im Farbverlauf durch
Grüntöne ersetzt. Bei Sekunde 1 der Zeitachse zeigt ein grauer
Punkt auf Höhe des Rechtecks an, dass zu diesem Zeitpunkt eine
Eigenschaft einen anderen Wert angenommen haben soll.
Führen Sie die Animation aus, indern Sie den Abspiel-Buttonüber der Zeitachse anklicken. Die Farbe des Rechtecks ändert
sich von Blau nach Grün.