Tiré de http://blog.loicrebours.fr

1. Développer une application
Winows 8
Tiré du blog de Loic Rebours : http://blog.loicrebours.fr
Labo DEV.MS Bruxelles

3. Les contrôles et la navigation
Clément Hallet – clement.hallet@supinfo.com

4. Les contrôles de base
Button
Hyperlink
ListBox
Checkbox
ComboBox
ProgressBar
ProgressRing
DatePicker
RadioButton

5. « Nouveaux » contrôles
Toggle Button : Un mix de checkBox et
RadioButton

6. « Nouveaux » contrôles
ToggleSwitch : comme un ToggleButton mais
en un seul élément graphique

7. « Nouveaux » contrôles
ProgressRing : le loadCircle de Microsoft

8. « Nouveaux » contrôles
ListView : ListBox améliorée !
Possède une SelectionMode
(Extended, Multiple, None, Single)

9. « Nouveaux » contrôles
GridView : ListView en deux dimensions

10. « Nouveaux » contrôles
FlipView : Slideshow

11. « Nouveaux » contrôles
ApplicationBar : barre de commandes de
l’app visible lors d’un clic droit ou lors d’un
swipe vers le haut

12. « Nouveaux » contrôles
SemanticZoom : ZoomedOutView :
présentation des données détaillées

13. « Nouveaux » contrôles
SemanticZoom : ZoomedInView :
présentation des données générales

14. La navigation dans METRO
Deux notions : la frame (conteneur de XAML) et la page.
Les pages peuvent ne rien à voir entre eux.

15. Mettons tout cela en pratique !
Une superbe app METRO qui contiendra :
• Une page générale qui gerera le navigation (frame + historique)
• Page1 Rouge qui affiche une TextBox
• Page2 Bleue
• Page3 Verte qui contiendr aun bouton permettan de naviguer
vers la Page1 en lui passant un paramètre.
• Le texte de la Page 1 sera sauvegardé.

16. Mettons tout cela en pratique !
Créons un nouveau projet Blank App et éditons le MainPage.xaml :

17. Mettons tout cela en pratique !
Créons une nouvelle Page1.xaml, Page2.xaml et Page3.xaml

18. Mettons tout cela en pratique !
Maintenant, occupons-nous de la navigation entre les pages ! Dans
MainPage.xaml.cs, on vas s’occuper du click sur les boutons et
on navigue vers la bonne Page

19. Mettons tout cela en pratique !
Vous aurez aussi besoin d’implémenter une méthode de gestion du
click sur la Page3 (Page3.xaml.cs) :
A ce stade, nous pouvons déjà tester si l’app fonctionne !

20. Mettons tout cela en pratique !

21. Mettons tout cela en pratique !
Lorsque l’utilisateur lance l’app, l’utilisateur doit voir la Page1
(MainPage.xaml.cs) :

22. Mettons tout cela en pratique !
A savoir : on peut lancer des évènements en fonction de l’état de
chargement de la frame :

23. Mettons tout cela en pratique !
On peut ausis noter qu’il est possible de passer un objet à travers
la navigation entre les frames : dans Page3.xaml.cs :
Et dans Page1.xaml.cs :

24. Mettons tout cela en pratique !
Maintenant, quand on click sur le bouton dans la frame de la Page3 :

25. Caches des pages
•Cache de navigation que possède chaque page
•Propriété : NavigationCacheMode qui possède la propriété
« Window.UI.Xaml.Navigation.NavigationCacheMode ».
•Cette propriété peut être : Disabled, Enabled et Required (passe outre la
taille limite du cache. A éviter)
•On accède à cet historique avec les méthodes GoBack, GoForward. On
peut aussi accéder à deux propriétés : CanGoBack et CanGoForward

26. Mettons tout cela en pratique !
Sur la Page1.xaml.cs , on active le cache dans le constructeur :
Concernant l’historique de navigation, Nous allons « installer »
un bouton « return » sur la Basic Page (à gauche du menu). Pour
cela, on ajoute un bouton sur la BlankPage.xaml et on met son
code-behind (dans BlankPage.xaml.cs) :

27. Mettons tout cela en pratique !

28. Méthode plus simple !
Il y a aussi la possilibité d’utiliser une Basic
page qui contiendra automatiquement le
bouton de retour aux pages précédentes.
A ce moment là, mise à par gérer les
« Navigate », tout est géré par Visual Studio!

29. avez-vous des questions ?
?

30. facebook.com/LaboDevM
S
@dev_ms
devms.org