Version en ligne

Tutoriel : Apprenez à développer pour Windows Phone en C#

Table des matières

Apprenez à développer pour Windows Phone en C#
Windows Phone, un nouveau périphérique
Historique, la mobilité chez Microsoft
Le renouveau : Windows Phone 7
Windows Phone 8
L’esprit Modern UI
Le Windows Phone Store
Les outils de développements
Prérequis
Installer Visual Studio Express pour Windows Phone
L’émulateur
XAML et code behind
Blend pour le design
Notre première application
Hello World
L’interface en XAML
Le code-behind en C#
Le contrôle Grid
Le contrôle StackPanel
Le contrôle TextBox
Le contrôle TextBlock
Les événements
Le bouton
Et Silverlight dans tout ça ?
Les contrôles
Généralités sur les contrôles
Utiliser le designer pour ajouter un CheckBox
Utiliser Expression Blend pour ajouter un ToggleButton
Le clavier virtuel
Afficher le clavier virtuel
Intercepter les touches du clavier virtuel
Les différents types de clavier
Les conteneurs et le placement
StackPanel
ScrollViewer
Grid
Canvas
Alignement
Marges et espacement
Ajouter du style
Afficher des images
Les ressources
Les styles
Les thèmes
Changer l’apparence de son contrôle
TP1 : Création du jeu du plus ou du moins
Instructions pour réaliser le TP
Correction
Dessiner avec le XAML
Dessin 2D
Pinceaux
Les transformations
Créer des animations
Principe généraux des animations
Création d’une animation simple (XAML)
Création d’une animation complexe (Blend)
Projections 3D
Une application à plusieurs pages, la navigation
Naviguer entre les pages
Gérer le bouton de retour arrière
Ajouter une image d’accueil (splash screen)
Le tombstonning
TP 2 : Créer une animation de transition entre les pages
Instructions pour réaliser le TP
Correction
Les propriétés de dépendances et propriétés attachées
Les propriétés de dépendances
Les propriétés attachées
Où est mon application ?
Le .XAP
Affichage d’images en ressources
Accéder au flux des ressources
ListBox
Un contrôle majeur
Gérer les modèles
Sélection d’un élément
La manipulation des données (DataBinding & Converters)
Principe du Databinding
Le binding des données
Binding et mode design
Utiliser l’ObservableCollection
Les converters
MVVM
Principe du patron de conception
Première mise en place de MVVM
Les commandes
Les frameworks à la rescousse : MVVM-Light
D'autres frameworks MVVM
Faut-il utiliser systématiquement MVVM ?
Gestion des états visuels
Les états d’un contrôle
Modifier un état
Changer d’état
Créer un nouvel état
Le traitement des données
HttpRequest & WebClient
Linq-To-Json
La bibliothèque de Syndication
Asynchronisme avancé
Le répertoire local
Panorama et Pivot
Panorama
Pivot
Navigateur web
Naviguer sur une page web
Evénements de navigation
Navigation interne
Communiquer entre XAML et HTML
TP : Création d’un lecteur de flux RSS simple
Instructions pour réaliser le TP
Correction
Aller plus loin
Gérer l'orientation
Les différentes orientations
Détecter les changements d'orientation
Stratégies de gestion d'orientation
Gérer les multiples résolutions
Les différentes résolutions
Gérer plusieurs résolutions
Les images
L’image de l’écran d’accueil
L’application Bar
Présentation et utilisation
Appliquer le Databinding
Mode plein écran
Le toolkit Windows Phone
Présentation et installation du toolkit Windows Phone
PerformanceProgressBar
ListPicker
WrapPanel
LongListSelector
Avantages & limites du toolkit
Les autres toolkits
Le contrôle de cartes (Map)
Présentation et utilisation
Interactions avec le contrôle
Epingler des points d’intérêt
Afficher un itinéraire
TP : Une application météo
Instructions pour réaliser le TP
Correction
La gestuelle
Le simple toucher
Les différents toucher
Gestuelle avancée
Le toolkit à la rescousse
L'accéléromètre
Utiliser l'accéléromètre
Utiliser l'accéléromètre avec l'émulateur
Exploiter l’accéléromètre
Les autres capteurs facultatifs
La motion API
TP : Jeux de hasard (Grattage et secouage)
Instructions pour réaliser le TP
Correction
Aller plus loin
La géolocalisation
Déterminer sa position
Utiliser la géolocalisation dans l'émulateur
Utiliser la géolocalisation avec le contrôle Map
Les Tasks du téléphone
Les choosers
Les launchers
Etat de l’application
Les tuiles
Que sont les tuiles ?
Des tuiles pour tous les gouts
Personnaliser les tuiles par défaut
Créer des tuiles secondaires
Modifier et supprimer une tuile
Les notifications
Principe d’architecture
Principe de création du serveur de notification
Les différents messages de notifications
Création du client Windows Phone recevant la notification
TP : Améliorer l'application météo, Géolocalisation et tuiles
Instructions pour réaliser le TP
Correction
Aller plus loin
Une application fluide = une application propre !
Un thread, c’est quoi ?
Thread UI
Utiliser un thread d’arrière-plan
Utiliser le Dispatcher
Utiliser un BackgroundWorker
Le pool de thread
Le DispatcherTimer
Thread de composition
Les outils pour améliorer l’application
Background Agent
Créer un background agent pour une tâche périodique
La tâche aux ressources intensives
Remarques générales sur les tâches
Envoyer une notification depuis un agent d’arrière-plan
Utiliser Facebook
Créer une application Facebook
Le SDK
Qu’est-ce qu’OAuth
Se loguer
Exploiter le graphe social avec le SDK
Récupérer des informations
Obtenir la liste de ses amis
Poster sur son mur
Utiliser les tasks

Apprenez à développer pour Windows Phone en C#

La révolution de la mobilité est en marche. Nous connaissons tous l’iPhone qui a su conquérir un grand nombre d’utilisateurs, ainsi que les téléphones Android dont le nombre ne cesse de croitre… Ces téléphones intelligents (ou smartphones) deviennent omniprésents dans nos usages quotidiens. Microsoft se devait de monter dans le TGV de la mobilité ! Sont donc apparus, peu après ses deux grands concurrents, les téléphones Windows. Avec un peu plus de retard sur eux, Microsoft attaque ce marché avec plus de maturité qu’Apple qui a foncé en tant que pionnier et nous propose son système d’exploitation : Windows Phone.

C’est une bonne nouvelle pour nous ! C’est aujourd’hui un nouveau marché qui s’ouvre à nous avec plein d’applications potentielles à réaliser grâce à nos talents de développeur. Si c’est pour ça que vous vous trouvez sur cette page, alors restez-y ! Dans ce tutoriel, nous allons apprendre à réaliser des applications pour Windows Phone grâce à notre langage préféré, le C#. Bonne nouvelle non ?

Il est possible de réaliser deux grands types d’application Windows Phone :

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

Dans ce tutoriel, nous allons apprendre à développer des applications de gestion avec Silverlight pour Windows Phone, qui est utilisé dans les versions 7 de Windows Phone, mais également des applications XAML/C#, utilisé pour développer des applications pour Windows Phone 8. Vous ne connaissez pas Silverlight, ni XAML/C# ? Ce n’est pas grave, nous allons les introduire rapidement (mais sûrement) dans les prochains chapitres.

Avant de commencer, je dois quand même vous signaler que le développement pour Windows Phone peut rendre accroc ! Vous allez avoir envie de créer des applications sans jamais vous arrêter ! Si vous êtes prêts à assumer cette probable dépendance, c’est que vous êtes bons pour continuer. Alors, c’est parti ! ;)

Image utilisateur
Image utilisateur

Windows Phone, un nouveau périphérique

Historique, la mobilité chez Microsoft

Windows Phone est la nouvelle plateforme pour téléphones mobiles de Microsoft. Elle permet de réaliser des applications pour les smartphones équipés du système d’exploitation 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 système d'exploitation pour smartphone afin de concurrencer les deux géants que sont Apple et Google.

Historique, la mobilité chez Microsoft

Windows Phone, un nouveau périphérique Le renouveau : Windows Phone 7

Cela fait longtemps que Microsoft dispose de matériels mobiles. On a eu dans un premier temps les périphériques équipés de Windows CE ; ce système d’exploitation était une variation de Windows destinée aux systèmes embarqués. Il a notamment été beaucoup utilisé dans les PC de poche (Pocket PC). Cette version de Windows était optimisée pour les appareils possédant peu d’espace de stockage.

Est arrivée ensuite la gamme de Windows Mobile. Ce système d’exploitation était utilisé sur des smartphones, PDA ou PC de poche. Il est arrivé pour concurrencer les Blackberry et permettait de recevoir ses emails, d’utiliser la suite bureautique, etc. Ces mobiles ressemblaient beaucoup au Windows que l’on connait, avec son fameux menu démarrer. On utilisait en général un stylet à la place de la souris.

Avec les nouvelles interfaces tactiles, on a vu apparaître Apple et son fameux iPhone venu pour révolutionner la façon dont on se servait jusqu’à présent des appareils mobiles. Ce qui a donné un sérieux coup de vieux à Windows Mobile…

Un Windows CE et un IPhone
Un Windows CE et un IPhone

Windows Phone, un nouveau périphérique Le renouveau : Windows Phone 7

Le renouveau : Windows Phone 7

Historique, la mobilité chez Microsoft Windows Phone 8

Microsoft a, à son tour, changé radicalement son système d’exploitation afin de prendre ce virage de la mobilité en proposant Windows Phone, dont la première version est la version 7, sortie en octobre 2010. Il ne s’agit pas d’une évolution de Windows Mobile, à part au niveau de la numérotation des versions (dans la mesure où Windows Mobile s’est arrêté avec la version 6.5). Windows Phone 7 a été redéveloppé de zéro et arrive avec un nouveau look, nommé dans un premier temps « Métro », plus épuré, fortement réactif et intuitif, et valorisant l’information structurée.

Microsoft se positionne ainsi en rupture avec ses systèmes d’exploitation précédents et propose des concepts différents pour son nouvel OS, comme la navigation exclusive au doigt par exemple. Il se veut plutôt grand public qu’uniquement destiné aux entreprises.

Pour être autorisé à utiliser le système d’exploitation Windows Phone 7, un smartphone doit respecter un minimum de spécifications. Ces spécifications garantissent qu’une application aura un minimum de puissance, évitant d’avoir des applications trop lentes. L’écran doit être multipoint d’au moins 3.5 pouces, c’est-à-dire qu’il doit pouvoir réagir à plusieurs pressions simultanées et permettant une résolution de 480x800. Les téléphones doivent également être munis obligatoirement de quelques équipements, comme le fait d’avoir un GPS, d’avoir une caméra, un accéléromètre, etc …

Chaque téléphone possédera également trois boutons faisant partie intégrante de son châssis. Le premier bouton permettra de revenir en arrière, le second d’accéder au menu et le dernier de faire des recherches.

Windows Phone 7
Windows Phone 7

Historique, la mobilité chez Microsoft Windows Phone 8

Windows Phone 8

Le renouveau : Windows Phone 7 L’esprit Modern UI

C’est tout dernièrement, avec la sortie de Windows 8, que le système d’exploitation Windows Phone a changé de version pour passer également à la version 8. L’objectif de Microsoft est d’unifier au maximum le cœur de Windows 8 et de Windows Phone 8, permettant de faire facilement des passerelles entre eux. Windows 8 étant un système d’exploitation créé avant tout pour des tablettes, il paraissait logique que Windows 8 et Windows Phone 8 partagent beaucoup de fonctionnalités. Windows 8 s’est largement inspiré de Windows Phone pour créer son style, Modern UI, et c’est désormais au tour de Windows Phone de subir une évolution majeure – Windows Phone 8 – afin de se rapprocher de son grand frère, Windows 8.

Beaucoup de choses sont partagées entre les deux systèmes, c’est ce qu’on appelle le « Shared Windows Core ». Ainsi, il deviendra très facile de créer des applications pour Windows Phone 8 qui ne nécessiteront que très peu d’adaptation pour fonctionner sur Windows 8. C’est une des grandes forces de Windows Phone 8.

Windows Phone 8 est également plus performant grâce au support du code natif. Il est ainsi possible de développer des jeux en C++, utilisant DirectX.

Windows Phone 8 apporte en plus des nouvelles résolutions d’écran : WVGA (800x480 pixels), WXVGA (1280x768), et "True 720p" (1280x720), avec une adaptation automatique de chacune.

Windows Phone 8
Windows Phone 8

Le renouveau : Windows Phone 7 L’esprit Modern UI

L’esprit Modern UI

Windows Phone 8 Le Windows Phone Store

Anciennement appelé « Métro », Modern UI est le nom donné par Microsoft à son langage de design. Plutôt que d’adapter l’interface des anciens Windows Mobile, pour Windows Phone 7 il a été décidé de repartir sur un tout nouveau design.

Le nom « Métro » a été inspiré par les affichages qui se trouvent effectivement dans les stations de métro et qui guident efficacement les voyageurs jusqu’à leurs destinations. Les affichages sont clairs, précis, souvent minimalistes et sans fioritures, par exemple une flèche et un gros 5 pour indiquer que c’est par là qu’on va trouver le métro numéro 5... Voilà à quoi doivent ressembler les interfaces pour Windows Phone. Elles doivent valoriser l’information et la fluidité plutôt que les interfaces lourdes et chargées. Le but est de faire en sorte que l’utilisateur trouve le plus rapidement possible l’information dont il a besoin et d’éviter les images ou animations superflues qui pourraient le ralentir.

Dans cette optique, les applications doivent être fluides et répondre rapidement aux actions de l’utilisateur, ou du moins lui indiquer que son action a été prise en compte. Ras le bol des applications Windows ou autre où on ne sait même plus si on a cliqué sur un bouton car rien ne se passe !

Modern UI se veut donc simple, épuré et moderne. Les fonctionnalités sont séparées en Hubs qui sont des espaces regroupant des informations de plusieurs sources de données. Ainsi, il existe plusieurs Hubs, comme le Hub « contacts » où l’on retrouvera les contacts du téléphone mais aussi les contacts Facebook, Twitter, … Nous avons aussi le Hub « Photos », « Musique et vidéos », « Jeux », « Microsoft Office », « Windows Phone Store » ou encore le hub « Entreprise » qui permettra d’accéder aux applications métiers via un portail que les entreprises peuvent personnaliser.

Ecran d'accueil de l'émulateur où l'on voit l'accès aux Hubs et aux applications
Ecran d'accueil de l'émulateur où l'on voit l'accès aux Hubs et aux applications

Une fois rentré dans un Hub, nous avons accès à plusieurs informations disposées sous la forme d’un panorama. Nous verrons un peu plus loin ce qu’est le panorama mais je peux déjà vous dire qu'il permet d’afficher des écrans de manière cyclique avec un défilement latéral. Ainsi, dans le Hub de contact, on arrive dans un premier temps sur la liste de tous les contacts. L’écran de panorama que l’on peut faire glisser avec le doigt nous permet d’obtenir sur l’écran suivant la liste des dernières activités de nos contacts, puis la liste des contacts récents, etc. Et c’est pareil pour les autres Hub, le but est d’avoir un point d’entrée qui centralise toutes les informations relatives à un point d’intérêt.

C’est avec tous ces principes en tête que vous devrez développer votre application. N’hésitez pas à observer comment sont faites les autres, on trouve souvent de bonnes sources d’inspirations permettant de voir ce qui fait la qualité du design d’une application.


Windows Phone 8 Le Windows Phone Store

Le Windows Phone Store

L’esprit Modern UI Les outils de développements

Les applications que nous créons sont ensuite téléchargeables sur la place de marché Windows Phone, appelée encore Windows Phone Store. Elles peuvent être gratuites ou payantes, permettant ainsi à son créateur de générer des revenus. Sur le store, on trouvera également des musiques et des vidéos.

Comme nous l’avons déjà dit en introduction, nous allons apprendre à développer pour Windows Phone sans forcément posséder un Windows Phone. C’est un point important, même s’il sera très utile d’en posséder un, vous pouvez tout à fait débuter sans.

Voilà, vous savez tout sur Windows Phone, il est temps d’apprendre à réaliser de superbes applications !


L’esprit Modern UI Les outils de développements

Les outils de développements

Le Windows Phone Store Prérequis

Ça a l’air super ça, de pouvoir développer des applications pour les téléphones ! C’est très à la mode et ces mini-ordinateurs nous réservent plein de surprises. Voyons donc ce qu’il nous faut pour nous lancer dans le monde merveilleux du développement pour Windows Phone.

Nous allons apprendre à développer pour Windows Phone équipés de la version 8, qui est la dernière version à l’heure où j’écris ces lignes. Vous serez également capables de créer des applications pour Windows Phone 7.5 et 7.8. Même si la version 8 semble très alléchante, les versions 7 ne sont pas à oublier trop rapidement. En effet, tous les utilisateurs n’ont pas encore acheté de Windows Phone 8 et seraient sûrement déçus de manquer votre application révolutionnaire. De plus, Windows Phone 8 sera également capable de faire tourner des applications 7.X. Un marché à ne pas oublier…

Prérequis

Les outils de développements Installer Visual Studio Express pour Windows Phone

Avant toute chose, je vais vous donner les éléments qui vont vous permettre de choisir entre l’environnement de développement dédié au développement d’applications pour Windows Phone 7.5 et celui dédié au développement d’applications pour 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 sûr le moins. Mais bien que les environnements de développement soient gratuits, vous n’allez peut-être pas avoir envie de changer de machine de développement pour autant.

Voici le matériel requis pour développer pour Windows Phone 7.5 :

La plupart des PC est aujourd’hui équipée de cette configuration. Ce qui est très pratique pour se lancer et découvrir le développement pour Windows Phone. Par contre, pour pouvoir développer pour Windows Phone 8, c’est un peu plus délicat :

Ces contraintes matérielles peuvent rendre difficile d’accès le développement pour Windows Phone 8 à quelqu’un qui souhaite simplement s’initier ou découvrir cette technologie. Si c’est votre cas et que vous ne possédez pas ce matériel, alors je vous conseille d’installer l’environnement de développement pour Windows Phone 7.5, qui vous permettra de suivre 95% du tutoriel. J’indiquerai au cours de ce tutoriel ce qui est réservé exclusivement à Windows Phone 8. Sinon, si votre matériel le permet, installez sans hésiter ce qu’il faut pour développer pour Windows Phone 8. :)

Ces éléments expliqués, voici la suite des prérequis :

Pour résumer ce qu’est le C#, il s’agit d’un langage orienté objet apparu en même temps que le framework .NET qui n’a cessé d’évoluer depuis 2001. Il permet d’utiliser les briques du framework .NET pour réaliser des applications de toutes sortes et notamment des applications pour Windows Phone. C’est le ciment et les outils qui permettent d’assembler les briques de nos applications.


Les outils de développements Installer Visual Studio Express pour Windows Phone

Installer Visual Studio Express pour Windows Phone

Prérequis L’émulateur

Puisqu’on est partis dans le bâtiment, il nous faut un chef de chantier qui va nous permettre d’orchestrer nos développements. C’est ce qu’on appelle l’IDE, pour Integrated Development Environment, ce qui signifie « Environnement de développement intégré ». Cet outil de développement est un logiciel qui va nous permettre de créer des applications et qui va nous fournir les outils pour orchestrer nos développements. La gamme de Microsoft est riche en outils professionnels de qualité pour le développement, notamment grâce à Visual Studio.

Pour apprendre et commencer à découvrir l'environnement de développement, Microsoft propose gratuitement Visual Studio dans sa version express. C’est une version allégée de l’environnement de développement qui permet de faire plein de choses, mais avec moins d'outils que dans les versions payantes. Rassurez-vous, ces versions gratuites sont très fournies et permettent de faire tout ce dont on a besoin pour apprendre à développer sur Windows Phone et suivre ce tutoriel !

Pour réaliser des applications d'envergure, il pourra cependant être judicieux d'investir dans l'outil complet et ainsi bénéficier de fonctionnalités complémentaires qui permettent d'améliorer, de faciliter et d'industrialiser les développements.

Pour développer pour Windows Phone gratuitement, nous allons avoir besoin de Microsoft Visual Studio Express pour Windows Phone. Pour le télécharger, rendez-vous sur http://dev.windowsphone.com.

Attention, le site est en anglais, mais ne vous inquiétez pas, je vais vous guider. Cliquez ensuite sur Get SDK qui va nous permettre de télécharger les outils gratuits (voir la figure suivante).

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

On arrive sur une nouvelle page où il est indiqué que l’on doit télécharger le « Windows Phone SDK ». SDK signifie Software Development Kit que l’on peut traduire par : Kit de développement logiciel. Ce sont tous les outils dont on va avoir besoin pour développer dans une technologie particulière, ici en l’occurrence pour Windows Phone.

On nous propose de télécharger soit la version 8.0 du SDK qui va nous permettre de développer pour Windows Phone 7.5 et 8.0, soit la version 7.1 du SDK qui nous permettra de développer uniquement pour Windows Phone 7.5. La version 7.11 du SDK est une mise à jour de la version 7.1 permettant de développer sous Windows 8. Téléchargez la version qui vous convient en cliquant sur le bouton Download correspondant (voir la figure suivante).

Télécharger le SDK
Télécharger le SDK

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

Obtenir le SDK en français
Obtenir le SDK en français

Une nouvelle page se charge et nous allons pouvoir télécharger l’installeur qui va nous installer tout ce qu'il nous faut. Comme sa taille le suggère, il ne s’agit que d’un petit exécutable qui aura besoin de se connecter à internet pour télécharger tout ce dont il a besoin (voir la figure suivante).

Télécharger l'installeur
Télécharger l'installeur

Donc, démarrez le téléchargement et enchaînez tout de suite sur l’installation, tant que vous êtes connectés à internet (voir la figure suivante).

Logo du SDK pour Windows Phone 8
Logo du SDK pour Windows Phone 8

L’installation est plutôt classique et commence par l’acceptation du contrat de licence (voir la figure suivante).

L'acceptation du contrat de licence pour le SDK 7.1
L'acceptation du contrat de licence pour le SDK 7.1
L'acceptation du contrat de licence pour le SDK 8.0
L'acceptation du contrat de licence pour le SDK 8.0

Pour le SDK 7.1, il y a un écran supplémentaire pour choisir d’installer les outils maintenant (voir la figure suivante).

Insaller les outils avec le SDK 7.1
Insaller les outils avec le SDK 7.1

L’installation est globalement plutôt longue, surtout sur un PC fraichement installé. J’espère que vous réussirez à contenir votre impatience !

