Developper Pour Windows Phone en C#

Apprenez dvelopper pour

Windows Phone enC#

Par nico.pyright

www.siteduzero.com

Licence Creative Commons 6 2.0Dernire mise jour le 24/01/2013

Sommaire 2Sommaire ........................................................................................................................................... 3Partager .............................................................................................................................................. 5 Apprenez dvelopper pour Windows Phone en C# ......................................................................... 7Partie 1 : La thorie et les bases ......................................................................................................... 7Windows Phone, un nouveau priphrique ...................................................................................................................... 7Historique, la mobilit chez Microsoft .......................................................................................................................................................................... 7Le renouveau : Windows Phone 7 .............................................................................................................................................................................. 8Windows Phone 8 ....................................................................................................................................................................................................... 9Lesprit Modern UI .......................................................................................................................................................................................................

10Le Windows Phone Store .......................................................................................................................................................................................... 11Les outils de dveloppements ......................................................................................................................................... 12Prrequis ................................................................................................................................................................................................................... 13Installer Visual Studio Express pour Windows Phone .............................................................................................................................................. 21Lmulateur ................................................................................................................................................................................................................ 24XAML et code behind ................................................................................................................................................................................................ 26Blend pour le design .................................................................................................................................................................................................

28Notre premire application .............................................................................................................................................. 28Hello World ................................................................................................................................................................................................................ 32Linterface en XAML .................................................................................................................................................................................................. 35Le code-behind en C# ............................................................................................................................................................................................... 36Le contrle Grid ......................................................................................................................................................................................................... 37Le contrle StackPanel ............................................................................................................................................................................................. 37Le contrle TextBox ................................................................................................................................................................................................... 39Le contrle TextBlock ................................................................................................................................................................................................ 40Les vnements ........................................................................................................................................................................................................ 42Le bouton .................................................................................................................................................................................................................. 43Et Silverlight dans tout a ? .......................................................................................................................................................................................

43Les contrles ................................................................................................................................................................... 44Gnralits sur les contrles ..................................................................................................................................................................................... 45Utiliser le designer pour ajouter un CheckBox .......................................................................................................................................................... 47Utiliser Expression Blend pour ajouter un ToggleButton ...........................................................................................................................................

49Le clavier virtuel .............................................................................................................................................................. 50Afficher le clavier virtuel ............................................................................................................................................................................................ 50Intercepter les touches du clavier virtuel ................................................................................................................................................................... 51Les diffrents types de clavier ...................................................................................................................................................................................

53Les conteneurs et le placement ...................................................................................................................................... 54StackPanel ................................................................................................................................................................................................................ 57ScrollViewer .............................................................................................................................................................................................................. 59Grid ............................................................................................................................................................................................................................ 64Canvas ...................................................................................................................................................................................................................... 65Alignement ................................................................................................................................................................................................................ 67Marges et espacement ..............................................................................................................................................................................................

70Ajouter du style ................................................................................................................................................................ 70Afficher des images ................................................................................................................................................................................................... 72Les ressources .......................................................................................................................................................................................................... 75Les styles .................................................................................................................................................................................................................. 81Les thmes ................................................................................................................................................................................................................ 86Changer lapparence de son contrle .......................................................................................................................................................................

88TP1 : Cration du jeu du plus ou du moins ..................................................................................................................... 89Instructions pour raliser le TP .................................................................................................................................................................................. 89Correction ..................................................................................................................................................................................................................

92Dessiner avec le XAML ................................................................................................................................................... 93Dessin 2D .................................................................................................................................................................................................................. 96Pinceaux ....................................................................................................................................................................................................................

100Les transformations ................................................................................................................................................................................................. 103Crer des animations .................................................................................................................................................... 104Principe gnraux des animations .......................................................................................................................................................................... 104Cration dune animation simple (XAML) ................................................................................................................................................................ 108Cration dune animation complexe (Blend) ........................................................................................................................................................... 113Projections 3D .........................................................................................................................................................................................................

117Partie 2 : Un mobile orient donnes .............................................................................................. 117Une application plusieurs pages, la navigation .......................................................................................................... 117Naviguer entre les pages ......................................................................................................................................................................................... 125Grer le bouton de retour arrire ............................................................................................................................................................................. 127Ajouter une image daccueil (splash screen) .......................................................................................................................................................... 129Le tombstonning ......................................................................................................................................................................................................

136TP 2 : Crer une animation de transition entre les pages ............................................................................................ 137Instructions pour raliser le TP ................................................................................................................................................................................ 137Correction ................................................................................................................................................................................................................

140Les proprits de dpendances et proprits attaches .............................................................................................. 141Les proprits de dpendances .............................................................................................................................................................................. 142Les proprits attaches .........................................................................................................................................................................................

2/496

www.siteduzero.com

142O est mon application ? .............................................................................................................................................. 143Le .XAP ................................................................................................................................................................................................................... 144Affichage dimages en ressources .......................................................................................................................................................................... 144Accder au flux des ressources ..............................................................................................................................................................................

145ListBox ........................................................................................................................................................................... 145Un contrle majeur .................................................................................................................................................................................................. 148Grer les modles ................................................................................................................................................................................................... 151Slection dun lment ............................................................................................................................................................................................

155La manipulation des donnes (DataBinding & Converters) .......................................................................................... 156Principe du Databinding .......................................................................................................................................................................................... 156Le binding des donnes .......................................................................................................................................................................................... 165Binding et mode design ........................................................................................................................................................................................... 172Utiliser lObservableCollection ................................................................................................................................................................................ 177Les converters .........................................................................................................................................................................................................

182MVVM ............................................................................................................................................................................ 182Principe du patron de conception ............................................................................................................................................................................ 183Premire mise en place de MVVM .......................................................................................................................................................................... 190Les commandes ...................................................................................................................................................................................................... 194Les frameworks la rescousse : MVVM-Light ........................................................................................................................................................ 210D'autres frameworks MVVM .................................................................................................................................................................................... 211Faut-il utiliser systmatiquement MVVM ? ..............................................................................................................................................................

211Gestion des tats visuels ............................................................................................................................................... 212Les tats dun contrle ............................................................................................................................................................................................ 217Modifier un tat ........................................................................................................................................................................................................ 222Changer dtat ......................................................................................................................................................................................................... 222Crer un nouvel tat ................................................................................................................................................................................................

224Le traitement des donnes ............................................................................................................................................ 225HttpRequest & WebClient ....................................................................................................................................................................................... 231Linq-To-Json ............................................................................................................................................................................................................ 237La bibliothque de Syndication ............................................................................................................................................................................... 241Asynchronisme avanc ........................................................................................................................................................................................... 244Le rpertoire local ....................................................................................................................................................................................................

248Partie 3 : Une bibliothque de contrles ......................................................................................... 248Panorama et Pivot ......................................................................................................................................................... 248Panorama ................................................................................................................................................................................................................ 255Pivot ........................................................................................................................................................................................................................

259Navigateur web ............................................................................................................................................................. 260Naviguer sur une page web .................................................................................................................................................................................... 261Evnements de navigation ...................................................................................................................................................................................... 261Navigation interne ................................................................................................................................................................................................... 263Communiquer entre XAML et HTML .......................................................................................................................................................................

270TP : Cration dun lecteur de flux RSS simple .............................................................................................................. 271Instructions pour raliser le TP ................................................................................................................................................................................ 271Correction ................................................................................................................................................................................................................ 285Aller plus loin ...........................................................................................................................................................................................................

287Grer l'orientation .......................................................................................................................................................... 287Les diffrentes orientations ..................................................................................................................................................................................... 290Dtecter les changements d'orientation .................................................................................................................................................................. 292Stratgies de gestion d'orientation ..........................................................................................................................................................................

305Grer les multiples rsolutions ...................................................................................................................................... 305Les diffrentes rsolutions ...................................................................................................................................................................................... 306Grer plusieurs rsolutions ..................................................................................................................................................................................... 307Les images .............................................................................................................................................................................................................. 309Limage de lcran daccueil ....................................................................................................................................................................................

309Lapplication Bar ............................................................................................................................................................ 310Prsentation et utilisation ........................................................................................................................................................................................ 318Appliquer le Databinding ......................................................................................................................................................................................... 321Mode plein cran .....................................................................................................................................................................................................

322Le toolkit Windows Phone ............................................................................................................................................. 322Prsentation et installation du toolkit Windows Phone ............................................................................................................................................ 322PerformanceProgressBar ........................................................................................................................................................................................ 325ListPicker ................................................................................................................................................................................................................. 332WrapPanel ............................................................................................................................................................................................................... 335LongListSelector ..................................................................................................................................................................................................... 342Avantages & limites du toolkit ................................................................................................................................................................................. 342Les autres toolkits ...................................................................................................................................................................................................

343Le contrle de cartes (Map) .......................................................................................................................................... 344Prsentation et utilisation ........................................................................................................................................................................................ 347Interactions avec le contrle ................................................................................................................................................................................... 353Epingler des points dintrt .................................................................................................................................................................................... 363Afficher un itinraire ................................................................................................................................................................................................

369TP : Une application mto ........................................................................................................................................... 369Instructions pour raliser le TP ................................................................................................................................................................................ 371Correction ................................................................................................................................................................................................................

382Partie 4 : Un tlphone ouvert vers l'extrieur ................................................................................ 383La gestuelle ................................................................................................................................................................... 383Le simple toucher .................................................................................................................................................................................................... 384Les diffrents toucher .............................................................................................................................................................................................. 384Gestuelle avance ..................................................................................................................................................................................................

Sommaire 3/496

www.siteduzero.com

384Le toolkit la rescousse .......................................................................................................................................................................................... 386L'acclromtre ............................................................................................................................................................. 387Utiliser l'acclromtre ............................................................................................................................................................................................ 388Utiliser l'acclromtre avec l'mulateur ................................................................................................................................................................. 390Exploiter lacclromtre ......................................................................................................................................................................................... 392Les autres capteurs facultatifs ................................................................................................................................................................................ 392La motion API ..........................................................................................................................................................................................................

396TP : Jeux de hasard (Grattage et secouage) ................................................................................................................ 396Instructions pour raliser le TP ................................................................................................................................................................................ 398Correction ................................................................................................................................................................................................................ 405Aller plus loin ...........................................................................................................................................................................................................

405La golocalisation .......................................................................................................................................................... 406Dterminer sa position ............................................................................................................................................................................................ 409Utiliser la golocalisation dans l'mulateur ............................................................................................................................................................. 410Utiliser la golocalisation avec le contrle Map ......................................................................................................................................................

411Les Tasks du tlphone ................................................................................................................................................. 412Les choosers ........................................................................................................................................................................................................... 415Les launchers .......................................................................................................................................................................................................... 419Etat de lapplication .................................................................................................................................................................................................

421Les tuiles ....................................................................................................................................................................... 421Que sont les tuiles ? ................................................................................................................................................................................................ 423Des tuiles pour tous les gouts ................................................................................................................................................................................. 426Personnaliser les tuiles par dfaut .......................................................................................................................................................................... 433Crer des tuiles secondaires ................................................................................................................................................................................... 436Modifier et supprimer une tuile ................................................................................................................................................................................

438Les notifications ............................................................................................................................................................. 438Principe darchitecture ............................................................................................................................................................................................. 438Principe de cration du serveur de notification ....................................................................................................................................................... 439Les diffrents messages de notifications ................................................................................................................................................................ 440Cration du client Windows Phone recevant la notification ....................................................................................................................................

446TP : Amliorer l'application mto, Golocalisation et tuiles ........................................................................................ 447Instructions pour raliser le TP ................................................................................................................................................................................ 447Correction ................................................................................................................................................................................................................ 451Aller plus loin ...........................................................................................................................................................................................................

454Une application fluide = une application propre ! .......................................................................................................... 454Un thread, cest quoi ? ............................................................................................................................................................................................ 454Thread UI ................................................................................................................................................................................................................ 455Utiliser un thread darrire-plan ............................................................................................................................................................................... 457Utiliser le Dispatcher ............................................................................................................................................................................................... 458Utiliser un BackgroundWorker ................................................................................................................................................................................. 461Le pool de thread .................................................................................................................................................................................................... 462Le DispatcherTimer ................................................................................................................................................................................................. 464Thread de composition ............................................................................................................................................................................................ 465Les outils pour amliorer lapplication .....................................................................................................................................................................

466Background Agent ......................................................................................................................................................... 466Crer un background agent pour une tche priodique .......................................................................................................................................... 472La tche aux ressources intensives ........................................................................................................................................................................ 473Remarques gnrales sur les tches ...................................................................................................................................................................... 473Envoyer une notification depuis un agent darrire-plan .........................................................................................................................................

475Utiliser Facebook ........................................................................................................................................................... 476Crer une application Facebook ............................................................................................................................................................................. 477Le SDK .................................................................................................................................................................................................................... 478Quest-ce quOAuth ................................................................................................................................................................................................. 479Se loguer ................................................................................................................................................................................................................. 485Exploiter le graphe social avec le SDK ................................................................................................................................................................... 485Rcuprer des informations .................................................................................................................................................................................... 487Obtenir la liste de ses amis ..................................................................................................................................................................................... 489Poster sur son mur .................................................................................................................................................................................................. 493Utiliser les tasks ......................................................................................................................................................................................................

Partager 4/496

www.siteduzero.com

Apprenez dvelopper pour Windows Phone en C#

Par nico.pyrightMise jour : 24/01/2013Difficult : Facile

3 940 visites depuis 7 jours, class 43/805La rvolution de la mobilit est en marche. Nous connaissons tous liPhone qui a su conqurir un grand nombre dutilisateurs,ainsi que les tlphones Android dont le nombre ne cesse de croitre Ces tlphones intelligents (ou smartphones) deviennentomniprsents dans nos usages quotidiens. Microsoft se devait de monter dans le TGV de la mobilit ! Sont donc apparus, peuaprs ses deux grands concurrents, les tlphones Windows. Avec un peu plus de retard sur eux, Microsoft attaque ce marchavec plus de maturit quApple qui a fonc en tant que pionnier et nous propose son systme dexploitation : Windows Phone.

Cest une bonne nouvelle pour nous ! Cest aujourdhui un nouveau march qui souvre nous avec plein dapplicationspotentielles raliser grce nos talents de dveloppeur. Si cest pour a que vous vous trouvez sur cette page, alors restez-y !Dans ce tutoriel, nous allons apprendre raliser des applications pour Windows Phone grce notre langage prfr, le C#.Bonne nouvelle non ?Il est possible de raliser deux grands types dapplication Windows Phone :

des applications dites de gestiondes jeux

Il est aussi possible de dvelopper des applications pour Windows Phone en VB.NET et en F#, ainsi qu'en C++. Je ne traiteraique le C# dans ce tutoriel.

Dans ce tutoriel, nous allons apprendre dvelopper des applications de gestion avec Silverlight pour Windows Phone, qui estutilis dans les versions 7 de Windows Phone, mais galement des applications XAML/C#, utilis pour dvelopper desapplications pour Windows Phone 8. Vous ne connaissez pas Silverlight, ni XAML/C# ? Ce nest pas grave, nous allons lesintroduire rapidement (mais srement) dans les prochains chapitres.

Sachez que vous pouvez suivre beaucoup de chapitres de ce tutoriel sans possder forcment de Windows Phone, cequi est idal lorsque lon souhaite simplement dcouvrir le sujet. Le seul prrequis sera de matriser un tant soit peu leC#. Pour ceux qui auraient besoin d'une piqre de rappel, vous pouvez consulter mon tutoriel C# sur le Site du Zro.

Avant de commencer, je dois quand mme vous signaler que le dveloppement pour Windows Phone peut rendre accroc ! Vousallez avoir envie de crer des applications sans jamais vous arrter ! Si vous tes prts assumer cette probable dpendance,cest que vous tes bons pour continuer. Alors, cest parti !

Partager 5/496

www.siteduzero.com

Apprenez dvelopper pour Windows Phone en C# 6/496

www.siteduzero.com

Partie 1 : La thorie et les bases

Windows Phone, un nouveau priphriqueWindows Phone est la nouvelle plateforme pour tlphones mobiles de Microsoft. Elle permet de raliser des applications pourles smartphones quips du systme dexploitation Windows Phone. Apparues dans un premier temps sous sa version 7,Windows Phone en est actuellement sa version 8.

Microsoft arrive en rupture avec son nouveau systme d'exploitation pour smartphone afin de concurrencer les deux gants quesont Apple et Google.

Historique, la mobilit chez MicrosoftCela fait longtemps que Microsoft dispose de matriels mobiles. On a eu dans un premier temps les priphriques quips deWindows CE ; ce systme dexploitation tait une variation de Windows destine aux systmes embarqus. Il a notamment tbeaucoup utilis dans les PC de poche (Pocket PC). Cette version de Windows tait optimise pour les appareils possdant peudespace de stockage.

Est arrive ensuite la gamme de Windows Mobile. Ce systme dexploitation tait utilis sur des smartphones, PDA ou PC depoche. Il est arriv pour concurrencer les Blackberry et permettait de recevoir ses emails, dutiliser la suite bureautique, etc. Cesmobiles ressemblaient beaucoup au Windows que lon connait, avec son fameux menu dmarrer. On utilisait en gnral un stylet la place de la souris.

Avec les nouvelles interfaces tactiles, on a vu apparatre Apple et son fameux iPhone venu pour rvolutionner la faon dont onse servait jusqu prsent des appareils mobiles. Ce qui a donn un srieux coup de vieux Windows Mobile

Un Windows CE et un IPhone

Le renouveau : Windows Phone 7Microsoft a, son tour, chang radicalement son systme dexploitation afin de prendre ce virage de la mobilit en proposantWindows Phone, dont la premire version est la version 7, sortie en octobre 2010. Il ne sagit pas dune volution de WindowsMobile, part au niveau de la numrotation des versions (dans la mesure o Windows Mobile sest arrt avec la version 6.5).Windows Phone 7 a t redvelopp de zro et arrive avec un nouveau look, nomm dans un premier temps Mtro , pluspur, fortement ractif et intuitif, et valorisant linformation structure.Microsoft se positionne ainsi en rupture avec ses systmes dexploitation prcdents et propose des concepts diffrents pourson nouvel OS, comme la navigation exclusive au doigt par exemple. Il se veut plutt grand public quuniquement destin auxentreprises.

Pour tre autoris utiliser le systme dexploitation Windows Phone 7, un smartphone doit respecter un minimum despcifications. Ces spcifications garantissent quune application aura un minimum de puissance, vitant davoir desapplications trop lentes. Lcran doit tre multipoint dau moins 3.5 pouces , cest--dire quil doit pouvoir ragir plusieurspressions simultanes et permettant une rsolution de 480x800. Les tlphones doivent galement tre munis obligatoirementde quelques quipements, comme le fait davoir un GPS, davoir une camra, un acclromtre, etc Chaque tlphone possdera galement trois boutons faisant partie intgrante de son chssis. Le premier bouton permettra derevenir en arrire, le second daccder au menu et le dernier de faire des recherches.

Apprenez dvelopper pour Windows Phone en C# 7/496

www.siteduzero.com

Windows Phone 7Windows Phone 8

Cest tout dernirement, avec la sortie de Windows 8, que le systme dexploitation Windows Phone a chang de version pourpasser galement la version 8. Lobjectif de Microsoft est dunifier au maximum le cur de Windows 8 et de Windows Phone 8,permettant de faire facilement des passerelles entre eux. Windows 8 tant un systme dexploitation cr avant tout pour destablettes, il paraissait logique que Windows 8 et Windows Phone 8 partagent beaucoup de fonctionnalits. Windows 8 sestlargement inspir de Windows Phone pour crer son style, Modern UI, et cest dsormais au tour de Windows Phone de subirune volution majeure Windows Phone 8 afin de se rapprocher de son grand frre, Windows 8.

Beaucoup de choses sont partages entre les deux systmes, cest ce quon appelle le Shared Windows Core . Ainsi, ildeviendra trs facile de crer des applications pour Windows Phone 8 qui ne ncessiteront que trs peu dadaptation pourfonctionner sur Windows 8. Cest une des grandes forces de Windows Phone 8.

Notez que les applications Windows Phone 7 fonctionnent galement sur Windows Phone 8, cest une bonne chose sivous possdiez dj des applications Windows Phone 7 et que celles-ci nont pas t portes pour WP8.

Windows Phone 8 est galement plus performant grce au support du code natif. Il est ainsi possible de dvelopper des jeux enC++, utilisant DirectX.

Windows Phone 8 apporte en plus des nouvelles rsolutions dcran : WVGA (800x480 pixels), WXVGA (1280x768), et "True720p" (1280x720), avec une adaptation automatique de chacune.

Partie 1 : La thorie et les bases 8/496

www.siteduzero.com

Windows Phone 8Lesprit Modern UI

Anciennement appel Mtro , Modern UI est le nom donn par Microsoft son langage de design. Plutt que dadapterlinterface des anciens Windows Mobile, pour Windows Phone 7 il a t dcid de repartir sur un tout nouveau design.

Le nom Mtro a t inspir par les affichages qui se trouvent effectivement dans les stations de mtro et qui guidentefficacement les voyageurs jusqu leurs destinations. Les affichages sont clairs, prcis, souvent minimalistes et sans fioritures,par exemple une flche et un gros 5 pour indiquer que cest par l quon va trouver le mtro numro 5... Voil quoi doiventressembler les interfaces pour Windows Phone. Elles doivent valoriser linformation et la fluidit plutt que les interfaces lourdeset charges. Le but est de faire en sorte que lutilisateur trouve le plus rapidement possible linformation dont il a besoin etdviter les images ou animations superflues qui pourraient le ralentir. Dans cette optique, les applications doivent tre fluides et rpondre rapidement aux actions de lutilisateur, ou du moins luiindiquer que son action a t prise en compte. Ras le bol des applications Windows ou autre o on ne sait mme plus si on acliqu sur un bouton car rien ne se passe !

