Développer une application       Winows 8 Tiré du blog de Loic Rebours : http://blog.loicrebours.fr                Labo DE...
Les contrôles et la navigation    Clément Hallet – clement.hallet@supinfo.com
Les contrôles de baseButtonHyperlinkListBoxCheckboxComboBoxProgressBarProgressRingDatePickerRadioButton
« Nouveaux » contrôlesToggle Button : Un mix de checkBox etRadioButton
« Nouveaux » contrôlesToggleSwitch : comme un ToggleButton maisen un seul élément graphique
« Nouveaux » contrôlesProgressRing : le loadCircle de Microsoft
« Nouveaux » contrôlesListView : ListBox améliorée !Possède une SelectionMode                 (Extended, Multiple, None, S...
« Nouveaux » contrôlesGridView : ListView en deux dimensions
« Nouveaux » contrôlesFlipView : Slideshow
« Nouveaux » contrôlesApplicationBar : barre de commandes del’app visible lors d’un clic droit ou lors d’unswipe vers le h...
« Nouveaux » contrôlesSemanticZoom : ZoomedOutView :présentation des données détaillées
« Nouveaux » contrôlesSemanticZoom : ZoomedInView :présentation des données générales
La navigation dans METRODeux notions : la frame (conteneur de XAML) et la page.Les pages peuvent ne rien à voir entre eux.
Mettons tout cela en pratique !Une superbe app METRO qui contiendra :• Une page générale qui gerera le navigation (frame +...
Mettons tout cela en pratique !Créons un nouveau projet Blank App et éditons le MainPage.xaml :
Mettons tout cela en pratique !Créons une nouvelle Page1.xaml, Page2.xaml et Page3.xaml
Mettons tout cela en pratique !Maintenant, occupons-nous de la navigation entre les pages ! Dans MainPage.xaml.cs, on vas ...
Mettons tout cela en pratique !Vous aurez aussi besoin d’implémenter une méthode de gestion du click sur la Page3 (Page3.x...
Mettons tout cela en pratique !
Mettons tout cela en pratique !Lorsque l’utilisateur lance l’app, l’utilisateur doit voir la Page1 (MainPage.xaml.cs) :
Mettons tout cela en pratique !A savoir : on peut lancer des évènements en fonction de l’état de chargement de la frame :
Mettons tout cela en pratique !On peut ausis noter qu’il est possible de passer un objet à travers la navigation entre les...
Mettons tout cela en pratique !Maintenant, quand on click sur le bouton dans la frame de la Page3 :
Caches des pages•Cache de navigation que possède chaque page•Propriété : NavigationCacheMode qui possède la propriété« Win...
Mettons tout cela en pratique !Sur la Page1.xaml.cs , on active le cache dans le constructeur :Concernant l’historique de ...
Mettons tout cela en pratique !
Méthode plus simple !Il y a aussi la possilibité d’utiliser une Basicpage qui contiendra automatiquement lebouton de retou...
avez-vous des questions ?            ?
facebook.com/LaboDevMS@dev_msdevms.org
Développement Windows 8 METRO App part3
Prochain SlideShare
Chargement dans…5
×

Développement Windows 8 METRO App part3

595 vues

Publié le

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

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
595
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Développement Windows 8 METRO App part3

  1. 1. Développer une application Winows 8 Tiré du blog de Loic Rebours : http://blog.loicrebours.fr Labo DEV.MS Bruxelles
  2. 2. Les contrôles et la navigation Clément Hallet – clement.hallet@supinfo.com
  3. 3. Les contrôles de baseButtonHyperlinkListBoxCheckboxComboBoxProgressBarProgressRingDatePickerRadioButton
  4. 4. « Nouveaux » contrôlesToggle Button : Un mix de checkBox etRadioButton
  5. 5. « Nouveaux » contrôlesToggleSwitch : comme un ToggleButton maisen un seul élément graphique
  6. 6. « Nouveaux » contrôlesProgressRing : le loadCircle de Microsoft
  7. 7. « Nouveaux » contrôlesListView : ListBox améliorée !Possède une SelectionMode (Extended, Multiple, None, Single)
  8. 8. « Nouveaux » contrôlesGridView : ListView en deux dimensions
  9. 9. « Nouveaux » contrôlesFlipView : Slideshow
  10. 10. « Nouveaux » contrôlesApplicationBar : barre de commandes del’app visible lors d’un clic droit ou lors d’unswipe vers le haut
  11. 11. « Nouveaux » contrôlesSemanticZoom : ZoomedOutView :présentation des données détaillées
  12. 12. « Nouveaux » contrôlesSemanticZoom : ZoomedInView :présentation des données générales
  13. 13. La navigation dans METRODeux notions : la frame (conteneur de XAML) et la page.Les pages peuvent ne rien à voir entre eux.
  14. 14. 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é.
  15. 15. Mettons tout cela en pratique !Créons un nouveau projet Blank App et éditons le MainPage.xaml :
  16. 16. Mettons tout cela en pratique !Créons une nouvelle Page1.xaml, Page2.xaml et Page3.xaml
  17. 17. 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
  18. 18. 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 !
  19. 19. Mettons tout cela en pratique !
  20. 20. Mettons tout cela en pratique !Lorsque l’utilisateur lance l’app, l’utilisateur doit voir la Page1 (MainPage.xaml.cs) :
  21. 21. Mettons tout cela en pratique !A savoir : on peut lancer des évènements en fonction de l’état de chargement de la frame :
  22. 22. 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 :
  23. 23. Mettons tout cela en pratique !Maintenant, quand on click sur le bouton dans la frame de la Page3 :
  24. 24. 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 lataille limite du cache. A éviter)•On accède à cet historique avec les méthodes GoBack, GoForward. Onpeut aussi accéder à deux propriétés : CanGoBack et CanGoForward
  25. 25. 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). Pourcela, on ajoute un bouton sur la BlankPage.xaml et on met soncode-behind (dans BlankPage.xaml.cs) :
  26. 26. Mettons tout cela en pratique !
  27. 27. Méthode plus simple !Il y a aussi la possilibité d’utiliser une Basicpage qui contiendra automatiquement lebouton de retour aux pages précédentes.A ce moment là, mise à par gérer les« Navigate », tout est géré par Visual Studio!
  28. 28. avez-vous des questions ? ?
  29. 29. facebook.com/LaboDevMS@dev_msdevms.org

×