WPF, Silverlight, Silverlight for Windows Phone und Metro Style Apps

Windows Phone: Animierte Navigation
Kommentare

In der neuen Kolumne „XAML Expertise“ des Windows Developer präsentiert Gregor Biswanger Top-How-tos zum Thema XAML. Einsteiger und fortgeschrittene XAML-Experten sollen hier durch geballtes Wissen gesättigt werden. Heute gibt es folgende Expertise: „Windows Phone: Animierte Navigation“.

Die Navigation unter Windows Phone wirkt eher leblos. Um das zu ändern, erweitert man die Navigation durch Animationen. So erhält man einen interaktiven und dynamischen Eindruck für die eigene Windows-Phone-App. In der Standard-Runtime gibt es keine fertigen Animationen, dazu dient das kostenfreie Windows-Phone-Toolkit. Dieses lässt sich ganz einfach mit NuGet in das eigene Projekt referenzieren.

In der App.xaml.cs-Datei befindet sich innerhalb der InitializePhoneApplication()-Methode die Zuweisung des RootFrames. Diese befindet sich in einer Region die standardmäßig zugeklappt ist. Hier tauscht man die Zuweisung des RootFrames auf ein neues Seitensteuerelement mit dem Namen TransitionFrame aus:

RootFrame = new TransitionFrame();

Der RootFrame zeigt alle Seiten an und kümmert sich um die Navigation. Dieser wird nun gegen eine neue Version ausgetauscht, die Übergänge verwendet.

In einem Beispiel haben wir eine zweite Seite. Wenn auf diese navigiert wird, soll eine Animation stattfinden. Auch beim Verlassen durch den Back-Button wird ebenfalls eine Animation ausgelöst. Dazu wird erst das Toolkit im XML-Namespace referenziert:

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

Dann wird im Inhalt der PhoneApplicationPage eine Instanz vom TransitionService deklariert. Dazu gibt es zahlreiche Zustände und Animationen. Für das Beispiel wurde eine Slide-Animation beim Öffnen und Verlassen der Seite hinzugefügt (Listing 1).

Listing 1: Slide-Animation für eine XAML-Seite hinzugefügt

                                                                                                                                                      ...  

Auf jeder Seite sollten die unterschiedlichen Zustände von vier Animationen stehen, die angezeigt werden sollen. Die Eingangsanimation bei Vorwärtsnavigation (NavigationService.Navigate()), Ausgangsanimation bei Vorwärtsnavigation, Eingangsanimation bei Rückwärtsnavigation (Back-Button) und Ausgangsanimation bei Rückwärtsnavigation. Zur Auswahl stehen dabei unterschiedliche Animationsarten: Turnstile (das klassische Umblättern), Swivel (um die X-Achse umklappen), Roll (Drehung 0° – -90° – 0° mit Faden), Rotate (Rotation um 180° oder 90°) und Slide (zur Seite bewegen inklusive Fading).

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -