Les transitions pour Windows Phone 7

Kevin Perriat

Dans cet article, nous allons voir comment agrémenter nos applications Windows Phone d'animations. N'oubliez pas que la qualité visuelle de votre application est tout aussi importante que la qualité du contenu délivré.

Commentez cet article : Commentez ♪

- Titre : Les transitions pour Windows Phone 7

- Auteur : Kevin Perriat

- Parution : 20 avril 2012

- Licence : Copyright ® 2012 Kevin Perriat. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Introduction

- II. Toolkit Windows Phone 7

- II-A. Installation du Toolkit Windows Phone

- II-B. Intégration à la solution

- III. Mise en place des transitions

- III-A. Par le code XAML

- III-B. Par le code Behind

- IV. Différents types de transition

- V. Conclusion

- VI. Remerciements

I - Introduction

Lorsque l'on développe une application Windows Phone 7, on est souvent amené à utiliser plusieurs pages différentes.

Cet article est donc là pour vous apprendre à résoudre ce problème et à intégrer, au sein de vos applications Windows Phone 7, de belles transitions.

II - Toolkit Windows Phone 7

Comme indiqué dans l'introduction, les transitions ne sont pas fournies de base avec les outils de développements Windows Phone. Les développeurs ayant déjà touché à Silverlight doivent déjà connaître ce cas de figure. Nous allons devoir installer un toolkit, qui peut être vu comme un patch apportant plus de fonctionnalités, contrôles\x{0085} pour le développement d'applications Windows Phone.

II-A - Installation du Toolkit Windows Phone

Avant toute chose, nous allons devoir télécharger le toolkit Silverlight. Pour cela, rien de difficile : rendez-vous sur la page codeplex du projet Silverlight. Dirigez-vous ensuite dans la rubrique pour Windows Phone et téléchargez la dernière version (actuellement novembre 2011).

Pour installer le Windows Phone toolkit, il ne vous reste plus qu'à lancer le .msi et à suivre les différentes étapes.

II-B - Intégration à la solution

Maintenant que nous avons installé le toolkit, nous allons l'insérer dans notre projet pour pouvoir l'utiliser. Pour cela, ajoutons une nouvelle référence. La dll qui nous intéresse se trouve par défaut ici : C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.x\Toolkit\Feb11\Bin\ :

Il va maintenant falloir ajouter le toolkit dans notre page, afin de pouvoir utiliser les transitions. Pour cela, dans les namespaces de notre page, nous allons ajouter cette ligne :

Ainsi, quand on voudra faire appel au toolkit dans notre code XAML, il nous suffira d'utiliser le préfixe toolkit.

III - Mise en place des transitions

III-A - Par le code XAML

La première étape va être de modifier le type de notre RootFrame. Par défaut, celle-ci est de type PhoneApplicationFrame. Nous allons la passer en TransitionFrame. Pour cela, ouvrons notre fichier App.xaml.cs et modifions-le comme suit :

private void InitializePhoneApplication()
{
if (phoneApplicationInitialized)
return;

// Créez le frame, mais ne le définissez pas encore comme RootVisual ; cela permet à l'écran de
// démarrage de rester actif jusqu'à ce que l'application soit prête pour le rendu.
RootFrame = new TransitionFrame();
RootFrame.Navigated += CompleteInitializePhoneApplication;

// Gérer les erreurs de navigation
RootFrame.NavigationFailed += RootFrame_NavigationFailed;

// Garantir de ne pas retenter l'initialisation
phoneApplicationInitialized = true;
}

Maintenant, retournons sur notre page Main.xaml et ajoutons-y ce code XAML :

<toolkit:TransitionService.NavigationInTransition>
<toolkit:NavigationInTransition>
<toolkit:NavigationInTransition.Backward>
<toolkit:TurnstileTransition Mode="BackwardIn"/>
</toolkit:NavigationInTransition.Backward>
<toolkit:NavigationInTransition.Forward>
<toolkit:TurnstileTransition Mode="ForwardIn"/>
</toolkit:NavigationInTransition.Forward>
</toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>
<toolkit:TransitionService.NavigationOutTransition>
<toolkit:NavigationOutTransition>
<toolkit:NavigationOutTransition.Backward>
<toolkit:TurnstileTransition Mode="BackwardOut"/>
</toolkit:NavigationOutTransition.Backward>
<toolkit:NavigationOutTransition.Forward>
<toolkit:TurnstileTransition Mode="ForwardOut"/>
</toolkit:NavigationOutTransition.Forward>
</toolkit:NavigationOutTransition>
</toolkit:TransitionService.NavigationOutTransition>

