[WP7] Continuum Transition

oct 23, 2012 5:34 pm by Julien

Aujourd'hui, on va parler animations et plus particulierement Transitions.

Continuum Transition ? WATIZIT ?

Comme son nom l'indique, c'est une transition qui a pour effet de donner l'impression qu'un element s'en va puis revient sur une autre page.

On le retrouve notammeent dans l'application des mails ou encore des messages. Mieux que des mots, un dessin :)

Vous l'aurez compris, ce type d'animation s'applique à une page contenant une liste.

Pour les besoins d'un projet puis aussi car je suis curieux j'ai voulu refaire cet effet. Evidemment en fouillant sur le net on peut retrouver des controls mais la plupart necessite une Frame spéciale (ex TransitionFrame avec le toolkit)
Bref je suis pas très friand de tout ça. Je voulais un truc simple a utiliser sans devoir changer le type de ma frame ou autre et dependre d'un outil.

J'ai donc crée un mini helper permettant de gérer cet effet. Il est pascompliqué a utiliser. On appelle et on renseigne au moment ou l'on veut et c'est bon. Voici mes cas d'utilisations :

Lors d'un click sur un item :

 

private void OnItemSelected(object sender, SelectionChangedEventArgs e)
        {
            var listBox = (sender as ListBox);
            if (listBox.SelectedItem != null)
            {
                SelectedItem = (Item)listBox.SelectedItem;
                ContinuumTransition.ForwardOut(listBox, this, () =>
                {
                    NavigationService.Navigate(new Uri("/DetailPage.xaml", UriKind.Relative));
                    listBox.SelectedItem = null;
                });
            }
        }

 


Dans l'ordre : quand on arrive sur la page de detail de l'item selectionné précedemment et lorsqu'on quitte cette page par le bouton back

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            ContinuumTransition.ForwardIn(TitlePanel, this);

        }

        protected override void OnBackKeyPress(CancelEventArgs e)
        {
            ContinuumTransition.BackwardOut(this);
        }


Lorsqu'on revient sur la page de notre liste

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            ContinuumTransition.BackwardIn(this);
        }

 

Le resultat donne ca

 

Et le projet pour ceux qui veulent ContinuumTransitionDemo.rar (860.48 kb)

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading