Les transitions pour Windows Phone 7

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.

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.

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 :

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