Embed Size (px)
Citation preview
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
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
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
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.
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
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
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é
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
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
