[WP] Custom Transition en 5mn !

feb 18, 2014 8:56 pm by Julien

Un post pour revenir sur une top session (de la mort qui tue) animé par Samuel Blanchard et Jean-Sebastien Dupuy.

La session introduisait sur les animations, les storyboards, les transitions. En 45mn, nos deux speakers ont balayé les possibilités pour rendre votre application super classe ! Parmi les propositions faites, il y'en a une qui n'a pas été évoqué et qui est pourtant facile à implémenter. Evidemment elle reste moins bien que la solution proposée par Samuel avec la custom frame.

Avant de lire la suite je vous conseille de lire le post ainsi que les slides de la session en question : http://blog.naviso.fr/wordpress/?p=1944

Merci le toolkit Cool

Vous l'aurez compris la solution repose sur le toolkit ! Notre cher et tendre toolkit nous propose des transitions toute fait mais aussi la possibilité de pouvoir en créer des customs !

Pour cela il faut retenir une classe, TransitionElement !

En dérivant de cette classe vous allez devoir override une méthode (GetTransition) qui va être votre storyboard wrappé dans un objet Transition. Bon fini le blabla, passons à la pratique !

Oh ma belle transition

 

public class RickRollTransition : TransitionElement
    {
        private FrameworkElement _titleElement;
        private FrameworkElement _pageTitleElement;
        private FrameworkElement _buttonElement;

        public override ITransition GetTransition(UIElement element)
        {
            var page = (FrameworkElement)element;
            if (_titleElement == null)
                _titleElement = page.FindName("title") as FrameworkElement;
            if (_pageTitleElement == null)
                _pageTitleElement = page.FindName("pageTitle") as FrameworkElement;
            if (_buttonElement == null)
                _buttonElement = page.FindName("button") as FrameworkElement;

            Storyboard sb = null;

            switch (Mode)
            {
                case RickRollTransitionMode.ForwardIn:
                    sb = BuildForwardInTransition();
                    break;
                case RickRollTransitionMode.ForwardOut:
                    sb = BuildForwardOutTransition();
                    break;
                case RickRollTransitionMode.BackwardIn:
                    sb = BuildBackwardInTransition();
                    break;
                case RickRollTransitionMode.BackwardOut:
                    sb = BuilBackwardOutTransition();
                    break;
                default:
                    throw new ArgumentOutOfRangeException();
            }

            return new Transition(element, sb);
        }

        private Storyboard BuilBackwardOutTransition()
        {
            var sb = new Storyboard();
            sb.Children.Add(_titleElement.TranslateX(0, 480, 500));
            sb.Children.Add(_pageTitleElement.TranslateX(0, 480, 300));
            sb.Children.Add(_buttonElement.TranslateY(0, 600, 500));
            return sb;
        }

        private Storyboard BuildBackwardInTransition()
        {
            var sb = new Storyboard();
            sb.Children.Add(_titleElement.TranslateX(480, 0, 500));
            sb.Children.Add(_pageTitleElement.TranslateX(480, 0, 300));
            sb.Children.Add(_buttonElement.TranslateY(600, 0, 500));
            return sb;
        }

        private Storyboard BuildForwardInTransition()
        {
            var sb = new Storyboard();
            sb.Children.Add(_titleElement.TranslateX(480, 0, 500));
            sb.Children.Add(_pageTitleElement.TranslateX(480, 0, 300));
            sb.Children.Add(_buttonElement.TranslateY(600, 0, 500));
            return sb;
        }

        private Storyboard BuildForwardOutTransition()
        {
            var sb = new Storyboard();
            sb.Children.Add(_titleElement.TranslateX(0, 480, 500));
            sb.Children.Add(_pageTitleElement.TranslateX(0, 480, 300));
            sb.Children.Add(_buttonElement.TranslateY(0, 600, 500));
            return sb;
        }


        public RickRollTransitionMode Mode
        {
            get { return (RickRollTransitionMode)GetValue(ModeProperty); }
            set { SetValue(ModeProperty, value); }
        }

        // Using a DependencyProperty as the backing store for Mode.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty ModeProperty =
            DependencyProperty.Register("Mode", typeof(RickRollTransitionMode), typeof(RickRollTransition), new PropertyMetadata(RickRollTransitionMode.ForwardOut));



    }

Notre petite classe responsable de créer notre transition, tout se passe dans le GetTransition ! Facile non ? :)

Coté XAML, on procéde de la meme maniere qu'avec les autres transitions :

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

 Et voila ! Bon je vous avoue que la Transition reste simpliste ici, mais à vous d'être créatif !
Avec cette solution on a l'inconvenient d'avoir une latence entre les 2 transitions quand la page à charger est assez lourde graphiquement que l'on ne retrouve pas avec la custom frame de notre Samuel :D

En revanche la solution proposée est simpliste et peut être implémentée par n'importe qui !

Les sources du projet :

MonApplicationAvecMaSuperTransition.rar (3.12 mb)

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading