Der Glass-Look ist nicht tot zu kriegen. Obwohl allerorten Purismus im UI-Design angeraten wird, erfreuen sich glänzende Icons, schimmernde Header und gläserne Buttons ungebrochener Beliebtheit. Es muss wohl die menschlich-infantile Ur-Liebe zum “Bling-Bling” sein, die uns zu solchen Kindereien treibt. Da wollen wir natürlich nicht hintenan stehen, und anstatt zu lästern zeige ich euch, wie’s richtig geht: Nämlich in Silverlight. Der Vorteil liegt auf der Hand: Wir können den Button nicht nur flexibel platzieren, zoomen und rotieren, sondern -egal ob in einem Webprojekt oder einer Softwareoberfläche- auch jederzeit verändern, umdesignen und vor allem weich und flüssig animieren. Darüber hinaus kostet der Aufbau eines solchen Buttons mit etwas Übung nur wenig Zeit. Grafiker, die nur Photoshop oder Illustrator kennen, werden sich mit der Vektorgrafik von Expression Blend anfangs etwas schwer tun. Zum Einstieg bauen wir also zusammen diesen Silverlight-Button hier:

1. Und los gehts! Öffne Expression Blend, lege ein Silverlight-Project an und erstelle eine beliebige Seite. Ziehe ein beliebiges Rechteck in deiner Seite auf. Es ist nicht von Nachteil, wenn es größenmäßig bereits dem späteren Button entspricht.

2. Rufe mit einem Rechts-Klick Im Objects-Tab auf das Rectangle die Option “Make into Control” auf und wähle den normalen Button.

3. Du erhälst nun ein Button-Template ohne den üblichen unübersichtlichen und überfrachteten Kram, der in einem von Blend normalerweise angebotenen Silverlight-Standard-Button steckt. Ich möchte dies vorgefertigten Default-Controls nicht schlecht reden, wenn man etwas länger mit ihnen arbeitet, lernt man, daß sie sinnvoll konstruiert sind. Nur: Für den Einstieg erschlagen sie den unbedarften Grafiker mit ihren vielen verschachtelten Layern, von denen man nicht weiss, wozu sie dienen. Deshalb bauen wir den Button von 0 auf neu, uns geht es erst einmal ums Prinzip. Unser Template besteht also nun aus einem Grid, das unser Rechteck und einen Content Presenter enthält:

4. Nun können wir bereits ein bisschen designen: Benenne das Rechteck um in “Back_normal”. Dann runde seine Ecken bei den Properties ab (je nach Buttongröße ist ein Wert zwischen 2 und 12 Pixeln sinnvoll) und fülle das Rechteck mit einem schönen, nicht zu hellen Farbgradienten. Den Stroke lassen wir so, wie er ist: schwarz und dünn. Der Gradient sollte senkrecht oder leicht nach rechts geneigt von dunkel zu hell abfallen. Das ist wichtig, denn wie bei einem Juwel oder Schmuckstck sehen wir eigentlich nicht die transparente Vorder- sondern die eingefasste Rückseite des Gegenstandes. Diese Rückseite ist von uns weg gewölbt und da das Licht von oben kommt, ist der obere Teil der Rückseite im Schatten, während der untere angestrahlt wird.

5. Als nächstes gib der Rückseite mehr 3D-Effekt, indem du Lichtkanten baust, also sie an den Kanten “abrundest”. Dazu kopiere das Rechteck im Object-Tab und nenne es “InnerShadow_bottom”. Deaktiviere den Stroke, den brauchen wir jetzt nicht. Gib den beiden Farben des senkrechten Füllgradienten im Property-Tab ein sattes Schwarz und setze den Alpha-Wert der oberen Farbe auf 0. Ich weiss, daß sieht jetzt erstmal seltsam aus, aber im nächsten Schritt macht es Sinn.

6. Nun verschiebe in den Proberties in der Gradient-Anzeige die transparente Farbe so lange zur anderen (undurchsichtigen) Farbe hin, bis sich der Gradient auf einen vergleichsweise kleinen Bereich des Rechtecks beschränkt. Der untere Rand des Rechtecks ist nun abschattiert. Mit etwas Fingerspitzengefühl kann man natürlich auch das Gradient-Werkzeug verwenden, doch bei seriösen Anwendungen arbeite ich gerne numerisch, so daß am Ende, wenn man viele Controls designed hat, alles möglichst ordentlich aussieht.

