Ceci est le cinquième billet d’une série sur Windows Phone 7 dans laquelle je construis une application permettant de surveiller la disponibilité de vélos des stations Vélib’ à Paris. Pour rappel, voici la table de matières:

1. Introduction et installation des outils
2. Création d’une application et utilisation du contrôle Bing Maps
3. Le GPS et les services de géolocalisation
4. Consommation d’un service OData
5. Ajout de punaises sur une carte Bing Maps
6. Création de nouvelles pages et navigation
7. Création de vignettes sur la page d’accueil

On a besoin de punaises

Hier nous nous sommes arrêtés sur une liste stations. Chaque station est représentée par un objet de type Station qui contient des propriétés telles que le numéro de station, son adresse, le nombre de vélos et de places disponibles, mais surtout, ses coordonnées géographiques.

La prochaine étape sera donc d’utiliser ces informations pour afficher des punaises sur la carte de la page principale qui donneront un aperçu de l’état de chaque station et qui nous permettront d’accéder à la page de détails de celles-ci.

Pour afficher des punaises sur une carte, vous allez utiliser des calques. Ces calques dérivent de MapLayer et supportent des éléments d’à peu près n’importe quel type:

Dans notre cas, le Pushpin fourni dans l’assembly Bing Maps suffira largement. Ce contrôle possède deux propriétés qui nous intéressent :

• Content : est une propriété héritée de ContentControl qui permet à la classe Pushpin d’afficher à peu près n’importe quel contenu.
• Location : est de type GeoCoordinate et représente les coordonnées géographiques de la punaise qui serviront à la positionner sur la carte.

<map:Pushpin Content="Taj Mahal" Location="27.172222,78.042476" />

Cependant, notre modèle de données, la Station, ne correspond pas tout à fait à ce qui est attendu par la classe Pushpin. Avant de continuer, vous aurez donc besoin d’un modèle qui représentera les stations sur la carte. Créez la classe Pin dans votre projet :

public class Pin
{
    public Station Station { get; set; }

    public string Label { get { return this.Station.Number.ToString(); } }

    public GeoCoordinate Location
    {
        get
        {
            return new GeoCoordinate(
                (double)this.Station.Latitude,
                (double)this.Station.Longitude);
        }
    }
}

Transformez maintenant votre collection de Stations en une collection de Pins :

private void GetStationsInRectangleCallbak(IAsyncResult result)
{
    var stations = this._repository.EndExecute<Station>(result);

    var p = from s in stations
            select new Pin { Station = s };

    Dispatcher.BeginInvoke(
        new Action<IEnumerable>((pins) => pinLayer.ItemsSource = pins), p);
}

Et un calque pour afficher le tout

Dans le code ci-dessus, nous avons transformé les stations et assigné cette nouvelle collection au calque de type MapItemsControl qui hébergera les punaises.

<map:Map x:Name="Map"
    CredentialsProvider="{StaticResource BingMapsKey}"
    ZoomBarVisibility="Visible" ZoomLevel="16"
    ViewChangeEnd="OnViewChangeEnd">
    <map:MapItemsControl x:Name="pinLayer">
        <map:MapItemsControl.ItemTemplate>
            <DataTemplate>
                <map:Pushpin Location="{Binding Location}"
                             Content="{Binding Label}"
                             Tap="OnStationTap" />
            </DataTemplate>
        </map:MapItemsControl.ItemTemplate>
    </map:MapItemsControl>
</map:Map>

MapItemsControl qui expose, entre autres, les propriétés ItemsSource et ItemTemplate qui nous permettent de spécifier les éléments à afficher et le template à utiliser pour leur rendu à l’écran, respectivement. Dans l’exemple ci-dessus, chaque punaise sera représentée par un Pushpin dont les propriétés sont liées à celles du modèle créé à l’étape précédente. De plus, la méthode OnStationTap sera appelée lorsque l’on appuie sur les repères :

private void OnStationTap(object sender, GestureEventArgs e)
{
    var station = ((sender as Pushpin).DataContext as Pin).Station;
}

Nous savons que c’est un objet de type Pushpin qui appelle la méthode et que son DataContext est de type Pin. Il ne reste plus qu’à appeler la propriété Station de ce dernier type pour obtenir les information de la station que l’utilisateur a choisi.

Lundi nous passerons cette station à une nouvelle page qui sera chargée d’afficher ses détails.

Ceci est le deuxième billet d’une série sur Windows Phone 7 dans laquelle je construis une application permettant de surveiller la disponibilité de vélos des stations Vélib’ à Paris. Pour rappel, voici la table de matières:

1. Introduction et installation des outils
2. Création d’une application et utilisation du contrôle Bing Maps
3. Le GPS et les services de géolocalisation
4. Consommation d’un service OData
5. Ajout de punaises sur une carte Bing Maps
6. Création de nouvelles pages et navigation
7. Création de vignettes sur la page d’accueil

Description de l’application

Hier, pressé de vous faire installer les outils, j’ai oublié de vous présenter l’application elle-même !

Il s’agit d’une application très simple, permettant de surveiller la disponibilité des Vélib’s à Paris. Pour ceux qui ne connaissent pas Vélib’, il s’agit d’un réseau de stations, permettant la location de courte durée de vélos dans la capitale.