Courant 2012, Mtro a chang de nom pour devenir Modern UI. Les applications Windows 8 et Windows Phone 8doivent chacune suivre les normes dictes par les principes de Modern UI .

Modern UI se veut donc simple, pur et moderne. Les fonctionnalits sont spares en Hubs qui sont des espaces regroupantdes informations de plusieurs sources de donnes. Ainsi, il existe plusieurs Hubs, comme le Hub contacts o lon retrouverales contacts du tlphone mais aussi les contacts Facebook, Twitter, Nous avons aussi le Hub Photos , Musique etvidos , Jeux , Microsoft Office , Windows Phone Store ou encore le hub Entreprise qui permettra daccder auxapplications mtiers via un portail que les entreprises peuvent personnaliser.


www.siteduzero.com

Ecran d'accueil de l'mulateur o l'on voit l'accs aux Hubs et aux

applications

Une fois rentr dans un Hub, nous avons accs plusieurs informations disposes sous la forme dun panorama. Nous verronsun peu plus loin ce quest le panorama mais je peux dj vous dire qu'il permet dafficher des crans de manire cyclique avec undfilement latral. Ainsi, dans le Hub de contact, on arrive dans un premier temps sur la liste de tous les contacts. Lcran depanorama que lon peut faire glisser avec le doigt nous permet dobtenir sur lcran suivant la liste des dernires activits de noscontacts, puis la liste des contacts rcents, etc. Et cest pareil pour les autres Hub, le but est davoir un point dentre quicentralise toutes les informations relatives un point dintrt.

Cest avec tous ces principes en tte que vous devrez dvelopper votre application. Nhsitez pas observer comment sontfaites les autres, on trouve souvent de bonnes sources dinspirations permettant de voir ce qui fait la qualit du design duneapplication.

Le Windows Phone StoreLes applications que nous crons sont ensuite tlchargeables sur la place de march Windows Phone, appele encore WindowsPhone Store. Elles peuvent tre gratuites ou payantes, permettant ainsi son crateur de gnrer des revenus. Sur le store, ontrouvera galement des musiques et des vidos.

Comme nous lavons dj dit en introduction, nous allons apprendre dvelopper pour Windows Phone sans forcmentpossder un Windows Phone. Cest un point important, mme sil sera trs utile den possder un, vous pouvez tout faitdbuter sans.

Par contre, pour publier une application sur le Windows Phone Store, il faudra possder un compte dveloppeur. Celui-ci est factur 99$ par an, ce qui correspond 75.

Voil, vous savez tout sur Windows Phone, il est temps dapprendre raliser de superbes applications !Windows Phone est le nouveau systme dexploitation de Microsoft pour Smartphone.Il arrive avec une nouvelle philosophie de desgin des applications : Modern UI.Les applications ralises sont tlchargeables via le magasin en ligne (store) de Microsoft.


www.siteduzero.com


www.siteduzero.com

Les outils de dveloppementsa a lair super a, de pouvoir dvelopper des applications pour les tlphones ! Cest trs la mode et ces mini-ordinateursnous rservent plein de surprises. Voyons donc ce quil nous faut pour nous lancer dans le monde merveilleux dudveloppement pour Windows Phone.

Nous allons apprendre dvelopper pour Windows Phone quips de la version 8, qui est la dernire version lheure o jcrisces lignes. Vous serez galement capables de crer des applications pour Windows Phone 7.5 et 7.8. Mme si la version 8 sembletrs allchante, les versions 7 ne sont pas oublier trop rapidement. En effet, tous les utilisateurs nont pas encore achet deWindows Phone 8 et seraient srement dus de manquer votre application rvolutionnaire. De plus, Windows Phone 8 seragalement capable de faire tourner des applications 7.X. Un march ne pas oublier

PrrequisAvant toute chose, je vais vous donner les lments qui vont vous permettre de choisir entre lenvironnement dedveloppement ddi au dveloppement dapplications pour Windows Phone 7.5 et celui ddi au dveloppement dapplicationspour Windows Phone 7.5 et 8.

Pourquoi choisir entre un environnement qui fait tout et un environnement qui ne fait que la moiti des choses ?

Bonne question ! En effet, qui peut le plus peut bien sr le moins. Mais bien que les environnements de dveloppement soientgratuits, vous nallez peut-tre pas avoir envie de changer de machine de dveloppement pour autant.

Voici le matriel requis pour dvelopper pour Windows Phone 7.5 :

La premire chose est de possder Windows Vista SP2, ou bien Windows 7 ou encore Windows 8, qui sont les seulesconfigurations supportes permettant de dvelopper pour Windows Phone 7.5.Il est galement grandement conseill de possder une carte graphique compatible avec DirectX 10 afin de pouvoirutiliser correctement lmulateur. Je reviendrai plus tard sur ce quest lmulateur.

La plupart des PC est aujourdhui quipe de cette configuration. Ce qui est trs pratique pour se lancer et dcouvrir ledveloppement pour Windows Phone. Par contre, pour pouvoir dvelopper pour Windows Phone 8, cest un peu plus dlicat :

Il vous faut avant tout Windows 8 en version 64 bits , rien dautre. La version conseille est dailleurs la version PRO oula version Entreprise qui vont permettre dutiliser lmulateur.Pour faire tourner lmulateur, il faut que votre processeur supporte la technologie SLAT (qui permet de faire de lavirtualisation) et qu'elle soit active dans le bios ; ce qui est le cas gnralement des PC rcent ( partir de 2011). Il fautgalement installer le systme de virtualisation de Microsoft, Hyper-V, qui est disponible avec les versions PRO ouEntreprise de Windows 8. Si vous ntes pas certain que votre processeur supporte cette technologie, vous pouvez levrifier avec cette procdure (en anglais) ou alors, tentez linstallation et il vous dira une fois que tout est fini sil y a unproblme ou pas. Il vous faut aussi une bonne une carte graphique compatible avec DirectX 10 ainsi que 4 Go de mmoire.

Ces contraintes matrielles peuvent rendre difficile daccs le dveloppement pour Windows Phone 8 quelquun qui souhaitesimplement sinitier ou dcouvrir cette technologie. Si cest votre cas et que vous ne possdez pas ce matriel, alors je vousconseille dinstaller lenvironnement de dveloppement pour Windows Phone 7.5, qui vous permettra de suivre 95% du tutoriel.Jindiquerai au cours de ce tutoriel ce qui est rserv exclusivement Windows Phone 8. Sinon, si votre matriel le permet,installez sans hsiter ce quil faut pour dvelopper pour Windows Phone 8.

Si vous possdez un tlphone quip de Windows Phone 8, que vous disposez dun abonnement de dveloppeur etque vous ne souhaitez pas vous servir de lmulateur, il est possible de nutiliser que la version normale de Windows 8.

