1. 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.

2. 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… pour le développement d'applications Windows Phone.

2.1. 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).

Image non disponible

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

2.2. 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\ :

adding windows phone 7 toolkit

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.

3. Mise en place des transitions

3.1. Par le code XAML

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

 
Sélectionnez

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 :

 
Sélectionnez

<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 :

Image non disponible

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 :

 
Sélectionnez

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 terminé, nous pouvons lancer notre application et tester le résultat :

Image non disponible Image non disponible Image non disponible

3.2. 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 :

 
Sélectionnez

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).

4. 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.

5. 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 important 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.

6. 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.