Améliorer l’impact et l’expérience utilisateur de vos applications en travaillant sur les animations de vos contrôles et la transition de vos pages. En quelques astuces et conseils, Samuel et Jean-Sébastien vous apporteront les clés pour rendre vos applications uniques ! Speakers : Jean-Sébastien Dupuy (Microsoft), Samuel Blanchard (Naviso)

2. Animations et Transitions
Donnez une nouvelle dimension à vos applications
Windows Phone
Samuel Blanchard
Windows Phone MVP - Naviso
@samoteph
Jean-Sébastien Dupuy
Technical Evangelist – Microsoft France
@dupuyjs
Code/Développement

3. Présentation de la session
Comment faire une killer app ?
•
•
Données pertinentes
Design adapté
•
Animation !
#mstechdays
Code/Développement

4. Agenda
•
•
•
•
Animations avec XAML
Animations par le code
Animations par behavior
Transitions
#mstechdays
Code/Développement

5. ANIMATIONS
En avant les histoires !
#mstechdays
Code/Développement

6. Animation en Xaml
Premier pas dans l’animation : déclaration du Storyboard
<Border x:Name="LeRectangle"
Background="Blue"
BorderBrush="White"
BorderThickness="2">
<Border.Resources>
<Storyboard x:Name="LeStoryboard">
<DoubleAnimation
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="LeRectangle"
From="0.0" To="1.0" Duration="0:0:0.500"
RepeatBehavior="Forever"/>
</Storyboard>
</Border.Resources>
</Border>
#mstechdays
Code/Développement

7. Animation en Xaml
Premier pas dans l’animation : exécution du Storyboard
private void LeBouton_Click(object sender, RoutedEventArgs e)
{
LeStoryboard.Begin();
}
<EventTrigger x:Name="LeTrigger" RoutedEvent="Border.Loaded">
<BeginStoryboard>
<Storyboard x:Name="LeStoryboard">
<DoubleAnimation
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="LeRectangle"
From="0.0" To="1.0" Duration="0:0:1"
RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
#mstechdays
Code/Développement

8. A chaque animation sa solution
<DoubleAnimation
Storyboard.TargetName="MyAnimatedRectangle"
Storyboard.TargetProperty="Opacity«
From="1.0" To="0.0" Duration="0:0:5"
AutoReverse="True" />
<ColorAnimation
BeginTime="00:00:00"
Storyboard.TargetName="myStackPanel"
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
From="Red" To="Green" Duration="0:0:4" />
<PointAnimation
Storyboard.TargetProperty="Center"
Storyboard.TargetName="MyAnimatedEllipseGeometry"
Duration="0:0:5" From="100,300" To="400,100"
RepeatBehavior="Forever" />
#mstechdays
Code/Développement

9. Key Frames ?
#mstechdays
Code/Développement

10. Key Frames
Version un peu plus avancée : définition d’une séquence
<Storyboard x:Name="LeStoryboard">
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="LeBackgroundBrush"
Storyboard.TargetProperty="Color">
<DiscreteColorKeyFrame KeyTime="0:0:2" Value="BlueViolet"/>
<LinearColorKeyFrame KeyTime="0:0:4" Value="Green"/>
<LinearColorKeyFrame KeyTime="0:0:6" Value="Yellow"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
#mstechdays
Code/Développement

11. #mstechdays
Code/Développement

12. Easing Functions & KeySpline
C’est un peu trop linéaire tout ca ?
#mstechdays
Code/Développement

13. Animation par le Code
Ou comment faire compliqué …  …
•
INDUSTRIALISER !
•
•
Génération d’un storyboard d’opacité
class Storyboard + DoubleAnimation
•
•
Begin et Completed
await FadeInAsync
#mstechdays
Code/Développement

14. Démo App de Compatibilité (Part 1)
• Storyboard
#mstechdays
Code/Développement

15. Tilt Effect
…
Behavior = étendre le comportement d’un
control
TiltEffect du Toolkit
#mstechdays
Code/Développement

16. TRANSITIONS
Entre deux
#mstechdays
Code/Développement

