• Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 29/04/2014

TP 2 : Créer une animation de transition entre les pages

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Maintenant que nous avons vu comment naviguer entre les pages et que nous savons faire des animations, il est temps de nous entrainer dans un contexte combiné. Le but bien sûr est de vérifier si vous avez bien compris ces précédents chapitres et de vous exercer.

Ce TP va nous permettre de créer une animation de transition entre des pages et par la même occasion embellir nos applications avec tout notre savoir :) .

Instructions pour réaliser le TP

Nous allons donc réaliser une animation de transition entre des pages, histoire que nos navigations soient un peu plus jolies.
Vous allez créer une application avec deux pages. Vous pouvez mettre ce que vous voulez sur les pages, une image, du texte…, mais il faudra que la première page possède un bouton permettant de déclencher la navigation vers la seconde page.
L’animation fera glisser le contenu de la page vers le bas jusqu’à sortir de l’écran tout en réduisant l’opacité jusqu’à la disparition. L’animation ne sera pas trop longue, disons ½ seconde, voire 1 seconde (ce qui est déjà long !).
L’affichage de la seconde page subira aussi une transition. L’animation fera apparaître le contenu de la page comme si elle apparaissait d’en haut et l’opacité augmentera pour devenir complètement visible. Bref, l’inverse de la première transition.

Vous vous le sentez ? Alors, à vous de jouer.

Si vous vous le sentez un peu moins, je vais vous donner quelques indications pour réaliser ce TP sereinement.
La première chose à faire est d’animer le contenu de la page. Dans tous nos exemples, nous avons utilisé un conteneur racine (bien souvent une Grid), qui contient tous les éléments de la page. Il suffit de faire porter l’animation sur ce contrôle pour faire tout disparaître.
Ensuite, même si cela fonctionne, il est plus propre d’attendre la fin de l’animation pour déclencher la navigation. Il faut donc s’abonner à l’événement de fin d’animation et à ce moment-là déclencher la navigation.
Enfin, pour démarrer la seconde animation, il faudra le faire depuis la méthode qui est appelée lorsqu’on arrive sur la seconde page.
Voilà, vous savez tout.

Correction

Passons à la correction, maintenant que tout le monde a réalisé ce défi haut la main.
Il s’agit dans un premier temps de créer deux pages différentes. Vous avez pu y mettre ce que vous vouliez, il fallait juste un moyen de pouvoir naviguer sur une autre page.
La première chose à faire est donc de créer l’animation qui va permettre de faire disparaitre élégamment la première page. Il s’agit d’une animation qui cible le conteneur de premier niveau de notre page, dans mon cas une Grid. Étant donné que je vais avoir besoin de faire une translation, je vais définir une classe TranslateTransform dans la propriété RenderTransform de ma grille :

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RenderTransform>
        <TranslateTransform x:Name="Translation" />
    </Grid.RenderTransform>
    […reste du code supprimé pour plus de lisibilité…]
    <Button Content="Aller à la page 2" Tap="Button_Tap" />
</Grid>

Mon Storyboard sera déclaré dans les ressources de ma page :

<phone:PhoneApplicationPage.Resources>
    <Storyboard x:Name="CachePage">
        <DoubleAnimation Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Opacity"
                            From="1" To="0" Duration="0:0:0.5" />
        <DoubleAnimation Storyboard.TargetName="Translation" Storyboard.TargetProperty="Y"
                            From="0" To="800" Duration="0:0:0.5" />
    </Storyboard>
</phone:PhoneApplicationPage.Resources>

L’animation consiste à faire varier la propriété Opacity de la grille et la propriété Y de l’objet de translation.
Puis il faut démarrer cette animation lors du clic sur le bouton sachant qu’auparavant, je vais m’abonner à l’événement de fin d’animation afin de pouvoir démarrer la navigation à ce moment-là :

public partial class MainPage : PhoneApplicationPage
{
    public MainPage()
    {
        InitializeComponent();
        CachePage.Completed += CachePage_Completed;
    }

    private void CachePage_Completed(object sender, EventArgs e)
    {
        NavigationService.Navigate(new Uri("/Page2.xaml", UriKind.Relative));            
    }

    private void Button_Tap(object sender, System.Windows.Input.GestureEventArgs e)
    {
        CachePage.Begin();
    }

}

L’événement de fin d’animation est évidemment l’événement Completed, c’est dans la méthode associée que je déclencherai la navigation via la méthode Navigate du NavigationService.
Passons maintenant à la deuxième page. Le principe est le même, voici le XAML qui nous intéresse :

<phone:PhoneApplicationPage.Resources>
    <Storyboard x:Name="AffichePage">
        <DoubleAnimation Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Opacity"
                            From="0" To="1" Duration="0:0:0.5" />
        <DoubleAnimation Storyboard.TargetName="Translation" Storyboard.TargetProperty="Y"
                            From="-800" To="0" Duration="0:0:0.5" />
    </Storyboard>
</phone:PhoneApplicationPage.Resources>

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RenderTransform>
        <TranslateTransform x:Name="Translation" />
    </Grid.RenderTransform>
    […code supprimé pour plus de lisibilité…]
</Grid>

Cette fois-ci on incrémente l’opacité et on passe de -800 à 0 pour les valeurs de la translation de Y.
Coté code behind nous aurons :

public partial class Page2 : PhoneApplicationPage
{
    public Page2()
    {
        InitializeComponent();
    }

    protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
    {
        AffichePage.Begin();
        base.OnNavigatedTo(e);
    }
}

On redéfinit la méthode qui est appelée lorsqu’on navigue sur la page afin de démarrer l’animation.
Et voilà !
Quoique… ce n’est pas tout à fait complet en l’état car si vous revenez sur la page précédente en appuyant sur le bouton de retour arrière, vous vous rendrez compte que la page est vide. Eh oui, nous avons fait disparaitre la page lors de l’animation de transition ! Nous devons donc arrêter cette fameuse animation lorsque nous revenons sur la page avec :

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
    CachePage.Stop();
    base.OnNavigatedTo(e);
}

Et voilà, présentées comme j’ai pu, nos deux animations (voir la figure suivante).

Rendu des animations de transitions
Rendu des animations de transitions

Avant de terminer ce TP, notez que le toolkit pour Windows Phone, que nous découvrirons plus loin, possède tout un lot de transitions prêtes à l’emploi.

Exemple de certificat de réussite
Exemple de certificat de réussite