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