Enfin, nous arrivons à la fin de l’installation et vous pouvez démarrer Visual Studio.

Vous pouvez également démarrer Visual Studio Express pour Windows Phone à partir du Menu Démarrer. Si vous possédez une version payante de Visual Studio, vous pouvez à présent le lancer.

À son ouverture, vous pouvez constater que nous arrivons sur la page de démarrage (voir la figure suivante).

Page de démarrage de Visual Studio permettant de créer un nouveau projet
Page de démarrage de Visual Studio permettant de créer un nouveau projet

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

À ce moment-là, Visual Studio Express 2012 pour Windows Phone (que j’appellerai désormais Visual Studio pour économiser mes doigts et les touches de mon clavier :p ) nous ouvre sa page de choix du modèle du projet (voir la figure suivante).

Modèle de projet pour créer une application Windows Phone
Modèle de projet pour créer une application Windows Phone

Nous allons choisir de créer une Application Windows Phone, qui est la version la plus basique du projet permettant de réaliser une 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 c’est le langage que nous maîtrisons. J’en profite pour nommer mon projet « HelloWorld »… (ici, personne ne se doute quel type d’application nous allons faire très bientôt ;) ).

Enfin, après avoir validé la création du projet, il nous demande la version à cibler (voir la figure suivante).

Choix de la version du SDK à utiliser
Choix de la version du SDK à utiliser

Choisissez « 8.0 » pour développer pour Windows Phone 8 ou 7.1 pour développer pour Windows Phone 7.5. Rappelez-vous qu’une application 7.5 sera exécutable sur les téléphones équipés de Windows Phone 8 (c’est l’avantage) mais ne pourra pas utiliser les nouveautés de Windows Phone 8 (c’est l’inconvénient).

Visual Studio génère son projet, les fichiers qui le composent et s’ouvre sur la page suivante (voir la figure suivante).

L'interface de Visual Studio, ainsi que la liste déroulante permettant de choisir l'émulateur
L'interface de Visual Studio, ainsi que la liste déroulante permettant de choisir l'émulateur

Nous allons revenir sur cet écran très bientôt. Ce qu’il est important de remarquer c’est que si nous démarrons l’application telle quelle, elle va se compiler et s’exécuter dans l’émulateur Windows Phone. Vous le voyez dans le petit encadré en haut de Visual Studio, c’est la cible du déploiement. Il est possible de déployer soit sur l’émulateur, soit directement sur un téléphone relié au poste de travail. Il ne reste plus qu’à réellement exécuter notre application…


Prérequis L’émulateur

L’émulateur

Installer Visual Studio Express pour Windows Phone XAML et code behind

Attention, si vous avez installé le SDK 8.0, vous allez avoir besoin également d’installer le logiciel gestion de la virtualisation : Hyper-v. Celui-ci n’est disponible qu’avec les versions PRO ou Entreprise de Windows 8 et uniquement si votre processeur supporte la technologie SLAT.

Allez dans le panneau de configuration, programmes, et choisissez d’activer des fonctionnalités Windows (voir la figure suivante).

Panneau de configuration pour permettre l'installation d'Hyper-V
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
Cocher pour installer Hyper-V

Exécutons donc notre application en appuyant sur F5 qui nous permet de démarrer l’application en utilisant le débogueur.

Démarrage de l'émulateur avec élévation de privilège
Démarrage de l'émulateur avec élévation de privilège

Nous constatons que l’émulateur se lance, il ressemble à un téléphone Windows Phone… On les reconnait d’un coup d’œil car ils ont les trois boutons en bas du téléphone, la flèche (ou retour arrière), le bouton d’accès au menu et la loupe pour faire des recherches (voir la figure suivante).

Emulateur Windows Phone 8
Emulateur Windows Phone 8

L’émulateur possède également des boutons en haut à droite qui permettent (de haut en bas) de :

Boutons permettant de faire des actions sur l'émulateur
Boutons permettant de faire des actions sur l'émulateur

Remarquons également que des chiffres s’affichent sur le côté droit de l’émulateur. Ce sont des informations sur les performances de l’application, nous y reviendrons en fin de tutoriel.

Enfin, vous pouvez fermer l’application en arrêtant le débogueur en cliquant sur le carré (voir la figure suivante).

Bouton pour arrêter le débogage dans Visual Studio
Bouton pour arrêter le débogage dans Visual Studio

Installer Visual Studio Express pour Windows Phone XAML et code behind

XAML et code behind

L’émulateur Blend pour le design

Revenons un peu sur cette page que nous a affiché Visual Studio. Nous pouvons voir que le milieu ressemble à l’émulateur et que le côté droit ressemble à un fichier XML.

Vous ne connaissez pas les fichiers XML ? Si vous voulez en savoir plus, n’hésitez pas à faire un petit tour sur internet, c’est un format très utilisé dans l’informatique !

Pour faire court, le fichier XML est un langage de balise, un peu comme le HTML, où l’on décrit de l’information. Les balises sont des valeurs entourées de < et > qui décrivent la sémantique de la donnée. Par exemple :

<prenom>Nicolas</prenom>

La balise <prenom> est ce qu’on appelle une balise ouvrante, cela signifie que ce qui se trouve après (en l’occurrence la chaine « Nicolas ») fait partie de cette balise jusqu’à ce que l’on rencontre la balise fermante </prenom> qui est comme la balise ouvrante à l’exception du / précédant le nom de la balise.

Le XML est un fichier facile à lire par nous autres humains. On en déduit assez facilement que le fichier contient la chaine « Nicolas » et qu’il s’agit sémantiquement d’un prénom.

Une balise peut contenir des attributs permettant de donner des informations sur la donnée. Les attributs sont entourés de guillemets " et " et font partis de la balise. Par exemple :

<client nom="Nicolas" age="30"></client>

Ici, la balise client possède un attribut « nom » ayant la valeur « Nicolas » et un attribut « age » ayant la valeur « 30 ». Encore une fois, c’est très facile à lire pour un humain.

Il est possible que la balise n’ait pas de valeur, comme c’est le cas dans l’exemple ci-dessus. On peut dans ce cas-là remplacer la balise ouvrante et la balise fermante par cet équivalent :

<client nom="Nicolas" age="30"/>

Enfin, et nous allons terminer notre aperçu rapide du XML avec un dernier point. Il est important de noter que le XML peut imbriquer ses balises et qu’il ne peut posséder qu’un seul élément racine, ce qui nous permet d’avoir une hiérarchie de données. Par exemple nous pourrons avoir :

<listesDesClient>
  <client type="Particulier">
    <nom>Nicolas</nom>
    <age>30</age>
  </client>
  <client type="Professionel">
    <nom>Jérémie</nom>
    <age>40</age>
  </client>
</listesDesClient>

On voit tout de suite que le fichier décrit une liste de deux clients. Nous en avons un qui est un particulier, qui s’appelle Nicolas et qui a 30 ans alors que l’autre est un professionnel, prénommé Jérémie et qui a 40 ans.

À quoi cela nous sert-il ? À comprendre ce fameux fichier de droite. C’est le fichier XAML (prononcez « Zammel »). Le XAML est un langage qui permet de décrire des interfaces et en l’occurrence ici le code XAML (à droite dans Visual Studio) décrit l’interface que nous retrouvons au milieu. Cette zone est la prévisualisation du rendu du code écrit dans la partie droite. On appelle la zone du milieu, le concepteur (ou plus souvent le designer en anglais).

En fait, le fichier XAML contient des balises qui décrivent ce qui doit s’afficher sur l’écran du téléphone. Nous allons y revenir.

Nous allons donc devoir apprendre un nouveau langage pour pouvoir créer des applications sur Windows Phone : le XAML. Ne vous inquiétez 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 n’est pas trop compliqué, mais le C# dans tout ça ?