Ces lments expliqus, voici la suite des prrequis :Bien sr, vous aurez intrt possder un smartphone quip de Windows Phone : il est primordial de tester sonapplication sur un tlphone avant de songer la rendre disponible sur le Windows Phone Store.Enfin le dernier prrequis est de savoir parler le C#.


www.siteduzero.com

Le C# est le langage de dveloppement phare de Microsoft et permet la cration dapplications informatiques de toutessortes. Il est indispensable de connaitre un peu le langage de programmation C# afin de pouvoir dvelopper desapplications pour smartphones quips de Windows Phone. Son tude nest pas traite dans ce tutoriel, mais vouspouvez retrouver un tutoriel C# complet sur le Site du Zro.

Pour rsumer ce quest le C#, il sagit dun langage orient objet apparu en mme temps que le framework .NET qui na cessdvoluer depuis 2001. Il permet dutiliser les briques du framework .NET pour raliser des applications de toutes sortes etnotamment des applications pour Windows Phone. Cest le ciment et les outils qui permettent dassembler les briques de nosapplications.

Installer Visual Studio Express pour Windows PhonePuisquon est partis dans le btiment, il nous faut un chef de chantier qui va nous permettre dorchestrer nos dveloppements.Cest ce quon appelle lIDE, pour Integrated Development Environment , ce qui signifie Environnement de dveloppementintgr . Cet outil de dveloppement est un logiciel qui va nous permettre de crer des applications et qui va nous fournir lesoutils pour orchestrer nos dveloppements. La gamme de Microsoft est riche en outils professionnels de qualit pour ledveloppement, notamment grce Visual Studio.

Pour apprendre et commencer dcouvrir l'environnement de dveloppement, Microsoft propose gratuitement Visual Studiodans sa version express. Cest une version allge de lenvironnement de dveloppement qui permet de faire plein de choses,mais avec moins d'outils que dans les versions payantes. Rassurez-vous, ces versions gratuites sont trs fournies et permettentde faire tout ce dont on a besoin pour apprendre dvelopper sur Windows Phone et suivre ce tutoriel !

Pour raliser des applications d'envergure, il pourra cependant tre judicieux d'investir dans l'outil complet et ainsi bnficier defonctionnalits complmentaires qui permettent d'amliorer, de faciliter et d'industrialiser les dveloppements.

Pour dvelopper pour Windows Phone gratuitement, nous allons avoir besoin de Microsoft Visual Studio Express pourWindows Phone. Pour le tlcharger, rendez-vous sur http://dev.windowsphone.com.

Si vous possdez la version payante de Visual Studio, rendez-vous galement sur http://dev.windowsphone.com pourtlcharger les outils complmentaires et notamment le SDK permettant le dveloppement sur Windows Phone.

Attention, le site est en anglais, mais ne vous inquitez pas, je vais vous guider. Cliquez ensuite sur Get SDK qui va nouspermettre de tlcharger les outils gratuits (voir la figure suivante).

Obtenir le SDK depuis la page d'accueil du dev center

On arrive sur une nouvelle page o il est indiqu que lon doit tlcharger le Windows Phone SDK . SDK signifie Software


www.siteduzero.com

Development Kit que lon peut traduire par : Kit de dveloppement logiciel. Ce sont tous les outils dont on va avoir besoin pourdvelopper dans une technologie particulire, ici en loccurrence pour Windows Phone.

On nous propose de tlcharger soit la version 8.0 du SDK qui va nous permettre de dvelopper pour Windows Phone 7.5 et 8.0,soit la version 7.1 du SDK qui nous permettra de dvelopper uniquement pour Windows Phone 7.5. La version 7.11 du SDK estune mise jour de la version 7.1 permettant de dvelopper sous Windows 8. Tlchargez la version qui vous convient encliquant sur le bouton Download correspondant (voir la figure suivante).

Notez ici que je tlcharge et installe la version 8.0 du SDK, les actions sont sensiblement les mmes pour la version 7.1du SDK.

Tlcharger le SDK

On arrive sur une nouvelle page o nous allons enfin pouvoir passer en franais (voir la figure suivante).


www.siteduzero.com

Obtenir le SDK en franais

Une nouvelle page se charge et nous allons pouvoir tlcharger linstalleur qui va nous installer tout ce qu'il nous faut. Commesa taille le suggre, il ne sagit que dun petit excutable qui aura besoin de se connecter internet pour tlcharger tout ce dontil a besoin (voir la figure suivante).


www.siteduzero.com

Tlcharger l'installeur

Donc, dmarrez le tlchargement et enchanez tout de suite sur linstallation, tant que vous tes connects internet (voir lafigure suivante).

Logo du SDK

pour Windows Phone 8

Linstallation est plutt classique et commence par lacceptation du contrat de licence (voir la figure suivante).


www.siteduzero.com

L'acceptation du contrat de

licence pour le SDK 7.1


www.siteduzero.com

L'acceptation du contrat de licence pour

le SDK 8.0

Pour le SDK 7.1, il y a un cran supplmentaire pour choisir dinstaller les outils maintenant (voir la figure suivante).


www.siteduzero.com

Insaller les outils avec le SDK

7.1

Linstallation est globalement plutt longue, surtout sur un PC fraichement install. Jespre que vous russirez contenir votreimpatience !Enfin, nous arrivons la fin de linstallation et vous pouvez dmarrer Visual Studio.

Remarquez que si vous avez install le SDK 8.0, vous aurez la version 2012 de Visual Studio Express pour WindowsPhone alors que si vous avez install la version 7.1 du SDK, vous aurez la version 2010 de Visual Studio Express pourWindows Phone.

Vous pouvez galement dmarrer Visual Studio Express pour Windows Phone partir du Menu Dmarrer. Si vous possdez uneversion payante de Visual Studio, vous pouvez prsent le lancer.

Pour la suite du cours, je me baserai sur la version gratuite de Visual Studio 2012 Express que nous venons dinstaller,mais tout ceci sera valable avec la version 2010 ou avec les versions payantes de Visual Studio. Les captures serontsans doute diffrentes, mais je suppose que vous vous y retrouverez !

son ouverture, vous pouvez constater que nous arrivons sur la page de dmarrage (voir la figure suivante).


www.siteduzero.com

Page de dmarrage de Visual Studio permettant de crer un nouveau projet

