Abbildung 3.31: Anwenden einer Formatvorlage auf einen Button
Ein wichtiger Unterschied im Gegensatz zu einzelnen als Ressource
abgelegten Werten besteht bei Formatvorlagen darin, dass sie für
einen bestimmten Elementtyp, den sogenannten TargetType, angelegt
werden müssen. Sie können somit keine Formatvorlage für
ein Label direkt auf einen Button anwenden. Dazu müssten Sie eine
Steuerelementvorlage erstellen, darin ein Label platzieren und auf
dieses den Style anwenden. Mehr zum Thema Steuerelementvorlagen
finden Sie im Abschnitt »Anpassen von Steuerelementen mit
Steuerelementvorlagen« weiter hinten in diesem Kapitel.
Eine weitere Besonderheit ist die Möglichkeit, Formatvorlagen ohne
Namen anzulegen, und sie somit automatisch auf alle Elemente des
entsprechenden Typs anzuwenden.
Das automatische Anwenden einer Formatvorlage ist Webprogrammierern
von den Cascading Stylesheets bekannt: Auch dort
gibt es die Möglichkeit, alle Elemente eines Typs (zum Beispiel
TABLE oder A) zu formatieren.
Arbeiten mit Eigenschaftsauslösern
Sie haben sich vielleicht die Frage gestellt, warum die fixierten
Eigenschaften einer Formatvorlage im Interaktionspanel visualisiert
werden. Die Antwort führt zu den Eigenschaftsauslösern. So wie
Storyboards von Ereignissen aus gesteuert werden können, können
Eigenschaftswerte durch Eigenschaftswertwechsel gesteuert werden.
Anders ausgedrückt: Wenn sich eine Eigenschaft in einer Formatvorlage ändert, können daraufhin andere Eigenschaftswerte einen
anderen Wert zugewiesen bekommen. Sie können somit innerhalb
einer Formatvorlage Eigenschaftswerte definieren, die nur unter
bestimmten Umständen tatsächlich in Kraft treten sollen.
Die Praxis macht es deutlicher - im Folgenden wird die Formatvorlage
des vorangehenden Abschnitts um einen MouseOver-Effekt per
Eigenschaftsauslöser ergänzt:
Erstellen Sie eine Formatvorlage für einen Button wie im Abschnitt »Erstellen einer Formatvorlage« beschrieben.
Klicken Sie im Interaktionspanel im Bereich Auslöser auf
+ Eigenschaft, um einen Eigenschaftsauslöser hinzufügen. Die
nun erscheinenden Konfigurationsmöglichkeiten ähneln sehr
denen von Ereignissen und dem Steuern von Storyboards (siehe
den Abschnitt »Auslöser in WPF« in diesem Kapitel). Der rote
Kreis über der Zeichenfläche signalisiert auch hier, dass alleÄnderungen nun aufgezeichnet werden. Des Weiteren ist oben
im Bereich Auslöser des Interaktionspanels ein neuer Eintrag
hinzugekommen, der 1sCancel == False lautet. Diese Zeile bedeutet'
dass dies die Bedingung ist, die erfüllt sein muss, damit die
weiter unten im Interaktionspanel definierten Eigenschaftswerte
aktiviert werden sollen.
Ändern Sie die auslösende Eigenschaft von 1sCancel zu 1sMouseOver,
indern Sie wie in Abbildung 3.32 zu sehen, auf den
nach unten gerichteten Pfeil neben der auslösenden Eigenschaft
klicken und 1sMouseOver wählen.
Die Standardsteuerelemente sind sehr umfangreich und zum Teil
mit dem Betriebssystem verzahnt. Wenn Sie Designanpassungen auf
deren Basis realisieren, werden Sie zu Beginn sicherlich an einigen
Stellen auf Sachverhalte stoßen, die das Design in unerwarteter
Weise reagieren lassen. Abhilfe können die SimpleStyles leisten.
Diese Steuerelementbibliothek wird mit Expression Blend ausgeliefert
und stellt für Designanpassung bereits vorbereitete Steuerelemente
dar. Sie finden sie in der Objektbibliothek über das unterste Symbol
der Werkzeugpalette. Allerdings sind nicht alle Steuerelemente
dieser Bibliothek vollständig implementiert, beispielsweise besitzt
die Checkbox keinen dritten Status (»Third State«), sodass Sie die
Funktionstüchtigkeit im Detail für Ihren Fall validieren müssen.
Abbildung 3.32: Konfiguration eines Eigenschaftsauslöser
Anstelle des rechts neben der Eigenschaft gesetzten Wertes False
geben Sie True ein. Wenn Sie nun Änderungen an Eigenschaftswerten
vornehmen, werden sie nur aktiv, wenn Sie mit der Maus über den Button fahren.
Vergrößern Sie nun den Button um 10 %, indern Sie im Eigenschaftenpanel
im Bereich Transformation und im Unterregister
Skalierungfür X und Y jeweils 1,1 angeben. Des Weiteren vergrößern
Sie den Text, indern Sie als Schriftgröße im Bereich Text
16 angeben. Die Einstellungen sollten wie in Abbildung 3.33
aussehen.
Abbildung 3.33: Gesetzte Eigenschaftswerte in einem Eigenschaftsauslöser
Starten Sie die Anwendung über den Menübefehl Projekt/Projektmappe
testen oder die Taste [F5]. Fahren Sie mit der Maus über den Button und sehen Sie, wie sich der Button und die
Schrift vergrößern. Allerdings wird Ihnen auch auffallen, dass
die Hintergrundfarbe bei MouseOver kurz die gewünschte gelbe,
dann aber wieder zur Standardhintergrundfarbe eines Buttons
wird! Das liegt daran, dass Sie einen vollständigen Standardbutton
bei Anlegen der Formatvorlage als Vorlage genommen
haben und ein solcher Button noch tief greifende Mechanismen
zur Designanpassung beinhaltet. In diesem Fall ist weiter im
technischen Hintergrund, um genau zu sein in der Steuerelementvorlage,
eine Animation definiert, die die Farbänderung bei
MouseOver fixiert. Wie Sie Steuerelementvorlagen verwenden,
werden Sie im folgenden Abschnitt »Anpassen von Steuerelementen
mit Steuerelementvorlagen« kennenlernen.