Windows Phone - Übergangsanimationen

Oftmals sind es die Kleinigkeiten, die etwas Gutes von etwas Großartigem unterscheiden. Die minimalen Unterschiede, die sofort ins Auge springen und einfach ein runderes Bild erzeugen – so ist es auch bei Apps. Viele der nützlichen kleinen Helfer im Store wurden mit einem riesigen Zeitaufwand entwickelt und doch gibt es zu viele unter ihnen, die die kleinen Eigenheiten von Windows Phone nicht vollständig unterstützen. Eine solche Eigenheit sind Übergangsanimationen.

Jedem Windows Phone Benutzer begegnen sie täglich unzählige Male: beim Öffnen von Apps, beim Antippen von Emails, sogar beim Lesen von Textnachrichten. Bei jedem Tippen auf dem Bildschirm wird nicht nur eine neue Seite statt der Vorhergehenden angezeigt, sondern es gibt eine kleine Animation, bei der meist die zuvor aktiv gewesene Seite irgendwie aus dem Bildschirm bewegt wird, woraufhin die Neue dann – ebenso animiert – ihren Platz einnimmt. Und genau diese Animationen sollen im heutigen Blogeintrag im Fokus stehen.

Ausrüsten einer App mit Übergangsanimationen

Tatsächlich ist die Einbindung solcher Animationen geradezu kinderleicht. Alles was dazu nötig ist, sind ein paar wenige Zeilen XAML-Code (oder natürlich auch C#-Code, falls es vorgezogen wird, die Animationen per Hand beispielsweise im Code-Behind-File zu setzen – doch dazu später mehr) und die Verwendung des sogenannten Windows Phone Toolkits.

Beim Windows Phone Toolkit handelt es sich um ein offizielles Packet von Microsoft, welches ein paar nützliche kleine Helferlein liefert, die (wenn gewünscht) einfach in ein Projekt eingebunden werden können. Nähere Informationen zum Windows Phone Toolkit und zur Verwendungslizenz gibt es auf http://phone.codeplex.com/.

Installation des Windows Phone Toolkit

Doch mit dem Source-Code wollen wir uns nun gar nicht lange aufhalten, denn es gibt glücklicherweise auch ein NuGet-Package, welches die Installation drastisch vereinfacht. Im Gegensatz zum manuellen Einbinden der Controls genügt hier lediglich ein rechter Mausklick auf das Projekt und die Wahl des Menüpunkts „Manage NuGet Packages…“. Ich bitte die englische Sprache meiner Visual Studio-Installation zu entschuldigen, der Menüpunkt sollte jedoch auch im Deutschen ganz ähnlich betitelt sein und sieht in etwa so aus:

Im aufscheinenden Dialog suchen wir nun nach „wptoolkit“ im Reiter „Online“ und klicken dort auf Installieren, bis das grüne Häkchen neben dem Windows Phone Toolkit aufscheint:

Das war’s schon, nun sind die Funktionen des Windows Phone Toolkits in ihrer vollen Pracht in unserem Projekt verfügbar! :)

Tipp: Sollte die Installation nicht gleich auf Anhieb funktionieren, so kann es hilfreich sein den NuGet Package Manager zu aktualisieren, bzw. die neuesten Updates für Visual Studio zu installieren.

Änderungen im „Hintergrund“

Damit unsere Seiten in der Windows Phone App dazu befähigt sind überhaupt Animationen als Übergang anzuzeigen, müssen wir noch eine Kleinigkeit „hinter den Kulissen“ im Code-Behind-File der App.xaml ändern (App.xaml.cs).

Irgendwo sollte dort der RootFrame der App erzeugt werden. Wenn wir die Stelle gefunden haben, ersetzen wir die vorhandene Zeile RootFrame = newPhoneApplicationFrame(); durch Folgende: RootFrame = newTransitionFrame();.

Übergangsanimationen mittels XAML

Nun ist es möglich Animationen für die Seitenübergänge zu verwenden. Um dies auch zu tun, gehen wir wie folgt vor:

Wir öffnen die XAML-Datei der Page (in diesem Beispiel habe ich die Hauptseite MainPage.xaml gewählt), deren Übergänge wir animieren wollen und statten sie mit folgendem XAML-Code aus:

<toolkit:TransitionService.NavigationInTransition><toolkit:NavigationInTransition><toolkit:NavigationInTransition.Backward><toolkit:SlideTransitionMode="SlideRightFadeIn"/></toolkit:NavigationInTransition.Backward><toolkit:NavigationInTransition.Forward><toolkit:TurnstileTransitionMode="ForwardIn"/></toolkit:NavigationInTransition.Forward></toolkit:NavigationInTransition></toolkit:TransitionService.NavigationInTransition><toolkit:TransitionService.NavigationOutTransition><toolkit:NavigationOutTransition><toolkit:NavigationOutTransition.Backward><toolkit:TurnstileTransitionMode="BackwardOut"/></toolkit:NavigationOutTransition.Backward><toolkit:NavigationOutTransition.Forward><toolkit:SlideTransitionMode="SlideLeftFadeOut"/></toolkit:NavigationOutTransition.Forward></toolkit:NavigationOutTransition></toolkit:TransitionService.NavigationOutTransition>

Dummerwiese ist dem Compiler natürlich erst einmal nicht ganz klar, was wir mit toolkit: meinen. Dies lässt sich jedoch glücklicherweise leicht ändern, in dem wir diesen Namespace im Kopf der XAML-Datei definieren:

nach dem Hinzufügen sollte der Anfangstag des XAML-Codes in etwa so aussehen:

<phone:PhoneApplicationPagex:Class="AnimationExample.MainPage"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"mc:Ignorable="d"FontFamily="{StaticResource PhoneFontFamilyNormal}"FontSize="{StaticResource PhoneFontSizeNormal}"Foreground="{StaticResource PhoneForegroundBrush}"SupportedOrientations="Portrait"Orientation="Portrait"shell:SystemTray.IsVisible="True">

Das sollte es eigentlich schon gewesen sein – sobald die Hauptseite unserer Applikation aktiv wird, erscheint sie schön animiert auf dem Bildschirm. Eine einzelne Seite ist aber natürlich nur die halbe Miete. Für eine konsistente User Experience sollte jede Seite der App diese Animationen verwenden und zwar so, dass die Animation für den Benutzer natürlich erscheint (gleitet etwa Seite 1 links aus dem Bild, sollte Seite 2 von der rechten Seite kommen).

Um dies zu demonstrieren legen wir noch zwei weitere Seiten an, die wir beide zunächst mit etwas Inhalt ausstatten.

Eine davon (in diesem Fall Page1) bekommt von uns SlideTransitions als Übergangsanimationstyp, die andere TurnstileTransitions, sodass wir am Ende im XAML folgende Aufteilung erhalten:

• Page 1
  • Backward-In: SlideRightFadeIn
  • Forward-In: SlideLeftFadeIn
  • BackwardOut: SlideRightFadeOut
  • ForwardOut: SlideLeftFadeOut
• Page 2
  • Backward-In: BackwardIn
  • Forward-In: ForwardIn
  • BackwardOut: BackwardOut
  • ForwardOut: ForwardOut

Jetzt statten wir unsere Hauptseite noch schnell mit zwei Buttons aus, deren Click-Events wir für die Navigation verwenden. Dies könnte etwa so aussehen (analog für Page 2 im Click-Event des zweiten Buttons):

privatevoid Button_Click_1(object sender, RoutedEventArgs e)
{
    NavigationService.Navigate(newUri(@"/Page1.xaml", UriKind.Relative));
}

So, nun sollte alles schon animiert über den Bildschirm „fliegen“. Aber es gibt da noch ein kleines Problem – normalerweise würde man in einer App dieselbe Art von Animation für alle Seiten verwenden, um den User nicht zu verwirren. In unserem Fall verwenden wir jedoch verschiedene Übergangstypen. Das Problem, welches nun entsteht, ist folgendes: Bei der Navigation aus unserer Hauptseite (welche SlideTransitions beinhaltet) in Page 2 (Turnstile-Transitions) passen die Animationen nicht zusammen. Die Erste gleitet aus dem Bild, woraufhin die zweite Seite umgeblättert wird – es wäre doch irgendwie wünschenswert, wenn wir das im Hintergrund mittels C# On-Demand ändern könnten.

Übergangsanimationen mittels C#

Glücklicherweise ist auch dies kein Problem und erfolgt mittels folgendem Code (in unserem Fall direkt vor der Navigation):

NavigationInTransition navigateInTransition = newNavigationInTransition();
navigateInTransition.Backward = newTurnstileTransition { Mode = TurnstileTransitionMode.BackwardIn };
navigateInTransition.Forward = newTurnstileTransition { Mode = TurnstileTransitionMode.ForwardIn };NavigationOutTransition navigateOutTransition = new NavigationOutTransition();
navigateOutTransition.Backward = newTurnstileTransition { Mode = TurnstileTransitionMode.BackwardOut };
navigateOutTransition.Forward = newTurnstileTransition { Mode = TurnstileTransitionMode.ForwardOut };TransitionService.SetNavigationInTransition(this, navigateInTransition);TransitionService.SetNavigationOutTransition(this, navigateOutTransition);

Der Code funktioniert exakt wie das XAML-Pedant: kurz vor der Navigation zu Page 2 werden die Übergangsanimationen von der Hauptseite jeweils auf die entsprechenden Turnstile-Transitions geändert. Nun passen auch die Animationen von der Hauptseite in Page 2 und wieder zurück korrekt zusammen:

Da wir nun jedoch beim Click auf den Button für Page 1 nicht mehr sicher sein können, dass die richtigen Übergänge gesetzt sind, müssen wir dort ebenfalls die Animationen per Hand festlegen. Nachdem dies geschehen ist, sollten alle Animationen in unserer App wieder korrekt ablaufen!

Ich kann nur jeden ermutigen einmal ein wenig mit solchen Kleinigkeiten herumzuspielen, denn durch die fließenden Übergänge gewinnt eine App enorm an Usability und als positiven Nebeneffekt hat Euer Code ein paar Augenblicke länger Zeit, um Daten im Hintergrund zu laden!

Blogeinträge und Ressourcen

Wie immer gibt es auch hier am Ende einen Link auf ein kleines Visual Studio Projekt, welches die Erklärungen von oben noch einmal – in Code gegossen – vollständig beinhaltet. Das Projekt findet Ihr an dieser Stelle:

Zu guter Letzt

Bevor ich nun vollends den Rahmen sprenge, höre ich lieber an dieser Stelle auf und bedanke mich für Eure Aufmerksamkeit! Anregungen, Wünsche und (hoffentlich positive) Kritik sind – wie immer – im Kommentarbereich willkommen.

Abschließend viel Spaß beim Spielen mit den Seitenübergängen, Dankeschön noch einmal für’s Lesen und bis zum nächsten Mal!