Nous allons donc crer un nouveau projet en cliquant sur le lien (comme indiqu sur la capture d'cran), ou plus classiquementpar le menu Fichier > Nouveau projet.

ce moment-l, Visual Studio Express 2012 pour Windows Phone (que jappellerai dsormais Visual Studio pour conomiser mesdoigts et les touches de mon clavier ) nous ouvre sa page de choix du modle du projet (voir la figure suivante).

Modle de projet pour crer une application Windows Phone


www.siteduzero.com

Nous allons choisir de crer une Application Windows Phone, qui est la version la plus basique du projet permettant de raliserune application pour Windows Phone avec le XAML. Remarquons que le choix du langage est possible entre Visual Basic,Visual C++ et Visual C#. Nous choisissons videmment le C# car cest le langage que nous matrisons. Jen profite pour nommermon projet HelloWorld (ici, personne ne se doute quel type dapplication nous allons faire trs bientt ).

Enfin, aprs avoir valid la cration du projet, il nous demande la version cibler (voir la figure suivante).

Choix de la version du SDK

utiliser

Choisissez 8.0 pour dvelopper pour Windows Phone 8 ou 7.1 pour dvelopper pour Windows Phone 7.5. Rappelez-vousquune application 7.5 sera excutable sur les tlphones quips de Windows Phone 8 (cest lavantage) mais ne pourra pasutiliser les nouveauts de Windows Phone 8 (cest linconvnient).

Visual Studio gnre son projet, les fichiers qui le composent et souvre sur la page suivante (voir la figure suivante).

L'interface de Visual Studio, ainsi que la liste droulante permettant de choisir l'mulateur

Nous allons revenir sur cet cran trs bientt. Ce quil est important de remarquer cest que si nous dmarrons lapplication tellequelle, elle va se compiler et sexcuter dans lmulateur Windows Phone. Vous le voyez dans le petit encadr en haut de VisualStudio, cest la cible du dploiement. Il est possible de dployer soit sur lmulateur, soit directement sur un tlphone reli auposte de travail. Il ne reste plus qu rellement excuter notre application

Il ne sera pas possible de dployer notre application sur le tlphone sans une manipulation pralable que nousdcouvrirons dans le dernier chapitre. Si vous navez pas les prrequis matriels pour installer lmulateur et que vouspossdez un Windows Phone, vous pouvez dores et dj vous reporter ce chapitre afin de pouvoir continuer suivre le cours.

LmulateurAttention, si vous avez install le SDK 8.0, vous allez avoir besoin galement dinstaller le logiciel gestion de la virtualisation :Hyper-v. Celui-ci nest disponible quavec les versions PRO ou Entreprise de Windows 8 et uniquement si votre processeursupporte la technologie SLAT.Allez dans le panneau de configuration, programmes, et choisissez dactiver des fonctionnalits Windows (voir la figuresuivante).


www.siteduzero.com

Panneau de configuration pour permettre l'installation d'Hyper-V

Puis, installez hyper-V en cochant la case correspondante (voir la figure suivante).

Cocher pour installer Hyper-V


www.siteduzero.com

Excutons donc notre application en appuyant sur F5 qui nous permet de dmarrer lapplication en utilisant le dbogueur.

Vous aurez peut-tre la fentre dlvation des privilges (voir figure suivante) qui permet de configurer lmulateur. Ence cas, cliquez sur Ressayer.

Dmarrage de l'mulateur avec lvation de privilge

Nous constatons que lmulateur se lance, il ressemble un tlphone Windows Phone On les reconnait dun coup dil carils ont les trois boutons en bas du tlphone, la flche (ou retour arrire), le bouton daccs au menu et la loupe pour faire desrecherches (voir la figure suivante).

Emulateur Windows Phone 8


www.siteduzero.com

Lmulateur possde galement des boutons en haut droite qui permettent (de haut en bas) de :

Fermer lmulateurMinimiser lmulateurFaire pivoter de 90 vers la gauche lmulateurFaire pivoter de 90 vers la droite lmulateurAdapter la rsolutionZoomer/dzoomer sur lmulateurOuvrir les outils supplmentaires

Boutons permettant de faire des actions sur l'mulateur

Remarquons galement que des chiffres saffichent sur le ct droit de lmulateur. Ce sont des informations sur lesperformances de lapplication, nous y reviendrons en fin de tutoriel. Enfin, vous pouvez fermer lapplication en arrtant le dbogueur en cliquant sur le carr (voir la figure suivante).

Bouton pour arrter le dbogage dans Visual Studio


www.siteduzero.com

XAML et code behindRevenons un peu sur cette page que nous a affich Visual Studio. Nous pouvons voir que le milieu ressemble lmulateur etque le ct droit ressemble un fichier XML.Vous ne connaissez pas les fichiers XML ? Si vous voulez en savoir plus, nhsitez pas faire un petit tour sur internet, cest unformat trs utilis dans linformatique !Pour faire court, le fichier XML est un langage de balise, un peu comme le HTML, o lon dcrit de linformation. Les balisessont des valeurs entoures de < et > qui dcrivent la smantique de la donne. Par exemple :

Code : XML

Nicolas

La balise est ce quon appelle une balise ouvrante, cela signifie que ce qui se trouve aprs (en loccurrence la chaine Nicolas ) fait partie de cette balise jusqu ce que lon rencontre la balise fermante qui est comme la baliseouvrante lexception du / prcdant le nom de la balise.Le XML est un fichier facile lire par nous autres humains. On en dduit assez facilement que le fichier contient la chaine Nicolas et quil sagit smantiquement dun prnom.Une balise peut contenir des attributs permettant de donner des informations sur la donne. Les attributs sont entours deguillemets " et " et font partis de la balise. Par exemple :

Code : XML

Ici, la balise client possde un attribut nom ayant la valeur Nicolas et un attribut age ayant la valeur 30 . Encoreune fois, cest trs facile lire pour un humain.Il est possible que la balise nait pas de valeur, comme cest le cas dans lexemple ci-dessus. On peut dans ce cas-l remplacer labalise ouvrante et la balise fermante par cet quivalent :

Code : XML

Enfin, et nous allons terminer notre aperu rapide du XML avec un dernier point. Il est important de noter que le XML peutimbriquer ses balises et quil ne peut possder quun seul lment racine, ce qui nous permet davoir une hirarchie de donnes.Par exemple nous pourrons avoir :

Code : XML

Nicolas 30 Jrmie 40

On voit tout de suite que le fichier dcrit une liste de deux clients. Nous en avons un qui est un particulier, qui sappelle Nicolaset qui a 30 ans alors que lautre est un professionnel, prnomm Jrmie et qui a 40 ans.

quoi cela nous sert-il ? comprendre ce fameux fichier de droite. Cest le fichier XAML (prononcez Zammel ). Le XAML


www.siteduzero.com

est un langage qui permet de dcrire des interfaces et en loccurrence ici le code XAML ( droite dans Visual Studio) dcritlinterface que nous retrouvons au milieu. Cette zone est la prvisualisation du rendu du code crit dans la partie droite. Onappelle la zone du milieu, le concepteur (ou plus souvent le designer en anglais). En fait, le fichier XAML contient des balises qui dcrivent ce qui doit safficher sur lcran du tlphone. Nous allons y revenir.

Nous allons donc devoir apprendre un nouveau langage pour pouvoir crer des applications sur Windows Phone : le XAML. Nevous inquitez pas, il est assez facile apprendre et des outils vont nous permettre de simplifier notre apprentissage.

Ok pour le XAML si tu dis que ce nest pas trop compliqu, mais le C# dans tout a ?

Eh bien il arrive dans le fichier du mme nom que le fichier XAML et il est suffix par .cs. Nous le retrouvons si nous cliquons surle petit triangle ct du fichier XAML qui permet de dplier les fichiers (voir la figure suivante).

Le XAML et son code-behind

Il est juste en dessous, on lappelle le code behind. Le code behind est le code C# qui est associ lcran qui va safficher partir du code XAML. Il permet de grer toute la logique associe au XAML. Si vous ouvrez ce fichier C#, vous pouvez voir quelques instructions dj cres en mme temps que le XAML. Nous allonsgalement y revenir.

Dans la suite de ce tutoriel, les extraits de code XAML seront indiqus par le Site du Zro comme du XML. C'estseulement pour les besoins de la coloration syntaxique, mais rassurez-vous, il s'agira bien de XAML.

Blend pour le designAfin de faciliter la ralisation de jolis crans destination du tlphone, nous pouvons modifier le XAML. C'est un point quenous verrons plus en dtail un peu plus loin. Il est possible de le modifier directement la main lorsquon connait la syntaxe,mais nous avons aussi notre disposition un outil ddi au design qui le fait tout seul : Blend.

Microsoft Expression Blend est un outil professionnel de conception d'interfaces utilisateur de Microsoft. Une version gratuitepour Windows Phone a t installe en mme temps que Visual Studio Express 2012 pour Windows Phone et permet de travaillersur le design de nos crans XAML.Nous verrons comment il fonctionne mais nous ne nous attarderons pas trop sur son fonctionnement car il mriterait un tutorielentier.

Ce qui est intressant cest quil est possible de travailler en mme temps sur le mme projet dans Visual Studio et dans Blend,les modifications se rpercutant de lun lautre. Faisons un clic droit sur le fichier XAML et choisissons de louvrir dansExpression Blend (voir la figure suivante).


www.siteduzero.com

Dmarrage de

Blend depuis Visual Studio

Blend souvre alors et affiche nouveau le rendu de notre cran (voir la figure suivante).

Interface de Blend

On peut voir galement une grosse bote outils qui va nous permettre de styler notre application. Nous y reviendrons.Pour dvelopper pour Windows Phone, nous avons besoin de Visual Studio et du kit de dveloppement pour WindowsPhone.Il existe une version totalement gratuite de Visual Studio permettant de raliser des applications sous Windows Phone.Un mulateur accompagne Visual Studio pour tester ses applications en mode dveloppement.Blend est loutil de design permettant de styler son application, dont une version gratuite est fournie avec le kit dedveloppement pour Windows Phone.


www.siteduzero.com

Notre premire applicationNous avons dsormais tous les outils quil faut pour commencer apprendre raliser des applications pour Windows Phone. Nous avons pu voir que ces outils fonctionnent et nous avons pu constater un dbut de rsultat grce lmulateur. Mais pourbien comprendre et assimiler toutes les notions, nous avons besoin de plus de concret, de manipuler des lments et de voirquest-ce qui exactement agit sur quoi. Aussi, il est temps de voir comment raliser une premire application avec le classique Hello World ! Cette premire application va nous servir de base pour commencer dcouvrir ce quil faut pour raliser des applications pourWindows Phone.

Hello WorldRevenons donc sur notre cran o nous avons le designer et le XAML. Positionnons-nous sur le code XAML et ajoutons deslments sans trop comprendre ce que nous allons faire afin de raliser notre Hello World . Nous reviendrons ensuite sur ceque nous avons fait pour expliquer le tout en dtail.

Pour commencer, on va modifier la ligne suivante :

Code : XML

et crire ceci :

Code : XML

Nous changeons donc la valeur de lattribut Text de la balise .

Jemploie ici du vocabulaire XML, mais ne le retenez pas car ce nest pas exactement de a quil sagit. Nous yreviendrons.

Ensuite, juste aprs :

Code : XML

Donc, lintrieur de cette balise , rajoutez :

Code : XML

Remarquez que lorsque vous avez saisi la ligne :


www.siteduzero.com

Code : XML

au moment de taper : Tap="", Visual Studio Express vous a propos de gnrer un nouveau gestionnaire dvnement (voir lafigure suivante).

Gnration du gestionnaire d'vnement depuis le XAML

Vous pouvez le gnrer en appuyant sur Entre, cela nous fera gagner du temps plus tard. Sinon, ce nest pas grave.Vous pouvez constater que le designer sest mis jour pour faire apparatre nos modifications (voir la figure suivante).

Le rendu du XAML dans la fentre du concepteur


www.siteduzero.com

Ouvrez maintenant le fichier de code behind et modifiez la mthode Button_Tap_1 pour avoir :

Code : C#

private void Button_Tap_1(object sender,System.Windows.Input.GestureEventArgs e){ Resultat.Text = "Bonjour " + Nom.Text;}

Nous pouvons ds prsent dmarrer notre application en appuyant sur F5. Lmulateur se lance et nous voyons apparatre lesnouvelles informations sur lcran (voir la figure suivante).

Rendu de l'application dans l'mulateur

La souris va ici permettre de simuler le toucher avec le doigt lorsque nous cliquons. Cliquons donc dans la zone de texte etnous voyons apparatre un clavier virtuel lintrieur de notre application (voir la figure suivante).


www.siteduzero.com

Le clavier virtuel dans l'mulateur

Ce clavier virtuel sappelle le SIP (pour Soft Input Panel) et apparait automatiquement quand on en a besoin, notamment dans leszones de saisie, nous y reviendrons. Saisissons une valeur dans la zone de texte et cliquons sur le bouton Valider.Nous voyons apparatre le rsultat en rouge avec un magnifique message construit (voir la figure suivante).


www.siteduzero.com

Affichage de l'Hello World dans l'mulateur

Et voil, notre Hello World est termin ! Chouette non ? Pour quitter lapplication, le plus simple est darrter le dbogueur de Visual Studio en cliquant sur le carr Stop.

Linterface en XAMLAlors, taper des choses sans rien comprendre, a va un moment mais l, il est temps de savoir ce que nous avons fait !

Nous avons dans un premier temps fait des choses dans le XAML. Pour rappel, le XAML sert dcrire le contenu de ce quenous allons voir lcran. En fait, un fichier XAML correspond une page. Une application peut tre dcoupe en plusieurspages, nous y reviendrons plus tard. Ce que nous avons vu sur lmulateur est laffichage de la page MainPage.

Donc, nous avons utilis le XAML pour dcrire le contenu de la page. Il est globalement assez explicite mais ce quil fautcomprendre cest que nous avons ajout des contrles du framework .NET dans la page. Un contrle est une classe C# compltequi sait safficher, se positionner, traiter des vnements de lutilisateur (comme le clic sur le bouton), etc. Ces contrles ont desproprits et peuvent tre ajouts dans le XAML.Par exemple, prenons la ligne suivante :

Code : XML

Nous demandons dajouter dans la page le contrle TextBlock. Le contrle TextBlock correspond une zone de texte nonmodifiable. Nous positionnons sa proprit Text la chaine de caractres "Saisir votre nom". Ce contrle sera align au centregrce la proprit HorizontalAlignment positionne Center. En fait, jai dit que nous lajoutons dans la page, maispour tre plus prcis, nous lajoutons dans le contrle StackPanel qui est lui-mme contenu dans le contrle Grid, qui estcontenu dans la page. Nous verrons plus loin ce que sont ces contrles.

Ce que nous avons appel balise plus tt est en fait un contrle, et ce que nous avons appel attribut


www.siteduzero.com

correspond une proprit de ce contrle.

Derrire, automatiquement, cette ligne de XAML entrane la dclaration et linstanciation dun objet de type TextBlock avecles affectations de proprits adquates. Puis ce contrle est ajout dans le contrle StackPanel. Tout ceci nous est masqu.Grce au XAML nous avons simplement dcrit linterface de la page et cest Visual Studio qui sest occup de le transformer enC#.Parfait ! Moins on en fait et mieux on se porte et surtout il y a moins de risque derreurs.

Et cest pareil pour tous les autres contrles de la page, le TextBlock qui est une zone de texte non modifiable, le TextBoxqui est une zone de texte modifiable dclenchant laffichage du clavier virtuel, le bouton, etc.

Vous laurez peut-tre devin, mais cest pareil pour la page. Elle est dclare tout en haut du fichier XAML :

Code : XML

Cest dailleurs le conteneur de base du fichier XAML, celui qui contient tous les autres contrles. La page est en faitreprsente par la classe PhoneApplicationPage qui est aussi un objet du framework .NET. Plus prcisment, notre pageest une classe gnre qui drive de lobjet PhoneApplicationPage. Il sagit de la class MainPage situe danslespace de nom HelloWorld, cest ce que lon voit dans la proprit :

Code : XML

x:Class="HelloWorld.MainPage"

On peut sen rendre compte galement dans le code behind de la page o Visual Studio a gnr une classe partielle du mmenom que le fichier XAML et qui drive de PhoneApplicationPage :

Code : C#

public partial class MainPage : PhoneApplicationPage{ // Constructeur public MainPage() { InitializeComponent(); }

private void Button_Tap_1(object sender,System.Windows.Input.GestureEventArgs e) {


www.siteduzero.com

Resultat.Text = "Bonjour " + Nom.Text; }}

Pourquoi partielle ? Parce quil existe un autre fichier dans votre projet. Ce fichier est cach mais on peut lafficher en cliquant surle bouton en haut de lexplorateur de solution (voir la figure suivante).

Affichage des fichiers cachs dans l'explorateur de solutions

Et nous pouvons voir notamment un rpertoire obj contenant un rpertoire debug contenant le fichier MainPage.g.i.cs.Si vous louvrez, vous pouvez trouver le code suivant :

Code : C#

public partial class MainPage :Microsoft.Phone.Controls.PhoneApplicationPage { internal System.Windows.Controls.Grid LayoutRoot; internal System.Windows.Controls.StackPanel TitlePanel; internal System.Windows.Controls.Grid ContentPanel; internal System.Windows.Controls.TextBox Nom; internal System.Windows.Controls.TextBlock Resultat; private bool _contentLoaded; /// /// InitializeComponent /// [System.Diagnostics.DebuggerNonUserCodeAttribute()] public void InitializeComponent() { if (_contentLoaded) {


www.siteduzero.com

return; } _contentLoaded = true; System.Windows.Application.LoadComponent(this, newSystem.Uri("/HelloWorld;component/MainPage.xaml",System.UriKind.Relative)); this.LayoutRoot =((System.Windows.Controls.Grid)(this.FindName("LayoutRoot"))); this.TitlePanel =((System.Windows.Controls.StackPanel)(this.FindName("TitlePanel"))); this.ContentPanel =((System.Windows.Controls.Grid)(this.FindName("ContentPanel"))); this.Nom =((System.Windows.Controls.TextBox)(this.FindName("Nom"))); this.Resultat =((System.Windows.Controls.TextBlock)(this.FindName("Resultat"))); }}