17. Transitions
Utilisation du Windows Phone Toolkit
private void InitializePhoneApplication() {
...
//RootFrame = new PhoneApplicationFrame();
RootFrame = new TransitionFrame();
... }
<toolkit:TransitionService.NavigationInTransition>
<toolkit:NavigationInTransition>
<toolkit:NavigationInTransition.Backward>
<toolkit:SwivelTransition Mode="BackwardIn"/>
</toolkit:NavigationInTransition.Backward>
<toolkit:NavigationInTransition.Forward>
<toolkit:SwivelTransition Mode="ForwardIn"/>
</toolkit:NavigationInTransition.Forward>
</toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>
#mstechdays
Code/Développement

18. Transitions
Utilisation du Windows Phone Toolkit
•
•
•
•
•
Turnstile (mode livre)
Swivel (mode pivot)
Slide
Rotate
Roll
#mstechdays
Code/Développement

19. Transition manuelle
#mstechdays
Code/Développement

20. La navigation dans les pages
• Commande de navigation (page)
– NavigationService.Navigate(new Uri(« MainPage.xaml »,
UriKind.Relative));
– NavigationService.GoBack();
•
méthode navigation (page)
– OnNavigatedTo
– OnNavigatingFrom
– OnNavigatedFrom
#mstechdays
Code/Développement

21. Plan de la navigation d’une page
Pas de navigation
OnNavigatedFrom
Nouvelle page chargée
Commande
#mstechdays
Commande
App
OnNavigatedTo
Système
Code/Développement

22. Frame
•
•
•
•
Gère la navigation des pages
PhoneApplicationFrame
Les pages sont affichées dans le contrôle
Un contrôle unique dans l’app (2 = plantage)
• Evénements navigation
– Navigating
– Navigated
#mstechdays
Code/Développement

23. Navigation dans la frame
Navigated
FRAME
Navigating
PAGE
Pas de
navigation
OnNavigating
From
Navigation
Commande
#mstechdays
Nouvelle page
Annulation ?
chargée
OnNavigated
To
Commande
App
OnNavigatedFrom
Système
Code/Développement

24. Construire sa frame : UserControl + Frame
– UserControl contenant une Frame
– Les + :
• Facile à implémenter
• Template de page
• Animation de fond
• Transition possible
– Les - :
• Problème avec certains contrôles
– Jumplist des LongListSelectors
#mstechdays
Code/Développement

25. Installation de la nouvelle frame
– Dans App.xaml.cs
• Installation de la Frame : InitializePhoneApplication
– FrameAnimated = new FrameAnimated();
– RootFrame = FrameAnimated.Frame;
• Installation de l’élément visible :
CompleteInitializePhoneApplication
– if (RootVisual != FrameAnimated)
– RootVisual = FrameAnimated;
#mstechdays
Code/Développement

26. Déroulement de la transition
Navigating
1 – Annulation de la
navigation
2 – Animation de sortie (la
frame est cachée)
Navigated
Nouvelle page chargée
(mais cachée)
1 – Animation d’entrée (la
frame est affichée)
3 –relance de la navigation
#mstechdays
Code/Développement

27. Démo App de Compatibilité (Part 2)
• Transition
#mstechdays
Code/Développement

28. Plus loin : Frame Custom Control
– Control héritant de PhoneApplicationFrame
– Les + :
• Même que UserControl
• Possibilité de gérer des animations à deux pages
• Plus de pb de RootVisual
– Les - :
• Plus complexe à mettre en place
#mstechdays
Code/Développement

29. Démo Frame
• Limbo
• Purple Cherry X
#mstechdays
Code/Développement

30. Conclusion
#mstechdays
Code/Développement

31. Questions ?
#mstechdays
Code/Développement

32. Donnez votre avis !
Depuis votre smartphone sur :
http://notes.mstechdays.fr
De nombreux lots à gagner toutes les heures !!!
Claviers, souris et jeux Microsoft…
Merci de nous aider à améliorer les Techdays !
#mstechdays
Code/Développement

33. Digital is
business