Eh bien il arrive dans le fichier du même nom que le fichier XAML et il est suffixé par .cs. Nous le retrouvons si nous cliquons sur le petit triangle à côté du fichier XAML qui permet de déplier les fichiers (voir la figure suivante).

Le XAML et son code-behind
Le XAML et son code-behind

Il est juste en dessous, on l’appelle le code behind. Le code behind est le code C# qui est associé à l’écran qui va s’afficher à partir du code XAML. Il permet de gérer toute la logique associée au XAML.

Si vous ouvrez ce fichier C#, vous pouvez voir quelques instructions déjà créées en même temps que le XAML. Nous allons également y revenir.


L’émulateur Blend pour le design

Blend pour le design

XAML et code behind Notre première application

Afin de faciliter la réalisation de jolis écrans à destination du téléphone, nous pouvons modifier le XAML. C'est un point que nous verrons plus en détail un peu plus loin. Il est possible de le modifier directement à la main lorsqu’on connait la syntaxe, mais nous avons aussi à notre disposition un outil dédié au design qui le fait tout seul : Blend.

Microsoft Expression Blend est un outil professionnel de conception d'interfaces utilisateur de Microsoft. Une version gratuite pour Windows Phone a été installée en même temps que Visual Studio Express 2012 pour Windows Phone et permet de travailler sur le design de nos écrans XAML.

Nous verrons comment il fonctionne mais nous ne nous attarderons pas trop sur son fonctionnement car il mériterait un tutoriel entier.

Ce qui est intéressant c’est qu’il est possible de travailler en même temps sur le même projet dans Visual Studio et dans Blend, les modifications se répercutant de l’un à l’autre. Faisons un clic droit sur le fichier XAML et choisissons de l’ouvrir dans Expression Blend (voir la figure suivante).

Démarrage de Blend depuis Visual Studio
Démarrage de Blend depuis Visual Studio

Blend s’ouvre alors et affiche à nouveau le rendu de notre écran (voir la figure suivante).

Interface de Blend
Interface de Blend

On peut voir également une grosse boîte à outils qui va nous permettre de styler notre application. Nous y reviendrons.


XAML et code behind Notre première application

Notre première application

Blend pour le design Hello World

Nous avons désormais tous les outils qu’il faut pour commencer à apprendre à réaliser des applications pour Windows Phone.

Nous avons pu voir que ces outils fonctionnent et nous avons pu constater un début de résultat grâce à l’émulateur. Mais pour bien comprendre et assimiler toutes les notions, nous avons besoin de plus de concret, de manipuler des éléments et de voir qu’est-ce qui exactement agit sur quoi. Aussi, il est temps de voir comment réaliser une première application avec le classique « Hello World » ! ;)

Cette première application va nous servir de base pour commencer à découvrir ce qu’il faut pour réaliser des applications pour Windows Phone.

Hello World

Notre première application L’interface en XAML

Revenons donc sur notre écran où nous avons le designer et le XAML. Positionnons-nous sur le code XAML et ajoutons des éléments sans trop comprendre ce que nous allons faire afin de réaliser notre « Hello World ». Nous reviendrons ensuite sur ce que nous avons fait pour expliquer le tout en détail.

Pour commencer, on va modifier la ligne suivante :

<TextBlock Text="nom de la page" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

et écrire ceci :

<TextBlock Text="Hello World" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

Nous changeons donc la valeur de l’attribut Text de la balise <TextBlock>.

Ensuite, juste après :

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

Donc, à l’intérieur de cette balise <Grid>, rajoutez :

<StackPanel>
    <TextBlock Text="Saisir votre nom" HorizontalAlignment="Center" />
    <TextBox x:Name="Nom"  />
    <Button Content="Valider" Tap="Button_Tap_1" />
    <TextBlock x:Name="Resultat" Foreground="Red" />
</StackPanel>

Remarquez que lorsque vous avez saisi la ligne :

<Button Content="Valider" Tap="Button_Tap_1" />

au moment de taper : Tap="", Visual Studio Express vous a proposé de générer un nouveau gestionnaire d’événement (voir la figure suivante).

Génération du gestionnaire d'événement depuis le XAML
Génération du gestionnaire d'événement depuis le XAML

Vous pouvez le générer en appuyant sur Entrée, cela nous fera gagner du temps plus tard. Sinon, ce n’est pas grave.

Vous pouvez constater que le designer s’est mis à jour pour faire apparaître nos modifications (voir la figure suivante).

Le rendu du XAML dans la fenêtre du concepteur
Le rendu du XAML dans la fenêtre du concepteur

Ouvrez maintenant le fichier de code behind et modifiez la méthode Button_Tap_1 pour avoir :

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

Nous pouvons dès à présent démarrer notre application en appuyant sur F5. L’émulateur se lance et nous voyons apparaître les nouvelles informations sur l’écran (voir la figure suivante).

Rendu de l'application dans l'émulateur
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 et nous voyons apparaître un clavier virtuel à l’intérieur de notre application (voir la figure suivante).

Le clavier virtuel dans l'émulateur
Le clavier virtuel dans l'émulateur

Ce clavier virtuel s’appelle le SIP (pour Soft Input Panel) et apparait automatiquement quand on en a besoin, notamment dans les zones de saisie, nous y reviendrons. Saisissons une valeur dans la zone de texte et cliquons sur le bouton Valider.

Nous voyons apparaître le résultat en rouge avec un magnifique message construit (voir la figure suivante).

Affichage de l'Hello World dans l'émulateur
Affichage de l'Hello World dans l'émulateur

Et voilà, notre Hello World est terminé ! Chouette non ? :D

Pour quitter l’application, le plus simple est d’arrêter le débogueur de Visual Studio en cliquant sur le carré Stop.


Notre première application L’interface en XAML

L’interface en XAML

Hello World Le code-behind en C#

Alors, 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 à décrire le contenu de ce que nous allons voir à l’écran. En fait, un fichier XAML correspond à une page. Une application peut être découpée en plusieurs pages, nous y reviendrons plus tard. Ce que nous avons vu sur l’émulateur est l’affichage de la page MainPage.

Donc, nous avons utilisé le XAML pour décrire le contenu de la page. Il est globalement assez explicite mais ce qu’il faut comprendre c’est que nous avons ajouté des contrôles du framework .NET dans la page. Un contrôle est une classe C# complète qui sait s’afficher, se positionner, traiter des événements de l’utilisateur (comme le clic sur le bouton), etc. Ces contrôles ont des propriétés et peuvent être ajoutés dans le XAML.

Par exemple, prenons la ligne suivante :

<TextBlock Text="Saisir votre nom" HorizontalAlignment="Center" />

Nous demandons d’ajouter dans la page le contrôle TextBlock. Le contrôle TextBlock correspond à une zone de texte non modifiable. Nous positionnons sa propriété Text à la chaine de caractères "Saisir votre nom". Ce contrôle sera aligné au centre grâce à la propriété HorizontalAlignment positionnée à Center. En fait, j’ai dit que nous l’ajoutons dans la page, mais pour être plus précis, nous l’ajoutons dans le contrôle StackPanel qui est lui-même contenu dans le contrôle Grid, qui est contenu dans la page. Nous verrons plus loin ce que sont ces contrôles.

Derrière, automatiquement, cette ligne de XAML entraîne la déclaration et l’instanciation d’un objet de type TextBlock avec les affectations de propriétés adéquates. Puis ce contrôle est ajouté dans le contrôle StackPanel. Tout ceci nous est masqué. Grâce au XAML nous avons simplement décrit l’interface de la page et c’est Visual Studio qui s’est occupé de le transformer en C#.