Il sagit dune classe qui est gnre lorsquon modifie le fichier XAML. Ne modifiez pas ce fichier car il sera re-gnr tout letemps. On peut voir quil sagit dune classe MainPage, du mme nom que la proprit x:Class de tout lheure, quisoccupe de charger le fichier XAML et qui cre des variables partir des contrles quil trouvera dedans.Nous voyons notamment quil a cr les deux variables suivantes :

Code : C#

internal System.Windows.Controls.TextBox Nom;internal System.Windows.Controls.TextBlock Resultat;

Le nom de ces variables correspond aux proprits x:Name des deux contrles que nous avons cr :

Code : XML

Ces variables sont initialises aprs quil ait charg tout le XAML en faisant une recherche partir du nom du contrle. Celaveut dire que nous disposons dune variable qui permet daccder au contrle de la page, par exemple la variable Nom du typeTextBox. Je vais y revenir.Nous avons donc :

Un fichier MainPage.xaml qui contient la description des contrlesUn fichier gnr qui contient une classe partielle qui drive de PhoneApplicationPage et qui charge ce XAML etqui rend accessible nos contrles via des variablesUn fichier de code behind qui contient la mme classe partielle o nous pourrons crire la logique de notre code

Remarquez quil existe galement le fichier MainPage.g.cs qui correspond au fichier gnr aprs la compilation. Nous nenous occuperons plus de ces fichiers gnrs, ils ne servent plus rien. Nous les avons regards pour comprendre commentcela fonctionne.

