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)
Transitions et Animations – Donnez une nouvelle dimension à vos applications Windows Phone !
1.
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
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
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
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
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