Parfait ! :) Moins on en fait et mieux on se porte… et surtout il y a moins de risque d’erreurs.

Et c’est pareil pour tous les autres contrôles de la page, le TextBlock qui est une zone de texte non modifiable, le TextBox qui est une zone de texte modifiable déclenchant l’affichage du clavier virtuel, le bouton, etc.

Vous l’aurez peut-être deviné, mais c’est pareil pour la page. Elle est déclarée tout en haut du fichier XAML :

<phone:PhoneApplicationPage 
    x:Class="HelloWorld.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

C’est d’ailleurs le conteneur de base du fichier XAML, celui qui contient tous les autres contrôles. La page est en fait représentée par la classe PhoneApplicationPage qui est aussi un objet du framework .NET. Plus précisément, notre page est une classe générée qui dérive de l’objet PhoneApplicationPage. Il s’agit de la class MainPage située dans l’espace de nom HelloWorld, c’est ce que l’on voit dans la propriété :

x:Class="HelloWorld.MainPage"

On peut s’en rendre compte également dans le code behind de la page où Visual Studio a généré une classe partielle du même nom que le fichier XAML et qui dérive de PhoneApplicationPage :

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

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

Pourquoi partielle ? Parce qu’il existe un autre fichier dans votre projet. Ce fichier est caché mais on peut l’afficher en cliquant sur le bouton en haut de l’explorateur de solution (voir la figure suivante).

Affichage des fichiers cachés dans l'explorateur de solutions
Affichage des fichiers cachés dans l'explorateur de solutions

