Tutoriel : introduction au développement d'applications Windows Phone 7

Windows Phone 7 (WP7) est la nouvelle plateforme de développement de Microsoft destinée aux smartphones.

Dans ce premier tutoriel, vous découvrirez comment démarrer le développement d'applications avec Windows Phone 7.
Nous commencerons par installer les outils nécessaires au développement sur WP7, puis nous créerons un premier programme simpliste en utilisant Silverlight pour WP7.
Enfin, nous l'exécuterons sur l'émulateur et découvrirons son fonctionnement.

WP7 supporte deux langages pour développer des applications :

• C# ;
• VB.NET.

WP7 supporte également deux plateformes de développement :

• Silverlight ;
• XNA.

Silverlight, qui a déjà fait ses preuves pour le développement d'applications client léger, est en général utilisé dans le développement d'applications de gestion. La puissance du XAML, des mécanismes de bindings ainsi que la richesse des contrôles visuels (textbox, button…) en font un langage de premier choix pour le développement d'applications utilitaires.

XNA quant à lui est la plateforme de développement de jeux. On peut aussi bien développer des jeux 2D que 3D. XNA est aussi plus performant que Silverlight quand il s'agit de faire du traitement audio. Bref, il est particulièrement adapté au développement de jeux sur smartphones.

Dans les premiers tutoriels, nous nous concentrerons sur l'utilisation de Silverlight pour WP7, mais dans les prochains tutoriels nous découvrirons également le développement XNA.

Pour le reste de ces articles, je considère que vous avez déjà des notions dans le développement d'applications utilisant le XAML et le C# sinon n'hésitez pas à consulter les tutoriels de la rubrique concernée.

Notez que Silverlight pour WP7 n'est pas tout à fait le Silverlight que vous avez déjà pu rencontrer. C'est un Silverlight adapté aux Windows Phones. Il s'agit d'une autre version de Silverlight, basée à ce jour sur Silverlight 3 et dont les contrôles standards ont été adaptés pour prendre en charge les spécificités des téléphones. Ce qui implique que si un contrôle n'a pas été écrit dans ce sens, alors il ne fonctionnera pas avec WP7. On ne pourra donc pas récupérer la pléthore de contrôles déjà existants.

Une dernière remarque par rapport au matériel. Aujourd'hui nous avons des téléphones qui peuvent supporter les résolutions suivantes :

• - Large : 480 x 800 ;
• - Small : 320 x 480.

Ils fonctionnent aussi bien en mode portrait qu'en mode paysage.

On commence par télécharger les Windows Phone Developer Tools.

À noter qu'il faut disposer d'une version de Windows Vista ou bien de Windows 7, sinon vous aurez l'erreur suivante :

Une fois ces conditions réunies, on peut commencer l'installation :

À noter qu'il faut être connecté à Internet, car le programme télécharge des composants :

On enchaîne ensuite sur l'installation de ces composants :

À la fin de l'installation, on pourra découvrir un nouvel élément dans le menu Démarrer :

Et démarrons notre nouveau Visual Studio for Windows Phone…

Passons maintenant à la création de notre premier projet Windows Phone 7.

Cliquons sur Fichier --> Nouveau Projet et choisissons une « Application Windows Phone » :

Visual Studio génère plein de choses et on observe la fenêtre de design qui contient à droite le XAML généré et à gauche une prévisualisation du XAML « embarqué » dans une image de téléphone.

Avant de regarder ce qui a été généré, on vérifie que tout marche bien. Compilons puis démarrons l'application (F5).

L'émulateur se lance et on peut voir dans le cadre rouge que Visual Studio est en train de se connecter à l'émulateur. L'application n'est pas encore chargée. Il faudra attendre que Visual Studio se mette en debug et que l'on voie marqué en bas à droite « déploiement réussi » pour que l'application soit effectivement chargée :

Jouons un peu avec l'émulateur. Nous avons des icônes à droite de l'émulateur qui apparaissent :

• 1) permet de fermer l'émulateur ;
• 2) permet de réduire l'émulateur ;
• 3) permet de faire pivoter l'émulateur pour passer en mode paysage ;

• 4) comme le 3) mais dans l'autre sens ;
• 5) permet d'ajuster l'émulateur à la taille de l'écran ;
• 6) permet de définir le zoom de l'émulateur.

On peut également constater des boutons en bas de l'émulateur, avec à gauche le bouton « back », au milieu le bouton « start » et un bouton « rechercher ».

Le bouton « back » correspond à la fermeture de l'application. On peut le constater lorsque l'application est en mode débogage ; si l'on clique sur « back » alors le débogueur de Visual Studio s'arrête.
Cependant, l'émulateur est toujours lancé et chargé en mémoire. Visual Studio pourra s'y reconnecter lors du prochain démarrage de l'application (F5). Ceci s'avère bien utile et optimisera les prochains lancements de l'application dans l'émulateur. En effet, il ne sera plus utile à l'émulateur de faire sa phase de synchronisation…

Le bouton de l'émulateur qui servira sans doute le plus est le bouton qui permet de passer d'un mode paysage à un mode portrait et inversement. Nous pourrons ainsi constater comment l'application se comporte dans les deux modes.
En l'occurrence, on peut voir ici que ce n'est pas joli joli… En effet, ce comportement n'est pas géré par l'application générée par défaut.

Repassons sur Visual Studio et regardons ce qui est généré.
En ouvrant le fichier App.xaml.cs, on se rend compte que la classe contient une propriété :

public PhoneApplicationFrame RootFrame { get; private set; }

La propriété RootFrame identifie la page de démarrage de l'application. C'est le container de base pour toutes les applications Windows Phone. Elle est de type PhoneApplicationFrame et permet d'accueillir des pages pour Windows Phone, de type PhoneApplicationPage.

On voit aussi apparaître un code qu'on ne voit pas dans les applications Silverlight usuelles :

// Ne pas ajouter de code supplémentaire à cette méthode
private void InitializePhoneApplication()
{
    if (phoneApplicationInitialized)
        return;

    // Créez le frame, mais ne le définissez pas encore comme RootVisual ; cela permet à l'écran de
    // démarrage de rester actif jusqu'à ce que l'application soit prête pour le rendu.
    RootFrame = new PhoneApplicationFrame();
    RootFrame.Navigated += CompleteInitializePhoneApplication;

    // Gérer les erreurs de navigation
    RootFrame.NavigationFailed += RootFrame_NavigationFailed;

    // Garantir de ne pas retenter l'initialisation
    phoneApplicationInitialized = true;
}

// Ne pas ajouter de code supplémentaire à cette méthode
private void CompleteInitializePhoneApplication(object sender, NavigationEventArgs e)
{
    // Définir le Visual racine pour permettre à l'application d'effectuer le rendu
    if (RootVisual != RootFrame)
        RootVisual = RootFrame;

    // Supprimer ce gestionnaire, puisqu'il est devenu inutile
    RootFrame.Navigated -= CompleteInitializePhoneApplication;
}

Il s'agit de tout ce qui est initialisation propre au téléphone.

Allons voir le fichier MainPage.xaml.cs, nous pouvons voir que la page hérite de PhoneApplicationPage :

public partial class MainPage : PhoneApplicationPage
{
}

Quand on ouvre le fichier MainPage.xaml, un point important à remarquer est que ça ressemble beaucoup à une application Silverlight classique. On voit une Grid, un TextBlock, etc.
Modifions-les un peu pour afficher quelque chose d'un peu plus sympa que « mon application » ou « nom de la page » en changeant les deux textblocks :

<TextBlock x:Name="ApplicationTitle" Text="Test de Windows Phone 7" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="Hello World !" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

En haut du fichier, nous remarquons aussi la déclaration suivante :

SupportedOrientations="Portrait" Orientation="Portrait"

qui signifie, comme on peut le deviner, que l'application démarre en mode portrait et ne supporte que celui-ci.
Un petit coup d'intellisense et on remarque que les modes supportés sont :

• Portrait ;
• Landscape ;
• PortraitOrLandscape.

Si je passe en mode paysage (Landscape), j'aurai bien sûr l'affichage suivant :

Réglons enfin sur :

SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"