7. Kopiere wiederum dieses Rechteck und nenne es “innerShadow_right”. Rotiere dessen Gradienten mit dem Gradient-Werkzeug um 90° gegen den Uhrzeigersinn und passe diesen in den Properties ein wenig an, so daß er gleich breit wie der InnerShadow_bottom erscheint.

8. Auch diese Prozedur wiederholst du, diesmal für die linke Seite (“InnerShadow_left”), doch diesmal ist die Füllfarbe Weiss. Das ist jetzt zwar alles kein Schatten im eigentlichen Sinne, aber wir wissen ja, was gemeint ist: Es geht um interne Lichteffekte.

9. Noch wirkt der Effekt ein wenig plump, wir sollten ihn abschwächen. Da es mühselig (und außerdem Pfusch) wäre, nun dreimal hintereinander an den Gradienten herum zu spielen, gehen wir folgendermaßen vor: Markiere die drei “InnerShadow”-Rechtecke im Object-Tab und wähle per Rechtsklick die Option “Group into grid”. Diese Gruppierung, dem wir folgerichtig den Namen “InnerShadow” geben, gibt uns nun die Möglichkeit, den Innenschatten über die Opacity als Ganzes so einzustellen, so daß er dezent, aber deutlich seinen Effekt zeigt. Wichtig hierbei der Grundsatz: wir wollen uns nicht in physikalischen Simulationen ergehen, sondern lediglich einen plakativen optischen Effekt erzeugen ohne die spätere Lesbarkeit des Buttons zu gefährden. Weniger ist mehr!

10. Nun kommt die Glaskappe an die Reihe, denn es soll ja ein Glas-Button sein. Und wieder machen wir eine Kopie von unserem Ausgangs-Rechteck. Den Stroke brauchen wir immer noch nicht, dafür färben wir den Gradient nun weiss ein, stellen ihn Senkrecht (wenn er das noch nicht ist), und zwar so, daß er oben untransparenter ist als unten. Das Objekt selbst machen wir ebenfalls teil-transparent, sobald wir das Transparenzverhältnis innerhalb des Gradients eingestellt haben. Als nächstes gibst du dem Rechteck ein Margin nach allen Seiten, wobei rechts, oben und links den gleichen (niedrigen) Wert haben, während das untere Margin sehr hoch ist und den Glanzeffekt auf die obere Hälfte des Buttons beschränkt. Hier heisst es: An den Werten so lange herumspielen, bis es gut aussieht; Versuch macht kluch. Aber Vorsicht, auch hier ist weniger mehr! Allzu aufdringliche Glanzeffekte schränken die Lesbarkeit des Buttons ein.

11. Eine andere Möglichkeit, Glass-Look zu erzeugen, ist die Verwendung eines sphärischen Gradients. Durch Verzerren des Gradienten und geschicktes Setzen der Transparenzen lässt eine andere Art von Spiegelung simulieren. Die halbrunde Glanzeffekt-Kante erzielen wir dadurch, daß im Gradienten Halb- und Volltransparenzen sehr nah beieinander liegen. Aber nicht übertreiben, denn wenn sie ZU nah beieinander liegen, wird das ganze pixelig.

12. Wie schon mehrfach erwähnt, ist Lesbarkeit im UI-Design einer der ehernen Grundsätze. Daher betonen wir den Content des Buttons nun mit einem Dropshadow-Effekt (Properties-Tab) und passen die Farbe der Schrift dort, wo der Button auf der Silverlight-Seite liegt, entsprechend an. Dazu müssen wir zurück zur in Schritt 1 angelegten Seite springen und den “Foreground” des Buttons einfärben. Diese Standard-Methode von Blend, Buttontexte einzufärben, mag ich übrigens nicht sonderlich und rate an anderer Stelle zu einer besseren, doch das würde nun zu weit führen; in diesem Tutorial soll uns das hier erst einmal genügen.