Notre application aura donc deux écrans :

Le premier permet d’apercevoir, sur une carte qui occupe l’écran entier, les stations à proximité de l’utilisateur. Le deuxième sera accessible lorsque l’on appuie sur une station sur la carte ou depuis l’écran d’accueil.

Création du projet

Nous allons commencer par créer un nouveau projet.

Sélectionnez un projet de type Windows Phone Application dans la catégorie Silverlight for Windows Phone. J’ai appelé mon projet UnVelo.Wp7, mais vous êtes libres d’appeler le vôtre comme vous le souhaitez.

Comme j’avais prévenu, j’aurai besoin de fonctionnalités disponibles uniquement dans la nouvelle version du système d’exploitation. Choisissez donc les outils “Mango” ou Windows Phone 7.1 :

Votre nouveau projet contient déjà un certain nombre de fichiers :

• App.xaml et App.xaml.cs contiennent du code relatif à l’application dans sa globalité, par exemple, des gestionnaires d’évènements ou, dans quelques instants, des ressources globales.
• ApplicationIcon.jpg, Background.jpg et SplashScreenImage.jpg sont des images utilisées par le téléphone pour l’icône de l’application, la vignette de l’écran d’accueil et au démarrage de l’application. Je ne rentrerai pas dans le détail pour le moment, mais je vous encourage à jouer avec pour voir comment elles se comportent.
• MainPage.xaml a été configurée dans App.xaml comme étant la page de démarrage de notre application, c’est donc ici que nous allons commencer.

La page contient un certain nombre d’éléments par défaut. Ceux-ci permettent au développeur d’indiquer le nom de l’application, le titre de page et, dans une grille appelée ContentPanel, d’ajouter le contenu qu’il souhaite. Dans notre cas, cette page ne nous convient pas du tout, nous allons donc tout supprimer et ajouter notre plan.

Le contrôle Bing Maps

Pour ajouter un plan dans la page principale, nous allons utiliser le contrôle Bing Maps pour Silverlight fourni avec Windows Phone. Pour cela, vous devez ajouter une référence vers l’assembly Microsoft.Phone.Controls.Maps :

Ensuite, pour utiliser le contrôle dans le code XAML, il faut donner un alias au namespace Microsoft.Phone.Controls.Maps dans le fichier MainPage.xaml :

<phone:PhoneApplicationPage
    x:Class="UnVelo.Wp7.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"
    xmlns:map="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

Ce qui nous permettra enfin d’ajouter le contrôle à notre page :

<Grid x:Name="LayoutRoot" Background="Transparent">
    <map:Map />
</Grid>

Un petit Ctrl+F5 compilera et lancera l’émulateur pour que nous puissions enfin voir notre application pour la première fois :

En l’état, vous ne pouvez pas faire grand-chose avec l’application. Vous pouvez tout de même utiliser un doigt pour déplacer la carte, faire un “double-clic” en appuyant deux fois rapidement pour zoomer et quitter l’application à l’aide du bouton Précédent de l’émulateur. Si vous avez un écran tactile, vous pourrez aussi tester des gestes comme le “pincement” pour zoomer.

Vous avez surement remarquée aussi la présence d’un message au milieu du contrôle, vous indiquant que vous n’avez pas fourni d’information d’identification et vous invitant à créer un compte développeur.

Ce compte peut être créé gratuitement sur le site Bing Maps Account Center et sera lié à un Live Id. Sur ce site vous pourrez créer une nouvelle “clé” pour l’utilisation des APIs Bing Maps.

Vous pouvez créer une clé de type “Développeur” ou “Mobile”. Les deux sont gratuites et vous permettront de travailler sans problème sur votre application Windows Phone 7. Une clé “Mobile” sera nécessaire lors du déploiement d’une application utilisant le contrôle Bing Maps, en revanche, sinon vous risquez de rencontrer des problèmes dus aux limitations des autres types de clé.

Une fois que vous avez obtenu votre clé, vous allez la copier et en faire une ressource globale de votre application, car vous allez en avoir besoin à plusieurs endroits.

Ouvrez donc le fichier App.xaml, dans lequel vous allez ajouter le namespace Microsoft.Phone.Controls.Maps, comme vous l’avez fait au-dessus et vous allez ajouter votre clé à la section Resources :

<Application.Resources>
    <map:ApplicationIdCredentialsProvider x:Key="BingMapsKey" ApplicationId="[Votre clé ici]" />
</Application.Resources>

Vous pouvez maintenant la référencer depuis MainPage.xaml :

<map:Map CredentialsProvider="{StaticResource BingMapsKey}"
         ZoomBarVisibility="Visible"
         ZoomLevel="12"
         Center="48.856614,2.352222"/>

Je m’arrêterai ici pour aujourd’hui. Vous avez tout ce qu’il vous faut pour jouer un peu avec le contrôle Bing Maps. N’hésitez pas à tester différentes propriétés pour changer l’affichage.

Demain nous utiliserons les services de géolocalisation pour centrer la carte sur la position actuelle de l’utilisateur automatiquement.