Le code-behind en C#Revenons sur le code behind, donc sur le fichier MainPage.xaml.cs, nous avons :

Code : C#

public partial class MainPage : PhoneApplicationPage


www.siteduzero.com

{ // Constructeur public MainPage() { InitializeComponent(); }

private void Button_Tap_1(object sender,System.Windows.Input.GestureEventArgs e) { Resultat.Text = "Bonjour " + Nom.Text; }}

On retrouve bien notre classe partielle qui hrite des fonctionnalits de la classe PhoneApplicationPage. Regardez lintrieur de la mthode Button_Tap_1, nous utilisons les fameuses variables que nous navons pas dclar nous-mmemais qui ont t gnres Ce sont ces variables qui nous permettent de manipuler nos contrles et en loccurrence ici, quinous permettent de modifier la valeur de la zone de texte non modifiable en concatnant la chaine Bonjour la valeur de lazone de texte modifiable, accessible via sa proprit Text.Vous aurez compris ici que ce sont les proprits Text des TextBlock et TextBox qui nous permettent daccder aucontenu qui est affich sur la page. Il existe plein dautres proprits pour ces contrles comme la proprit Foreground quipermet de modifier la couleur du contrle, sauf quici nous lavions positionn grce au XAML :

Code : XML

Chose que nous aurions galement pu faire depuis le code behind :

Code : C#

private void Button_Tap_1(object sender,System.Windows.Input.GestureEventArgs e){ Resultat.Foreground = new SolidColorBrush(Colors.Red); Resultat.Text = "Bonjour " + Nom.Text;}

Sachez quand mme que dune manire gnrale, on aura tendance essayer de mettre le plus de chose possible dans le XAMLplutt que dans le code behind. La proprit Foreground ici a tout intrt tre dclare dans le XAML.

Le contrle GridJe vais y revenir plus loin un peu plus loin, mais pour que vous ne soyez pas compltement perdu dans notre Hello World, il fautsavoir que la Grid est un conteneur.

Vous aurez compris que la Grid est en fait une grille

Aprs cet effort de traduction intense, nous pouvons dire que la grille sert contenir et agencer dautres contrles. Dans notrecas, le code suivant :

Code : XML


www.siteduzero.com

Dfini une grille qui contient deux lignes. La premire contient un contrle StackPanel, nous allons en parler juste aprs. Laseconde ligne contient une nouvelle grille sans ligne ni colonne, qui est galement compose dun StackPanel.Nous aurons loccasion den parler plus longuement plus tard donc je marrte l pour linstant sur la grille.

Le contrle StackPanelIci cest pareil, le contrle StackPanel est galement un conteneur. Je vais y revenir un peu plus loin galement mais il permetici daligner les contrles les uns en dessous des autres. Par exemple

Developper Pour Windows Phone en C#

Documents

Transcript of Developper Pour Windows Phone en C#