13. Wieder im Template zurück, kannst du nun bei Bedarf dem Objekt “Back_normal” noch einen Dropshadow schenken, der gilt dann für den gesamten Button. Warum Iih nicht einfach dem Button auf der Seite den Shadow-Effekt gebe? Das hat zwei Gründe: Erstens wollen wir den Button vielleicht mehrfach verwenden und da macht es Sinn, den Effekt im Template zu definieren, wenn wir ihn nicht jedes Mal auf der Seite neu zuweisen wollen. Zweitens würde der Effekt so auf alle (!) Objekte angewendet, die sich im Button befinden, und das wäre unsinnig. Erstens kann das zu seltsamen optischen Effekten führen, zweitens zieht das die Render-Perfomance von Silverlight in den Keller. Daher eine wichtige Grundregel: Dropshadows nur da, wo sie unbedingt nötig sind und auch nur auf wenige Polygone anwenden!

14. Was nicht heisst, daß wir nicht ein bisschen schwelgen dürfen. Durch Rechtecke (ohne Stroke natürlich), mit transparenten Verläufen können wir farbliche Akzente setzen:

15. Nun sieht unser Button schon ganz ansehnlich aus. Aber da wir von 0 auf angefangen haben, hat er keinerlei Mauszustände. Diese wollen wir nun erzeugen, und da es sich um Silverlight handelt, auch gleich nett animieren. Zu diesem Zweck begebe dich in das States-Tab und aktivier “MouseOver”. Dann öffne unten im Object-(and Timeline)Tab das entsprechende Storyboard, begebe dich zum Zeitpunkt “0:00,100″ und ändere die Farben von “Back_normal” in den MouseOver-Zustand. Wichtig hierbei: Keine neuen Farben auf dem Gradienten platzieren, sondern nur die bereits bestehenden Farbwerte ändern! Auch ein Umschalten von Gradient auf Solid Color geht später bei der Animation mit Sicherheit schief.

16. Wer mutig ist, kann nun folgendes ausprobieren und den Button federn lassen: Fasse die einzelnen Objekte des Buttons in ein neues Grid zusammen und wandle das Basis-Grid in ein Canvas um (Man könnte eigentlich auch das Basis-Grid in ein Canvas gruppieren, aber aus unerfindlichen Gründen stürzt dann mein Expression Blend ab!). Dann animiere im MouseOver-Zustand das neue Grid innerhalb des Canvas und lass es einige Pixel nach oben springen. Um den Effekt zu verstärken, sollte man den DropShadow mit animieren, er muss dann länger und balsser werden. Die jeweils apssenden Werte muss man wieder einmal durch Erfahrung herausfinden. Das Ergebnis ist ein Button, der dem Mauscursor äußerst motiviert entgegen springt.

Als nächstes wird ein neuer State geöffnet: MouseOver->Normal. Diesem gib eine Ease-Funktion “Elastic Out” (das kleine Graph-Icon im State-Header) und eine Interpolationszeit von 0,5. Der Button wird nun beim MouseOut elastisch zurückspringen und “elektrisch flackernd” seine Ursprungsfarbe annehmen. Die Ease-Funktion lässt den Button nach der jeweils  ausgewählten mathematischen Kurve in den Normalzustand zurückkehren. Das gilt für alle Parameter, die wir im MouseOver verändert haben!

Schick, nicht wahr? Ich glaube, um das prinzip zu verdeutlichen, reicht da sbisher Gezeigte. Auf all die vielen Animationsmöglichkeiten von Blend einzugehen, würde den Rahmen dieses Tutorials sprengen. Animationsübergänge dieser Art solltest du jedoch auf alle Button-Funktionen (unter anderem sind das “Pressed” und “Focused”) anwenden. Von großer Wichtigkeit ist, daß du kein Objekt über die “State-Group” hinaus animierst. In unserem Beispiel bedeutet das: Das Objekt “Back_normal” sollte nicht verwendet werden, um die “Focus-States” zu visualisieren, denn diese States gehören zu einer anderen Stategroup. Animiert man Objekte über mehere State-Groups, dann kann es zu optischen Fehlern und sogar zu Programmabstürzen kommen. Du musst für die Focus-Zustände also ein Extra-Objekt bauen, welches du dann entsprechend animierst bzw ein- und ausschaltest. In den Standard-Controls, die Blend anbietet, gibt es für jeden State eine besondere Objekt-Konstruktion, was deren Kompliziertheit unter anderem erklärt. Mit der Zeit werden auch deine selbst gebauten Controls komplexer werden.

Viel Spaß beim ausprobieren!