Nous allons maintenant détailler ce code XAML. Sur Windows Phone, il existe deux évènements pour les transitions :

- Entrant (In) : correspond à l'arrivée sur la page ;

- Sortant (Out) : correspond au départ de la page.

Enfin, pour chacun de ces évènements, il existe deux sens :

- BackWard : correspond à un retour en arrière dans l'application ;

- Forward : correspond à une avancée dans l'application (on ouvre une nouvelle fenêtre).

Voici un petit schéma qui permettra de faire un point sur ces informations :

Cette petite explication des transitions terminée, nous allons mettre en place notre navigation. Pour cela, ajoutons un simple bouton sur notre vue principale et déclenchons la navigation sur le clic de celui-ci :

private void Button_Click(object sender, RoutedEventArgs e)
{
NavigationService.Navigate(new Uri("/PageDestination.xaml", UriKind.Relative));
}

Il ne nous reste plus qu'à créer la page PageDestination.xaml et à y inclure tout le XAML que nous avons vu précédemment. Une fois cela terminé, nous pouvons lancer notre application et tester le résultat :

III-B - Par le code Behind

Dans la première partie, nous avons vu comment mettre en place nos transitions par le XAML. Maintenant, nous allons voir comment les utiliser depuis le code. Cette méthode est moins « élégante » que la première, mais il peut être bon de la connaître.

Pour commencer, nous allons donc repartir de cet état :

- RootFrame changée en TransitionFrame ;

- deux pages avec un bouton sur la première pour la navigation.

Maintenant, ajoutons ce code au constructeur de notre fenêtre :

public MainPage()
{
InitializeComponent();

NavigationInTransition navigateInTransition = new NavigationInTransition();
navigateInTransition.Backward = new TurnstileTransition { Mode = TurnstileTransitionMode.BackwardIn };
navigateInTransition.Forward = new TurnstileTransition { Mode = TurnstileTransitionMode.ForwardIn };

NavigationOutTransition navigateOutTransition = new NavigationOutTransition();
navigateOutTransition.Backward = new TurnstileTransition { Mode = TurnstileTransitionMode.BackwardOut };
navigateOutTransition.Forward = new TurnstileTransition { Mode = TurnstileTransitionMode.ForwardOut };

TransitionService.SetNavigationInTransition(this, navigateInTransition);
TransitionService.SetNavigationOutTransition(this, navigateOutTransition);
}

Si vous faites un essai à ce niveau-là, vous verrez apparaître votre nouvelle transition (pensez à supprimer les anciennes transitions du code XAML).

IV - Différents types de transition

Comme vous avez pu le voir, le modèle de transition entre notre exemple en code XAML et notre exemple en code behind ne sont pas les mêmes. En effet, le toolkit Windows Phone nous donne l'accès à plusieurs types d'animations, afin de pouvoir vraiment contrôler le rendu de notre application. Voici un listing des types de transitions possibles :

- RollTransition ;

- RotateTransition ;

- SlideTransition ;

- SwivelTransition ;

- TurnstileTransition.

V - Conclusion

Dans cet article, nous avons donc vu comment agrémenter notre application de belles transitions. Comme dit précédemment, n'oubliez pas que l'apparence de votre application est tout aussi importante que le contenu de celle-ci.

À titre personnel, je vous recommande fortement d'utiliser le code XAML. En effet, cela permet de séparer la logique métier de la logique visuelle, ce qui correspond à l'utilisation du pattern MVVM.

VI - Remerciements

Je tiens à remercier jacques_jean pour sa relecture ainsi que Jean-Michel Ormes et toute l'équipe de la rubrique .NET pour leurs précieux conseils.