Et nous pouvons voir notamment un répertoire obj contenant un répertoire debug contenant le fichier MainPage.g.i.cs. Si vous l’ouvrez, vous pouvez trouver le code suivant :

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;
        
    /// <summary>
    /// InitializeComponent
    /// </summary>
    [System.Diagnostics.DebuggerNonUserCodeAttribute()]
    public void InitializeComponent() 
    {
        if (_contentLoaded) 
        {
            return;
        }
        _contentLoaded = true;
        System.Windows.Application.LoadComponent(this, new System.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 s’agit d’une classe qui est générée lorsqu’on modifie le fichier XAML. Ne modifiez pas ce fichier car il sera re-généré tout le temps. On peut voir qu’il s’agit d’une classe MainPage, du même nom que la propriété x:Class de tout à l’heure, qui s’occupe de charger le fichier XAML et qui crée des variables à partir des contrôles qu’il trouvera dedans.

Nous voyons notamment qu’il a créé les deux variables suivantes :

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

Le nom de ces variables correspond aux propriétés x:Name des deux contrôles que nous avons créé :

<TextBox x:Name="Nom"  />
<TextBlock x:Name="Resultat" Foreground="Red" />

Ces variables sont initialisées après qu’il ait chargé tout le XAML en faisant une recherche à partir du nom du contrôle. Cela veut dire que nous disposons d’une variable qui permet d’accéder au contrôle de la page, par exemple la variable Nom du type TextBox. Je vais y revenir.

Nous avons donc :

Remarquez qu’il existe également le fichier MainPage.g.cs qui correspond au fichier généré après la compilation. Nous ne nous occuperons plus de ces fichiers générés, ils ne servent plus à rien. Nous les avons regardés pour comprendre comment cela fonctionne.


Hello World Le code-behind en C#

Le code-behind en C#

L’interface en XAML Le contrôle Grid

Revenons sur le code behind, donc sur le fichier MainPage.xaml.cs, nous avons :

public partial class MainPage : PhoneApplicationPage
{
    // 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 hérite des fonctionnalités de la classe PhoneApplicationPage. Regardez à l’intérieur de la méthode Button_Tap_1, nous utilisons les fameuses variables que nous n’avons pas déclaré nous-même mais qui ont été générées… Ce sont ces variables qui nous permettent de manipuler nos contrôles et en l’occurrence ici, qui nous permettent de modifier la valeur de la zone de texte non modifiable en concaténant la chaine « Bonjour » à la valeur de la zone de texte modifiable, accessible via sa propriété Text.

Vous aurez compris ici que ce sont les propriétés Text des TextBlock et TextBox qui nous permettent d’accéder au contenu qui est affiché sur la page. Il existe plein d’autres propriétés pour ces contrôles comme la propriété Foreground qui permet de modifier la couleur du contrôle, sauf qu’ici nous l’avions positionné grâce au XAML :

<TextBlock x:Name="Resultat" Foreground="Red" />

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

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 même que d’une manière générale, on aura tendance à essayer de mettre le plus de chose possible dans le XAML plutôt que dans le code behind. La propriété Foreground ici a tout intérêt à être déclarée dans le XAML.


L’interface en XAML Le contrôle Grid

Le contrôle Grid

Le code-behind en C# Le contrôle StackPanel

Je vais y revenir plus loin un peu plus loin, mais pour que vous ne soyez pas complètement perdu dans notre Hello World, il faut savoir que la Grid est un conteneur.

Après cet effort de traduction intense, nous pouvons dire que la grille sert à contenir et à agencer d’autres contrôles. Dans notre cas, le code suivant :

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
        <TextBlock Text="MON APPLICATION" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
        <TextBlock Text="Hello World" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>

    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <StackPanel>
            <TextBlock Text="Saisir votre nom" HorizontalAlignment="Center" />
            <TextBox x:Name="Nom"  />
            <Button Content="Valider" Tap="Button_Tap_1" />
            <TextBlock x:Name="Resultat" Foreground="Red" />
        </StackPanel>
    </Grid>
</Grid>

Défini une grille qui contient deux lignes. La première contient un contrôle StackPanel, nous allons en parler juste après. La seconde ligne contient une nouvelle grille sans ligne ni colonne, qui est également composée d’un StackPanel.

Nous aurons l’occasion d’en parler plus longuement plus tard donc je m’arrête là pour l’instant sur la grille.


Le code-behind en C# Le contrôle StackPanel

Le contrôle StackPanel

Le contrôle Grid Le contrôle TextBox

Ici c’est pareil, le contrôle StackPanel est également un conteneur. Je vais y revenir un peu plus loin également mais il permet ici d’aligner les contrôles les uns en dessous des autres. Par exemple, celui que nous avons rajouté contient un TextBlock, un TextBox, un bouton et un autre TextBlock :

<StackPanel>
    <TextBlock Text="Saisir votre nom" HorizontalAlignment="Center" />
    <TextBox x:Name="Nom"  />
    <Button Content="Valider" Tap="Button_Tap_1" />
    <TextBlock x:Name="Resultat" Foreground="Red" />
</StackPanel>

Nous pouvons voir sur le designer que les contrôles sont bien les uns en dessous des autres.

Nous avons donc au final, la page qui contient une grille, qui contient un StackPanel et une grille qui contiennent chacun des contrôles.


Le contrôle Grid Le contrôle TextBox

Le contrôle TextBox

Le contrôle StackPanel Le contrôle TextBlock

Le contrôle TextBox est une zone de texte modifiable. Nous l’avons utilisée pour saisir le prénom de l’utilisateur. On déclare ce contrôle ainsi :

<TextBox x:Name="Nom" />

Lorsque nous cliquons dans la zone de texte, le clavier virtuel apparait et nous offre la possibilité de saisir une valeur. Nous verrons un peu plus loin qu’il est possible de changer le type du clavier virtuel.

La valeur saisie est récupérée via la propriété Text du contrôle, par exemple ici je récupère la valeur saisie que je concatène à la chaine Bonjour et que je stocke dans la variable resultat :

string resultat = "Bonjour " + Nom.Text;

Inversement, je peux pré-remplir la zone de texte avec une valeur en utilisant la propriété Text, par exemple depuis le XAML :

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <StackPanel>
        <TextBox x:Name="Nom" Text="Nicolas" />
    </StackPanel>
</Grid>

Ce qui donne ceci (voir la figure suivante).

La valeur du TextBox s'affiche dans la fenêtre de rendu
La valeur du TextBox s'affiche dans la fenêtre de rendu

La même chose est faisable en code behind, il suffit d’initialiser la propriété de la variable dans le constructeur de la page :

public partial class MainPage : PhoneApplicationPage
{
    public MainPage()
    {
        InitializeComponent();
        Nom.Text = "Nicolas";
    }
}

Évidemment, il sera toujours possible de modifier la valeur pré-remplie grâce au clavier virtuel.


Le contrôle StackPanel Le contrôle TextBlock

Le contrôle TextBlock

Le contrôle TextBox Les événements

Le contrôle TextBlock représente une zone de texte non modifiable. Nous l’avons utilisé pour afficher le résultat de notre Hello World. Il suffit d’utiliser sa propriété Text pour afficher un texte. Par exemple, le XAML suivant :

<TextBlock Text="Je suis un texte non modifiable de couleur rouge" Foreground="Red" FontSize="25" />

affiche ceci dans la fenêtre de prévisualisation (voir la figure suivante).

Le texte s'affiche en rouge dans le TextBlock
Le texte s'affiche en rouge dans le TextBlock

Je peux modifier la couleur du texte grâce à la propriété Foreground. C’est la même chose pour la taille du texte, modifiable via la propriété FontSize. Nous pouvons remarquer que le texte que j’ai saisi dépasse de l’écran et que nous ne le voyons pas en entier. Pour corriger ça, j’utilise la propriété TextWrapping que je positionne à Wrap :

<TextBlock Text="Je suis un texte non modifiable de couleur rouge" Foreground="Red" FontSize="25" TextWrapping="Wrap" />

Comme nous l’avons déjà fait, il est possible de modifier la valeur d’un TextBlock en passant par le code-behind :

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

Le contrôle TextBox Les événements

Les événements

Le contrôle TextBlock Le bouton

Il s’agit des événements sur les contrôles. Chaque contrôle est capable de lever une série d’événements lorsque cela est opportun. C’est le cas par exemple du contrôle bouton qui est capable de lever un événement lorsque nous tapotons dessus (ou que nous cliquons avec la souris). Nous l’avons vu dans l’exemple du Hello World, il suffit de déclarer une méthode que l’on associe à l’événement, par exemple :

<Button Content="Valider" Tap="Button_Tap_1" />

qui permet de faire en sorte que la méthode Button_Tap_1 soit appelée lors du clic sur le bouton. Rappelez-vous, dans notre Hello World, nous avions la méthode suivante :

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

Il est également possible de s’abonner à un événement via le code behind, il suffit d’avoir une variable de type bouton, pour cela donnons un nom à un bouton :

<Button x:Name="UnBouton" Content="Cliquez-moi" />

Et d’associer une méthode à l’événement de clic :

public partial class MainPage : PhoneApplicationPage
{
    public MainPage()
    {
        InitializeComponent();

        UnBouton.Tap += UnBouton_Tap;
    }

    void UnBouton_Tap(object sender, System.Windows.Input.GestureEventArgs e)
    {
        throw new NotImplementedException();
    }
}

Il existe beaucoup d’événements de ce genre, par exemple la case à cocher (CheckBox) permet de s’abonner à l’événement qui est déclenché lorsqu’on coche la case :

<CheckBox Content="Cochez-moi" Checked="CheckBox_Checked_1" />

Avec la méthode :

private void CheckBox_Checked_1(object sender, RoutedEventArgs e)
{

}

Il existe énormément d’événement sur les contrôles, mais aussi sur la page, citons encore par exemple l’événement qui permet d’être notifié lors de la fin du chargement de la page :

public MainPage()
{
    InitializeComponent();
    Loaded += MainPage_Loaded;
}

private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    throw new NotImplementedException();
}

Nous aurons l’occasion de voir beaucoup d’autres événements tout au long de ce cours.

Remarquez que les événements sont toujours construits de la même façon. Le premier paramètre est du type object et représente le contrôle qui a déclenché l’événement. En l’occurrence, dans l’exemple suivant :

<Button Content="Valider" Tap="Button_Tap_1" />

Nous pouvons accéder au contrôle de cette façon :

private void Button_Tap_1(object sender, System.Windows.Input.GestureEventArgs e)
{
    Button bouton = (Button)sender;
    bouton.Content = "C'est validé !";
}

Le second paramètre est, quant à lui, spécifique au type d’événement et peut fournir des informations complémentaires.


Le contrôle TextBlock Le bouton

Le bouton

Les événements Et Silverlight dans tout ça ?

Revenons à présent rapidement sur le bouton, nous l’avons vu il n’est pas très compliqué à utiliser. On utilise la propriété Content pour mettre du texte et il est capable de lever un événement lorsqu’on clique dessus, grâce à l’événement Tap. Le bouton possède également un événement Click qui fait la même chose et qui existe encore pour des raisons de compatibilité avec Silverlight.

Il est également possible de passer des paramètres à un bouton. Pour un bouton tout seul, ce n’est pas toujours utile, mais dans certaines situations cela peut être primordial.

Dans l’exemple qui suit, j’utilise deux boutons qui ont la même méthode pour traiter l’événement de clic sur le bouton :

<StackPanel>
    <Button Content="Afficher" Tap="Button_Tap" CommandParameter="Nicolas" />
    <Button Content="Afficher" Tap="Button_Tap" CommandParameter="Jérémie" />
    <TextBlock x:Name="Resultat" Foreground="Red" />
</StackPanel>

C’est la propriété CommandParameter qui me permet de passer un paramètre. Je pourrais ensuite l’utiliser dans mon code behind :

private void Button_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
    Button bouton = (Button)sender;
    bouton.IsEnabled = false;
    Resultat.Text = "Bonjour " + bouton.CommandParameter;
}

J’utilise ainsi le paramètre CommandParameter pour récupérer le prénom de la personne à qui dire bonjour (voir la figure suivante).

Passage d'un paramètre au bouton s'affichant dans l'émulateur
Passage d'un paramètre au bouton s'affichant dans l'émulateur

Remarquez au passage l’utilisation de la propriété IsEnabled qui permet d’indiquer si un contrôle est activé ou pas. Si un bouton est désactivé, il ne pourra pas être cliqué.


Les événements Et Silverlight dans tout ça ?

Et Silverlight dans tout ça ?

Le bouton Les contrôles

Vous avez remarqué que j’ai parlé de Silverlight et de XAML. Quelle différence ?

Pour bien comprendre, Silverlight était utilisé pour développer avec les versions 7 de Windows Phone. On utilise par contre le XAML/C# pour développer pour la version 8. En fait, grosso modo c’est la même chose :p .

XAML est l’évolution de Silverlight. Si vous avez des connaissances en Silverlight, vous vous êtes bien rendu compte que ce qu’on appelle aujourd’hui XAML/C#, c’est pareil.

Il s’agit juste d’un changement de vocabulaire afin d’unifier les développements utilisant du code XAML pour définir l’interface d’une application, qu’elle soit Windows Phone ou Windows …

Ce qui est valable avec Silverlight l'est aussi avec XAML/C#, et inversement proportionnel. :-°


Le bouton Les contrôles

Les contrôles

Et Silverlight dans tout ça ? Généralités sur les contrôles

Jusqu’à présent nous avons vu peu de contrôles, la zone de texte non modifiable, la zone de saisie modifiable, le bouton… Il existe beaucoup de contrôles disponibles dans les bibliothèques de contrôles XAML pour Windows Phone. Ceux-ci sont facilement visibles grâce à la boite à outils que l’on retrouve à gauche de l’écran.

Voyons un peu ce qu’il y a autour de ces fameux contrôles

Généralités sur les contrôles

Les contrôles Utiliser le designer pour ajouter un CheckBox

Il y a plusieurs types de contrôles, ceux-ci dérivent tous d’une classe de base abstraite qui s’appelle UIElement qui sert à gérer tout ce qui doit pouvoir s’afficher et qui est capable de réagir à une interaction simple de l’utilisateur. Mais la classe UIElement ne fait pas grand-chose sans la classe abstraite dérivée FrameworkElement qui fournit tous les composants de base pour les objets qui doivent s’afficher sur une page. C’est cette classe également qui gère toute la liaison de données que nous découvrirons un peu plus tard.

C’est donc de cette classe que dérivent deux grandes familles de contrôles : les contrôles à proprement parler et les panneaux.

Les panneaux dérivent de la classe abstraite de base Panel et servent comme conteneurs permettant de gérer le placement des contrôles. Nous allons y revenir dans un prochain chapitre.

Les contrôles dérivent de la classe abstraite Control. Elle sert de classe de base pour tous les éléments qui utilisent un modèle pour définir leur apparence. Nous y reviendrons plus tard, mais une des grandes forces du XAML est d’offrir la possibilité de changer l’apparence d’un contrôle, tout en conservant ses fonctionnalités. Les contrôles qui héritent de la classe Control peuvent se répartir en trois grandes catégories.

Pour schématiser, nous pouvons observer ce schéma (incomplet) à la figure suivante.

Hiérarchie de classe pour les contrôles
Hiérarchie de classe pour les contrôles

Une dernière remarque avant de terminer, sur l’utilisation des propriétés. Nous avons vu l’écriture suivante pour par exemple modifier la valeur de la propriété Text du contrôle TextBlock :

<TextBlock Text="Hello world" />

Il est également possible d’écrire la propriété Text de cette façon :

<TextBlock>
    <TextBlock.Text>
        Hello world
    </TextBlock.Text>
</TextBlock>

Cette écriture nous sera très utile lorsque nous aurons besoin de mettre des choses plus complexes que des chaines de caractères dans nos propriétés. Nous y reviendrons.

Enfin, une propriété possède généralement une valeur par défaut. C’est pour cela que notre TextBox sait s’afficher même si on ne lui précise que sa propriété Text, elle possède une couleur d’écriture par défaut, une taille d’écriture par défaut, etc.


Les contrôles Utiliser le designer pour ajouter un CheckBox

Utiliser le designer pour ajouter un CheckBox

Généralités sur les contrôles Utiliser Expression Blend pour ajouter un ToggleButton

Revenons à notre boite à outils remplie de contrôle. Elle se trouve à gauche de l'écran, ainsi que vous pouvez le voir sur la figure suivante.

La boîte à outils des contrôles dans Visual Studio
La boîte à outils des contrôles dans Visual Studio

Grâce au designer, vous pouvez faire glisser un contrôle de la boîte à outils dans le rendu de la page. Celui-ci se positionnera automatiquement.

Prenons par exemple le contrôle de case à cocher que nous avons entre-aperçu un peu plus tôt : CheckBox. Sélectionnez-le et faites le glisser sur le rendu de la page (voir la figure suivante).

Ajout d'un contrôle CheckBox à partir du designer
Ajout d'un contrôle CheckBox à partir du designer

Le designer m’a automatiquement généré le code XAML correspondant :

<CheckBox Content="CheckBox" HorizontalAlignment="Left" Margin="168,167,0,0" VerticalAlignment="Top"/>

Vous aurez sûrement des valeurs légèrement différentes, notamment au niveau de la propriété Margin. C’est d’ailleurs en utilisant ces valeurs que le designer a pu me positionner le contrôle dans la grille.

Remarquons que si j’avais fait glisser un Canvas et ensuite la case à cocher dans ce Canvas, j’aurais plutôt eu du code comme le suivant :

<Canvas HorizontalAlignment="Left" Height="100" Margin="102,125,0,0" VerticalAlignment="Top" Width="100">
    <CheckBox Content="CheckBox" Canvas.Left="56" Canvas.Top="40"/>
</Canvas>

Ici, il a utilisé la propriété Canvas.Top et Canvas.Left pour positionner la case à cocher. Nous allons revenir sur ce positionnement un peu plus loin.

Il est possible de modifier les propriétés de la case à cocher, par exemple son contenu, en allant dans la fenêtre de Propriétés (voir la figure suivante).

Modification des propriétés d'un contrôle à partir de la fenêtre des propriétés
Modification des propriétés d'un contrôle à partir de la fenêtre des propriétés

Ici, je change la valeur de la propriété Content. Je peux observer les modifications sur le rendu et dans le XAML.

Remarquons que le designer est un outil utile pour créer son rendu, par contre il ne remplace pas une bonne connaissance du XAML afin de gérer correctement le positionnement.


Généralités sur les contrôles Utiliser Expression Blend pour ajouter un ToggleButton

Utiliser Expression Blend pour ajouter un ToggleButton

Utiliser le designer pour ajouter un CheckBox Le clavier virtuel

J’aurais aussi pu faire la même chose dans Expression Blend qui est l’outil de design professionnel. J’ai également accès à la boîte à outils (voir la figure suivante).

Barre d'outils des contrôles dans Blend
Barre d'outils des contrôles dans Blend

Et de la même façon, je peux faire glisser un contrôle, disons le ToggleButton, sur ma page. J’ai également accès à ses propriétés afin de les modifier. Ici, par exemple, je modifie la couleur du ToggleButton (voir la figure suivante).

Modification des couleurs du ToggleButton dans Blend
Modification des couleurs du ToggleButton dans Blend

Une fois revenu dans Visual Studio, je peux voir les modifications apportées depuis Blend, avec par exemple dans mon cas :

<ToggleButton Content="ToggleButton" HorizontalAlignment="Left" Margin="111,169,0,0" VerticalAlignment="Top" Background="#FFF71616" BorderBrush="#FF2DC50C"/>

Nous reviendrons sur Blend tout au long de ce cours.


Utiliser le designer pour ajouter un CheckBox Le clavier virtuel

Le clavier virtuel

Utiliser Expression Blend pour ajouter un ToggleButton Afficher le clavier virtuel

Le clavier virtuel est ce petit clavier qui apparaît lorsque l’on clique dans une zone de texte modifiable, que nous avons pu voir dans notre Hello World.

En anglais il se nomme le SIP, pour Soft Input Panel, que l’on traduit par clavier virtuel.

Nous allons voir comment nous en servir.

Afficher le clavier virtuel

Le clavier virtuel Intercepter les touches du clavier virtuel

Vous vous rappelez de notre Hello World ? Lorsque nous avons cliqué dans le TextBox, nous avons vu apparaître ce fameux clavier virtuel (voir la figure suivante).

Affichage du clavier virtuel
Affichage du clavier virtuel

Il n’y a qu’une seule solution pour afficher le clavier virtuel. Il faut que l’utilisateur clique dans une zone de texte modifiable. Et à ce moment-là, le clavier virtuel apparait en bas de l’écran. Techniquement, il s’affiche quand le contrôle TextBox prend le focus (lorsque l’on clique dans le contrôle) et il disparait lorsque celui-ci perd le focus (lorsqu’on clique en dehors du contrôle).

Il n’est pas possible de déclencher son affichage par programmation, ni son masquage, à part en manipulant le focus.

Pour afficher un TextBox, on utilisera le XAML suivant :

<TextBox x:Name="MonTextBox" />