Ce workshop vise à maîtriser la navigation entre les pages d'une application Windows Phone, le passage de paramètres, et la manipulation de ListBox. Il inclut la création de classes et l'utilisation de l'AppBar, ainsi que des techniques pour personnaliser une ListBox et gérer le passage de données dynamiques. Les étudiants créeront différentes pages et implémenteront des événements pour tester leurs applications.

1. Workshop 5 : Windows Phone 2013
1
Objectif
L’objectif de ce workshop est de maitriser
 La navigation entre les pages
 Le passage d’un paramètre statique
 Le passage d’un paramètre dynamique (class partager)
 Manipulation ListBox simple
 Manipulation ListBox personnalisé
 L’utilisation du Binding
Partie I : (45 min)
1. Créer un nouveau projet Windows phone 8.
2. Créer une class c# « Bird » : dans l’explorateur de solution fait un clic droit sur le namespace du projet
ajouter -> Class ou shift + alt + c
3. Dans la class « Bird » ajouter 3 variable
 Birdname string
 Image string
 Nbr int
NB : Pour ajouter les variable avec leurs proprité rapidement, taper propfull + double clic sur tab

2. Workshop 5 : Windows Phone 2013
2
4. Dans la page « MainPage.xaml » ajouter une ListBox simple
5. Maintenant nous allons remplir notres ListBox.
 Aller au code-behind « MainPage.xaml.cs »
 Ajouter une liste de string
 Ajouter quelque élément à la liste
 Affecter la liste de string à notre ListBox

3. Workshop 5 : Windows Phone 2013
3
6. Maintenant créer « AppBar » avec un bouton
NB : Par defaut dans le code-behind « Mainpage.xaml.cs » vous trouver le code de AppBar commenté.
7. Exécuter l’application pour tester l’affichage
8. Ajouter un évènement « click » au bouton de « appbar ».
 Dans la méthode BuildLocalizedApplicationBar() ajouter le code suivant

4. Workshop 5 : Windows Phone 2013
4
NB : pour ajouter l’évènement il suffit d’écrire nombouton.Click += et double clic sur « tab »
9. Dans l’évènement de bouton ajouter le code pour :
 Naviguer dans une nouvelle page
 Passer un paramètre
10. Maintenant créer une nouvelle page « affichage.xaml »
11. Dans le constructeur de « affichage.xaml.cs » ajouter l’évènement loaded.

5. Workshop 5 : Windows Phone 2013
5
12. Maintenant nous allons récupérer le paramètre de la page « MainPage.xaml ». Dans l’évènement
« Affichage_Loaded» ajouter le code suivant.
13. Exécuter l’application pour tester

6. Workshop 5 : Windows Phone 2013
6
Partie II : (30 min)
1. Maintenant nous aller créer une ListBox personnalisé. Dans le même projet aller à la
page « MainPage.xaml »
2. Pour personnaliser une liste box il faut ajoutes deux éléments principaux
 ListBox.ItemTemplate
 DataTemplate
3. Dans la balise DataTemplate nous allons ajouter la structure de notre Template. Dans notre cas ajouter
 une Image
 un TexBlock
4. Ce qu’il reste maintenant c’est de remplir la liste. Au niveau de code-behind « MainPage.xaml.cs »
 effacer le code de la liste de string

7. Workshop 5 : Windows Phone 2013
7
 ajouter une liste des objets « Bird »
 affecter cette liste a notre ListBox personnalisé
 Maintenant modifier le code de la « ListBox » pour qu’elle soit capable de comprendre la
structure d’objet affecté

8. Workshop 5 : Windows Phone 2013
8
5. Maintenant exécuter le code.
Partie III : (30 min)
1. Maintenant nous allons travailler sur le passage des données dynamique. Ajouter une nouvelle classe
« SharedInformation .cs». cette classe doit être « public » et « static ».
2. Déclarer un objet « sharedBird » dans cette classe. « sharedBird » doit être « public » et « static ».
3. Dans le code-behind « MainPage.xaml » ajouter un nouveau bouton avec l’évènement clic.
4. Maintenant nous allons passer l’objet sélectionné de la « ListBox » dans une nouvelle page. Dans
l’évènement clic du nouveau bouton.
 vérifier la sélection d’un élément de la liste
 récupérer l’élément sélectionné
 affecter cet élément au classe « SharedInformation »
 Naviguer dans une nouvelle page

9. Workshop 5 : Windows Phone 2013
9
5. Maintenant ajouter une nouvelle page « affichage2.xaml ». Dans cette page ajouter un nouveau
« texblock » et une « Image »
 Récupérer l’élément sélectionné dans la « listBox » à partir de la classe
« SharedInformation.cs »
 Afficher l’élément sélectionné
6. Exécuter le code