et rajoutons un textblock :

<TextBlock x:Name="OrientationTextBlock" FontSize="25"/>

Il est possible de détecter un changement d'orientation en surchargeant la méthode OnOrientationChanged :

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

    protected override void OnOrientationChanged(OrientationChangedEventArgs e)
    {
        OrientationTextBlock.Text = "On passe en mode " + e.Orientation ;
        base.OnOrientationChanged(e);
    }
}

À chaque changement d'orientation, on pourra voir un message signalant la réception de l'événement et la réorientation des contrôles :

Bien sûr, c'est l'endroit idéal pour recalculer les dimensions si l'on souhaite que son application ait un look qui va bien dans le mode choisi…

On peut voir enfin dans la solution, des images comme ApplicationIcon.png. Si vous les ouvrez, vous pourrez notamment constater que ce sont ces images qu'il faut changer si l'on souhaite changer, par exemple, l'image de l'application :

Notez que lors de la création du projet vous avez pu voir différents templates pour créer une application pour WP7. J'ai choisi le plus basique : Application Windows Phone, car c'est le plus simple et que je trouve qu'il est plus intéressant pour apprendre et rajouter des briques petit à petit à son application en comprenant vraiment ce que l'on fait.

Vous pouvez voir ci-dessous la liste complète des templates proposés :

Le template Application liée aux données Windows Phone génère un projet exemple qui contient une ListBox bindée à des données. On voit également comment naviguer entre des pages de l'application lors d'un clic sur un élément de la ListBox.

Le template Bibliothèque de classes Windows Phone est un projet que l'on utilisera pour rajouter des composants à son application (nouvelle bibliothèque de contrôles, nouveaux modules, classes, etc.).

Le template Application Panorama présente un des contrôles importants dans les applications WP7 qui permet de faciliter la consultation de l'affichage d'un écran trop grand. Il permet de scinder l'écran et propose une navigation comme si l'on tournait les pages d'un livre. Un glissement horizontal sur l'écran (swipe) permet de passer à l'élément suivant. Lorsque l'on atteint le dernier élément, on repasse automatiquement au premier.

Le template Application Pivot Windows Phone présente l'autre contrôle important dans le développement d'applications WP7. Il permet grosso modo la même chose que le contrôle Panorama. La différence est qu'on utilisera plutôt le contrôle Pivot lorsqu'on veut présenter plusieurs pages de la même donnée.
Le contrôle Panorama sera plutôt utilisé lorsqu'on veut présenter une navigation entre plusieurs pages.

Le template Windows Phone Game permet de développer un jeu avec XNA. Ici le paradigme est différent d'une application Silverlight et les références se font au framework XNA. Le projet généré ne fait qu'afficher simplement un fond bleu, mais présente la structure basique d'un jeu utilisant XNA.

Le template Bibliothèque Windows Phone Game permet de rajouter des composants à son application XNA. Notez que nous reviendrons sur la programmation XNA dans un tutoriel ultérieur.

Les autres templates sont des templates XNA pour des développements autres que téléphone (XBox, etc.).

N'hésitez pas à fouiller dans les projets générés par les autres templates, ils ont des vertus didactiques et sont toujours intéressants à comprendre.

Vous pouvez télécharger ici les sources du projet : version rar (63 Ko), version zip (69 Ko).

Ce premier tutoriel a donc constitué une introduction au développement d'applications pour Windows Phone. D'autres suivront. Vous avez pu découvrir comment installer les différents outils pour développer sur WP7.
Vous avez également pu voir comment créer une application simple et voir son exécution dans l'émulateur Windows Phone.
Enfin, nous avons également eu un aperçu des différentes orientations du téléphone et le moyen de les détecter.

J'espère que ce tutoriel a pu vous être utile et vous a donné envie de créer des applications sur Windows Phone 7.

Je remercie les membres de l'équipe Dotnet pour leurs relectures attentives du document et leurs remarques, ainsi que Benj. et jacques_jean pour leurs relectures orthographiques.

Si vous constatez une erreur dans le tutoriel, dans le code source, dans la programmation ou pour toute information, n'hésitez pas à me contacter par le forum.