Ab Silverlight 3 hat Microsoft es geschafft auf die GPU der Grafikkarte zuzugreifen und somit um die 3D Funktionalität erweitert. Beliebige Controls können folglich auf die unterschiedlichen Axen: X, Y und Z mittels Projection, eine 3D-Perspektive anzeigen lassen. Während dieses Feature für einige nur Spielereien sind, ist es wiederum für andere eine neue Möglichkeit der Usability Gestaltung. Als Beispiel wäre hier eine Flip3D Integration, die den Benutzer weitere Informationen auf der Rückseite einer Oberfläche anbieten kann. Dabei Animiert die Oberfläche als würde Sie sich nur umdrehen.

Um das 3D-Feature an einem Control einsetzen zu können, wird ein Unterelement mit Projection Deklariert. Darin wird ein weiteres Element mit einem Namen und Rotationen festgelegt. Bei einem einfachen Button würde der XAML-Code folgend aussehen:

Abb.1.1. – Ein Button in 3D Ansicht.

Abb.1.2. – XAML-Code für Projection

Dabei bleibt die volle Funktionalität der Controls beibehalten.

Oberflächen aufbauen

Der erste Schritt wäre das Aufbauen der beiden Oberflächen „Vorderseite“ und „Rückseite“. Das wird in diesem Beispiel mit zwei unterschiedlichen Grid-Elementen gemacht. Dabei bekommen beide einen Namen und die gleiche Größe. Unterschiedlich ist jedoch nur der Inhalt. Bei der ersten Oberfläche wird mittels Textbox der Name des Anwenders abgefragt. Wichtig hierbei ist bereits das Definieren von Projection, damit später darauf zugegriffen werden kann.

Abb.1.3. – Die erste Oberfläche (Vorderseite).

Abb.1.4. – XAML-Code für die erste Oberfläche

Als nächstes muss die zweite Oberfläche also die Rückseite aufgebaut werden. Der Anwender wird von seiner Eingabe in der TextBox mittels Element-Data-Binding (Neu ab Silverlight 3) im TextBlock begrüßt. Auch hier wird Projection definiert, allerdings mit einer Verschiebung der Ansicht. Das muss gemacht werden, damit diese Oberfläche nicht die erste Oberfläche überdeckt. Denn beide Grid-Oberflächen müssen in einer XAML liegen. Um das Umzusetzen muss nur die RotationY auf 270° gestellt werden.

Abb.1.5. – XAML-Code für die zweite Oberfläche (Rückseite)

Animation hinzufügen

Dass nun zwischen den beiden Oberflächen gewechselt werden kann, müssen zwei Animationen hinzugefügt werden. Animationen werden unter XAML in Storyboards gehalten. Daher wäre ein Storyboard für die Animation zur Rückseite und das zweite für das Anzeigen der Vorderseite zuständig. Die beiden Storyboards müssen als Resources außerhalb der beiden Grid´s liegen. Die Oberfläche der Vorderseite „GridUser“ wird dabei um 90° gedreht. Daraufhin wird die Rückseite „GridUserWelcome“, die sich bereits auf 270° befindet, auf 360° gedreht. Damit auf die 3D Funktionalität zugegriffen werden kann, muss mittels TargetName explizit auf die Projectionnamen Deklariert werden. Das TargetProperty gibt den Zugriff auf die einzelnen Eigeschaften der Projection. In diesem Fall wäre es RoationY.

Abb.1.6. – XAML-Code für die Animation

Als letzter Schritt müssen von beiden Oberflächen die Buttons mit Logik Programmiert werden. Obwohl hierbei die Logik nichts anderes ist, als die Animationen der Storyboards zu Starten.

Abb.1.7. – Source-Code der beiden Buttons

Das Flip3D ist jetzt fertig. Bei einer Business-Software können mit dieser Funktionalität eine ganz andere Perspektive zur Datenpflege aufgebaut werden.

Abb.1.8. – Die fertige Flip3D Anwendung

Fazit

Inspiriert von dieser Darstellung der Daten mittels Flip3D, wurde ich von Oliver Scheers – Silverlight 3 Beispielen. Hierbei finde ich sehr schön wie man den Wechsel der Inhalte angezeigt bekommt. Sehr Interessant dabei ist die integrierte Reflection, die bereits zur Laufzeit die nächste Oberfläche zur Verfügung stellt.

Source-Code Download

SilverlightFlip3DExample.zip (559,22 kb)

Wenn ihnen der Artikel gefallen hat oder er für sie hilfreich war, bitten "kicken" sie ihn.