Utiliser un DataTemplateSelector en Silverlight

Il existe en WPF beaucoup de classes intervenant dans une utilisation avancée du DataBinding. Certaines d’entre elles ne sont pas présentes à ce jour dans Silverlight. Parmi elles, la classe System.Windows.Controls.DataTemplateSelector qui permet de choisir un DataTemplate s’appliquant à un objet selon des règles définies par le développeur. Heureusement, il est très facile de recréer cette classe en Silverlight et cet article va vous permettre de voir comment.

Note : cet article reprend la solution proposé par Raul Mainardi Neto proposée sur CodeProject.

Le problème

Imaginons que vous ayez une ListBox dans laquelle se trouvent plusieurs objets métiers avec des caractéristiques différentes. Pour définir l’affichage de vos éléments, vous allez remplir la propriété ItemTemplate du ListBox. Seulement voilà, vous souhaiteriez changer quelque peu, voir intégralement, l’affichage de l’élément selon ses caractéristiques. C’est dans ce cas que le DataTemplateSelector va vous être utile ; comme son nom l’indique il permet de sélectionner le Template.

C’est par exemple le problème auquel j’ai été confronté dans mon application WP7 proposé pour le concours SNCF (qui soit dit en passant a été sélectionnée pour les phases finales) dans laquelle je voulais varier les logos des transports depuis une gare, selon le type de transport.

La solution

Pour résoudre ce problème, nous allons d’abord créer une classe abstraite, qu’il faudra ensuite dériver selon nos besoins. Cette classe, très simple est la classe DataTemplateSelector. Elle étend la classe ContentControl, car effectivement elle va appliquer un Template au contenu qui lui est passé.

    public abstract class DataTemplateSelector : ContentControl
    {
        public virtual DataTemplate SelectTemplate(object item, DependencyObject container)
        {
            return null;
        }

        protected override void OnContentChanged(object oldContent, object newContent)
        {
            base.OnContentChanged(oldContent, newContent);

            ContentTemplate = SelectTemplate(newContent, this);
        }
    }

Ceci étant fait, créons maintenant une classe fille qui ajoute des propriétés de type DataTemplate (les Templates qui seront sélectionnable par la classe) et qui redéfinit la méthode SelectTemplate, méthode qui va définir selon quelles règles il faut choisir le Template.

    public class TransportDataTemplateSelector : DataTemplateSelector
    {
        public DataTemplate MetroDataTemplate { get; set; }
        public DataTemplate RerDataTemplate { get; set; }
        public DataTemplate BusDataTemplate { get; set; }

        public override DataTemplate SelectTemplate(object item, DependencyObject container)
        {
            Transport t = item as Transport;
            if (t != null)
            {
                switch (t.Type)
                {
                    case TransportType.None:
                        break;
                    case TransportType.Metro:
                        return MetroDataTemplate;
                    case TransportType.Rer:
                        return RerDataTemplate;
                    case TransportType.Bus:
                        return BusDataTemplate;
                    default:
                        break;
                }
            }

            return base.SelectTemplate(item, container);
        }
    }

Il ne reste plus qu’à l’utiliser depuis votre code XAML. Ajouter un namespace xml et utiliser votre TransportDataTemplateSelctor de la manière suivante :

<ListBox Grid.Row="1" ItemsSource="{Binding CurrentStation.Transports}">
  <ListBox.ItemTemplate>
    <DataTemplate>
      <views:TransportDataTemplateSelector Content="{Binding}">
        <views:TransportDataTemplateSelector.MetroDataTemplate>
          <DataTemplate>
            <StackPanel … />
          </DataTemplate>

Et voilà rien de plus simple, pour un résultat très appréciable !

Publicités

Utiliser et modifier les couleurs de thèmes sous Windows Phone 7

Dans un précédent article, j’ai décrit comment utiliser les ressources de Windows Phone 7 pour accorder les polices en tailles, graisse, et couleur avec le reste du système. Dans cet article je vais me focaliser plus particulièrement sur les couleurs. Nous verrons ainsi comment utiliser les couleurs du système dans ses applications et comment les surcharger.

Utiliser les couleurs

Comme les tailles de police, les couleurs et brushes sont mises dans des fichiers de ressources présents dans le téléphone. Elles sont toutes définies par des clés pour y accéder en XAML via l’extension Propriete= »{StaticResource CléDeRessource} » ou en code via la propriété Application.Current.Resources[« CléDeRessource »].
Pour rappelle une Brush peut être une couleur, un dégradé ou bien une image. Toutes ces Brush sont de simples couleurs car les dégradés ne sont pas conseillés dans les guidelines de Metro étant donné les limitations des écrans 16bpp. Voici une liste non exhaustive de brushes qui peuvent être utilisées dans vos applications.
Clé de ressource
Utilisation
PhoneAccentBrush
Brush d’accentuation définie par le thème.
PhoneForegroundBrush
Brush utilisée pour les éléments de premier plan tels que le texte ou les icônes.
PhoneBackgroundBrush
Brush utilisée pour les éléments d’arrière-plan.
PhoneContrastBackgroundBrush
Brush de fond utilisée pour les éléments à mettre en contraste. Par exemple le fond des menus contextuels.
PhoneContrastForegroundBrush
Brush de premier plan utilisée pour les éléments à mettre en contraste. Par exemple les textes des menus contextuels.
PhoneDisabledBrush
Brush des éléments désactivés (par exemple un bouton désactivé)
PhoneSubtleBrush
Brush partiellement transparente qui permet de mettre en retrait des éléments visuels moins importants.
PhoneBorderBrush
Brush de bordure des contrôles TextBox, CheckBox, PasswordBox, et RadioButton.
PhoneSemitransparentBrush
Brush presque transparente permettant de faire ressortir des éléments de couleurs similaires (par exemple du texte blanc sur une image claire).
Ces brushes permettent d’une part de pouvoir faire des variations de couleurs tout en restant dans l’univers de l’utilisateur. Elles permettent également, si vous créez des contrôles personnalisés de conserver la cohérence visuelle avec le reste de votre application.

Modifier localement les ressources

Un autre aspect très intéressant de ces ressources est qu’elles sont naturellement utilisées par l’ensemble des contrôles Silverlight. On peut donc créer des applications cohérentes visuellement, en ne changeant que très peu de chose. Suivez le guide :
  1. Allez dans %ProgramFiles%\Microsoft SDKs\Windows Phone\v7.0\Design
  2. Copier le fichier ThemeResources.xaml dans votre projet
  3. Aller dans votre App.xaml
  4. Ajouter un ResourceDictionary dans les ressources de votre Application :

<ResourceDictionary>
  <ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="Themes/ThemeResources.xaml" />
  </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

Vous pouvez à présent modifier localement les brushes afin de changer les couleurs de tous les éléments déjà présents. Par exemple le changement des ressources PhoneForegroundBrush, PhoneBackgroundBrush et et PhoneSubtleBrush permettent d’avoir une infinité de variations.

Accorder les images au thème

Pouvoir changer les couleurs du texte et du fond est une chose, mais dans une application avec des logos, cela ne suffit pas. J’ai vu pas plus tard qu’aujourd’hui une technique très intéressantes permettant d’accorder également les icônes aux couleurs système, que je me permets de reprendre. Source: http://advertboy.wordpress.com/2010/09/25/using-an-image-as-a-mask-so-that-wp7-themes-are-honoured/
Pour faire simple cette technique consiste à mettre un contrôle, par exemple un bouton si on veut un déclencher une action, ou un Border si on ne veut pas d’interaction. On va mettre tout d’abord sa couleur de fond à la couleur souhaité, disons PhoneForegroundBrush. On va ensuite créer une ImageBrush avec notre logo. On va enfin mettre cette ImageBrush comme OpacityMask de notre premier élément.
<Border
  Background="{StaticResource PhoneForegroundBrush}"
  Width="30"
  Height="30"
  VerticalAlignment="Center">
  <Border.OpacityMask>
    <ImageBrush Stretch="Uniform" ImageSource="restaurant.png"/>
  </Border.OpacityMask>
</Border>
Résultat, nous avons créé un icône dont la couleur dépend du thème choisi. En action cela donne ça :
Ce que j’aime particulièrement dans cette technique est que cela peut marcher avec n’importe quelle couleur, y compris celles d’un thème modifié comme dans l’exemple précédent ou de la couleur d’accent par exemple.
Seul problème qui subsiste : admettons que vous avez une image qui n’est pas monochrome mais que voulez quand même changer selon que l’utilisateur utilise votre application en thème clair ou sombre. C’est là que vont servir les ressources PhoneDarkThemeVisibility et PhoneLightThemeVisibility (ainsi que PhoneDarkThemeOpacity et PhoneLightThemeOpacity). On va grâce à ses objets, pouvoir mettre deux images l’une sur l’autre. La visibilité de chaque image sera liée à la ressource qui lui correspond, à l’aide d’un converter qui affichera l’une ou l’autre selon le thème.
Les thèmes sont donc particulièrement pratiques et utiles sous WP7. Par défaut ils permettent de garder une cohérence visuelle au sein du système et quand on les surcharge, ils peuvent permettre de respecter une charte graphique pour une cohérence visuelle au sein de l’application elle-même.

Pour avoir une Tile plus native

Pour terminer, une astuce toute fraiche pour que les Tiles de vos application utilisent la couleur de thème que vos utilisateurs ont choisi : au lieu de mettre un fond, mettez un fond transparent et sauvegarder votre image en png avec support de la transparence. Et voilà, votre application n’a jamais paru aussi native !

Windows Phone 7 : les outils sont là !

Aujourd’hui est un grand jour pour Microsoft et pour les nombreux développeurs qui se sont intéressé à sa nouvelle plateforme mobile, Windows Phone 7. En effet c’est aujourd’hui que sont sortis les outils finaux de développement ! Pour les télécharger c’est ici : http://developer.windowsphone.com/windows-phone-7/

Si vous êtes encore là, décortiquons un peu les nouveautés de la RTM !

Contrôles Panorama et Pivot

Et oui ils sont là les tant attendus contrôles Pivot et Panorama officiels qui vont vous permettre de faire des applications panoramiques (comme les hubs du système) et des applications pivotante comme l’application Mail de l’OS. Un simple aperçu ne suffirait pas à entrevoir toutes les possibilités, autant je préfère leur réserver un article bien à eux dans les jours qui suivent. Ci-dessous, les types de projet, que vous pourrez choisir dans Visual Studio 2010 pour commencer une application Silverlight pour Windows Phone.

Contrôle Bing Map

Le contrôle pour incorporer des cartes dans ses applications WP7 est présent dans les nouveaux outils de développement. Via la dll Microsoft.Phone.Controls.Maps.dll vous aurez alors accès au contrôle Map ainsi qu’à tout ce qui est contenu dans le SDK de Bing Maps. Le contrôle Map supporte en outre toutes les manipulations classiques (par exemple le fait de zoomer en « pinçant » la carte). Là encore toutes les possibilités de l’API Bing Maps pour WP7 ne pourraient être résumées dans cet article.

Nouveaux Code Samples

La documentation a été mise à jour et avec celle-ci, de nouveaux exemples de code sont apparus, tel que par exemple l’effet « tilt » qui est déjà utiliser un peu partout dans le système : c’est un effet très subtile, qui permet de montrer qu’un bouton est pressé. Pour utiliser le Tilt, la MSDN explique comment utiliser le code sample dans vos applications : http://msdn.microsoft.com/en-us/library/ff941108(VS.92).aspx

Microsoft Advertising SDK for Windows Phone 7

Si vous voulez gagner de l’argent en mettant des publicités dans vos applications, Microsoft a sorti aujourd’hui, en même temps que le reste du SDK, une API spécialisée pour ajouter des bannières publicitaire dans vos applications.

Tout est géré par le SDK, vous n’avez donc qu’à placer un AdControl dans votre application, et de vous créer un compte sur la plateforme d’annonceur de Microsoft : pubCenter (https://beta.pubcenter.microsoft.com/). Vous pourrez même cibler le public de votre application (âge, localisation, etc.) afin d’affiner les publicités affichées. La documentation livrée avec le SDK vous explique comment utiliser les contrôles, et vous donne les bonnes pratiques pour conserver l’ergonomie de votre application. Pour télécharger le SDK, c’est par ici : http://go.microsoft.com/fwlink/?LinkId=198440

Silverlight Toolkit pour Windows Phone

Dernière bonne nouvelle de la journée, et pas des moindre, la sortie d’un Silverlight Toolkit contenant quelques-uns des contrôles qui manquaient le plus aux outils de développement WP7. Au programme :

  • GestureService/GestureListener : rajoute une surcouche fonctionnelle au-dessus des évènements OnManipulation{started/delta/completed} pour détecter les gestuelles classiques : Tap, DoubleTap, Hold, Flick, Drag, Pinch. Toutes ces gestuelles sont décrites dans le guide d’interaction et de conception (UI Design and Interaction Guide for Windows Phone 7), pages 80 à 90.
  • ContextMenu : quand vous voulez ajouter une application sur votre page de démarrage, vous effectuez un appui long sur l’icône de cette application. Un très joli menu contextuel apparaît vous demandant ce que vous voulez faire. Le ContextMenu permet donc de créer vos propres menus contextuels dans vos applications.
  • DatePicker / TimePicker : ces deux contrôles permettent de choisir une date et une heure.
  • ToggleSwitch : ce contrôle permet de faire un ToogleButton qui ressemble à un interrupteur.
  • WrapPanel : ce contrôle extrêmement utile est un panel qui empile les éléments comme le StackPanel mais avec un effet de retour à la ligne.

Même si tous les contrôles ne sont pas là – il manque toujours l’AutoCompleteBox – il est déjà fort agréable d’avoir un SL Toolkit le jour J ! Comme toujours cela se passe sur CodePlex, et les sources sont disponibles ! http://silverlight.codeplex.com/releases/view/52297. Pleins de nouveautés sont donc à tester dès aujourd’hui. Bon développement Windows Phone à tous !

La typographie dans Metro

Comme je l’avais abordé dans mon précédent article sur Metro, le langage graphique de Windows Phone 7, la typographie est un élément clé de la conception des applications. Les éléments textuels servent à afficher des informations mais font également partie de la décoration des applications. Dans cet article je couvrirai les différents cas d’utilisation de typographie et les recommandations de Microsoft sur les polices, graisses et casses pour que vos applications paraissent le plus native possible !

La police de caractères de Metro

Windows Phone 7 intègre par défaut la police de caractère Segoe WP qui est utilisée dans tout le reste du système. Quand vous concevez une application, c’est également cette police de caractère qui est utilisée par défaut. Vous pouvez intégrer vos propres polices, et les polices standards telles qu’Arial, Times, etc. sont également disponibles mais dans le cas d’une application il est fortement conseillé de rester sur Segoe WP car Metro est fortement basé dessus. Dans le cas d’un jeu XNA en revanche, vous pouvez utiliser n’importe quelle police si elle va dans l’esprit de votre jeu.

La police Segoe WP se décline en 6 variations de graisses, du plus au moins épais :

  • Segoe WP Black
  • Segoe WP Bold
  • Segoe WP SemiBold
  • Segoe WP Regular (par défaut)
  • Segoe WP SemiLight
  • Segoe WP Light

Pour une raison que j’ignore, le guide « UI Design and Interaction Guide for Windows Phone 7 », véritable guide sur l’interface Metro, ne mentionne pas Segoe WP Light dans les différents styles de Segoe WP, mais on peut quand même l’utiliser dans ses interfaces. A savoir après si cela est « bien » au sens de Metro…

Les titres de page ou de sections dans les applications Windows Phone 7 sont généralement en Segoe WP SemiLight. Comme vous pouvez le remarquer, j’ai mis tout le titre en bas de casse. C’est notre première règle typographique de Metro : quand vous utilisez du Segoe WP SemiLight ou Light, tout le texte doit être en bas de casse.

Autre constatation, certains éléments sont entièrement en bas de casse tandis que d’autre sont entièrement en capitales : c’est par exemple le cas du titre de l’application, situé au-dessus du titre de page, ou bien de tout élément en Segoe WP Black.

Comment utiliser les ressources du système

Pour ce qui est des tailles, Metro recommande de ne pas utiliser de taille de police en dessous de 15 pts. Vous pouvez choisir vous-même les tailles de vos blocs de texte, mais plutôt que de mettre des tailles en valeur absolue, vous pouvez également utiliser dans vos applications les styles prédéfinis de Metro. Ces tailles sont contenues dans un fichier de ressources ; vous pouvez donc y accéder par l’extension StaticResource. Par exemple :

<TextBlock Foreground="{StaticResource PhoneAccentBrush}" FontFamily="Segoe WP" FontSize="{StaticResource PhoneFontSizeMediumLarge}" Text="important notice in segoe wp bold" FontWeight="Bold"/>

Le tableau ci-dessous (extrait de la MSDN library), récapitule toutes les tailles de police du fichier de ressources Metro. Notez bien qu’elle est donnée en point et non en pixel. Pour rappel, un point est égal à 1/72ème de pouce alors que l’unité de mesure de la police dans Silverlight est égale à 1/96ème de pouce, la conversion pour passer de points à pixel est donc de 96/72 soit 4/3.

Nom (clé dans le dictionnaire des ressources) Définition Taille
PhoneFontSizeSmall Petite police 14 pts (18,666666 px)
PhoneFontSizeNormal Police normale 15 pts (20 px)
PhoneFontSizeMedium Police moyenne 17 pts (22,666666 px)
PhoneFontSizeMediumLarge Police assez grande 19 pts (25,333333 px)
PhoneFontSizeLarge Police grande 24 pts (32 px)
PhoneFontSizeExtraLarge Police très grande 32 pts (42,666666 px)
PhoneFontSizeExtraExtraLarge Police très très grande 54 pts (72 px)
PhoneFontSizeHuge Police énorme 140 pts (186,666666 px)

De la même manière on peut utiliser le fichier de ressources pour les brushes, couleurs, polices, et marges. Par exemple on peut utiliser comme couleur de texte, la couleur de thème choisie par l’utilisateur. Cela permet de garder l’utilisateur dans son univers, et d’accentuer une phrase donnée. Toutes les clés de ressources et leur description sont accessibles sur la MSDN library à l’adresse suivante : http://msdn.microsoft.com/en-us/library/ff769552(VS.92).aspx

Enfin, sont également disponibles des styles de TextBlock prêt à être utilisés pour remplir certaines fonctions définies, telles que le titre d’une page. Dans ce cas, vous n’avez qu’à remplir la propriété Style. Par exemple :

<TextBlock x:Name="PageTitle" Text="semi light"  Style="{StaticResource PhoneTextTitle1Style}" />

Le tableau suivant (toujours issu de la même source) récapitule tous les Styles de TextBlock disponibles.

Name Description
PhoneTextBlockBase FontFamily: PhoneFontFamilyNormal
FontSize: PhoneFontSizeSmall

Foreground: PhoneTextBoxBrush

Margin: PhoneHorizontalMargin

PhoneTextNormalStyle FontFamily: PhoneFontFamilyNormal
FontSize: PhoneFontSizeNormal

Foreground: PhoneForegroundBrush

PhoneTextTitle1Style FontFamily: PhoneFontFamilySemiLight
FontSize: PhoneFontSizeExtraExtraLarge

Foreground: PhoneForegroundBrush

PhoneTextTitle2Style FontFamily: PhoneFontFamilySemiLight
FontSize: PhoneFontSizeLarge

Foreground: PhoneForegroundBrush

PhoneTextTitle3Style FontFamily: PhoneFontFamilySemiLight
FontSize: PhoneFontSizeMedium

Foreground: PhoneForegroundBrush

PhoneTextLargeStyle FontFamily: PhoneFontFamilySemiLight
FontSize: PhoneFontSizeLarge

Foreground: PhoneForegroundBrush

PhoneTextExtraLargeStyle FontFamily: PhoneFontFamilySemiLight
FontSize: PhoneFontSizeExtraLarge

Foreground: PhoneForegroundBrush

PhoneTextGroupHeaderStyle FontFamily: PhoneFontFamilySemiLight
FontSize: PhoneFontSizeLarge

Foreground: PhoneSubtleBrush

PhoneTextSmallStyle FontFamily: PhoneFontFamilyNormal
FontSize: PhoneFontSizeSmall

Foreground: PhoneSubtleBrush

PhoneTextContrastStyle FontFamily: PhoneFontFamilySemiBold
FontSize: PhoneFontSizeNormal

Foreground: PhoneContrastForegroundBrush

PhoneTextAccentStyle FontFamily: PhoneFontFamilySemiBold
FontSize: PhoneFontSizeNormal

Foreground: PhoneAccentBrush

Les nouveaux contrôles des outils de développement

Le 16 septembre sortiront les outils de développement de Windows Phone 7 en RTM. Parmi les nouveautés, on pourra trouver entre autres les fameux contrôles Panorama et Pivot que tout le monde attend. Jeff Wilcox a écrit sur son blog un aperçu de ces deux nouveaux contrôles : http://www.jeff.wilcox.name/2010/08/looking-ahead-at-panorama-and-pivot/

Dans les deux captures on remarque l’utilisation de la police Segoe WP SemiLight et toujours en bas de casse.

1 Le contrôle Panorama

2 Le contrôle Pivot

Pour conclure, on peut remarquer que Metro implique quelques règles typographiques assez particulières, voire déconcertantes pour certaines personnes. Il ne faut pas les prendre à la légère car c’est ce genre de détails subtils qui font la richesse de Metro. Soignez donc vos textes, et utilisez dès que vous le pouvez les ressources du système pour rendre votre application aussi cohérente que possible !

Les dégradés et Windows Phone 7

Dans Silverlight, il est très simple de mettre un dégradé comme fond d’un contrôle. Grâce aux classes LinearGradientBrush et RadialGradientBrush, en quelques lignes de XAML on obtient un dégradé linéaire ou radial. Seulement voilà, depuis la sortie des outils de développement de Juillet (version beta), les dégradés dans les applications Windows Phone 7 apparaissent très mal. En effet on voit dans l’émulateur, l’apparition de bandes à l’intérieur du dégradé, et ce bien que le code n’ait pas changé et que le rendu soit parfait dans Blend / Visual Studio… Pourquoi ?

Pourquoi ces bandes ?

Le problème vient du fait que Silverlight fait son dégradé en utilisant plus de couleur qu’un écran 16 bpp (bits par pixel) peut en afficher. Comme rien n’oblige les téléphones Windows Phone 7 à avoir des écrans 32 bpp, je suppose que l’équipe de développement de l’émulateur a préféré mettre l’émulateur en 16 bpp pour aider les développeurs à concevoir des applications qui fonctionnent quel que soit le matériel. Ce problème n’est donc pas lié à Windows Phone 7 lui-même, et on le retrouve sur d’autres plateformes. Voyons maintenant comment contourner ce problème.

Comment les faire disparaître ?

Une solution assez communément proposée est de transposer le dégradé en image en y ajoutant un fin bruitage. Cela casse la linéarité du dégradé et permet d’avoir des résultats assez satisfaisant.

Pour cela ouvrez votre outil graphique préféré (par exemple paint.net) et ajoutez du bruit. Tout est question de dosage, pour éviter de dégrader trop l’image, tout en ayant réellement un effet. Changez ensuite votre LinearGradientBrush par un ImageBrush contenant votre image et mettez le Stretch à Fill pour que votre dégradé s’étende sur tout son contenu. Et voilà !

Qu’en dit Metro ?

Dans le style Metro, on utilise principalement des couleurs unies et du contenu (images) pour les fonds des pages et des contrôles, c’est pourquoi cette restriction devrait être assez peu impactante pour peu que vous ayez respecté les consignes de Metro à la lettre. Sinon cette manipulation vous sauvera peut être la mise.

Qu’est-ce que Metro ?

J’avais parlé des raisons qui me poussent à écrire sur Windows Phone 7. Metro, l’expérience utilisateur novatrice de Windows Phone 7 en fait partie intégrante. Avant de se pencher sur ce qu’est Metro, regardons tout de suite ce que n’est pas Metro. Metro n’est pas :

  1. Une technologie / une application.
  2. Un composant de Windows Phone 7.
  3. Un Framework.

Qu’est-ce que Metro ?

Dans ce cas qu’est-ce que Metro ? C’est un ensemble de principes sur lesquels sont basée des technologies et des applications. Windows Phone n’est pas le premier système à l’intégrer, étant donné que Metro a été pensé à l’origine pour Windows Media Center. Avant de rentrer dans les détails, prenons quelques exemples d’interfaces construites sur ce modèle.

Comme je l’ai dit, Metro a été pensé pour Windows Media Center. De cet exemple on voit apparaître quelque similitude avec l’interface de Windows Phone 7, en particulier la typographie (la police de caractère Segoe faisant partie intégrante de l’interface Metro). On voit également que le contenu de l’utilisateur (en l’occurrence la vidéo en train d’être visionnée) sert de graphisme pour l’application tout comme les photos sur Windows Phone 7 servent de fond pour le hub photo.

La nouvelle version du Dashboard de la Xbox360 qui arrivera à l’automne avec Microsoft Kinect est un autre exemple d’interface purement Metro, claire avec sa disposition organisée et sa typographie caractéristique. Tout comme les « carreaux » de l’écran d’accueil de Windows Phone 7, on retrouve du contenu à l’intérieur de rectangles.

Le Zune HD a posé les bases du concept d’un certain nombre de composants de Windows Phone 7. En particulier le Pivot, ce composant central de l’interface utilisateur de Windows Phone 7 est apparu sur Zune HD. En outre les règles de typographie, les couleurs et l’iconographie de Windows Phone 7 sont eux aussi issu du baladeur de Microsoft.

Quels sont les principes de Metro ?

Microsoft défini Metro comme un langage de conception, et comme tous langage il répond donc à un certain nombre de règles. Voyons à présent quelles sont ces règles.

Clair, fluide, rapide

L’application doit être claire et intuitive. L’interface utilise les marges pour combler l’espace sans être surchargée. Chaque écran se concentre sur sa tâche principale, évitez donc au maximum les écrans fourre-tout. Le but est de faire beaucoup de chose à partir de très peu d’éléments et de garder toujours ce côté organisé.

L’utilisateur ne doit pas avoir le temps d’attendre l’application, même lors de tâches de longue durée. Il doit y avoir toujours à l’écran quelque chose pour attirer l’attention de l’utilisateur (ex : ProgressBar).

Typographie, iconographie, contenu

Le style de Metro serait sans doute très différent sans sa police de caractères Segoe UI (Segoe WP sous Windows Phone 7). Le texte dans les applications Windows Phone 7 ne sert pas qu’à afficher des contenus, il fait partie de la décoration de l’application au même rang que les images et les icônes.

L’iconographie est également au cœur du style Metro. Ils permettent de faire passer des messages sans la barrière de la langue. Le nom « Metro » vient d’ailleurs de la signalétique des transports, où les indications très sobres et directes doivent permettre à tous les voyageurs de trouver leur chemin. Les applications Metro doivent donc de la même manière permettre aux utilisateurs de trouver leur chemin dans les écrans de l’application. Les icônes doivent êtres simples et sont le plus souvent monochromes pour profiter du contraste avec la couleur du fond sur lequel ils sont implantés.

Enfin le contenu est primaire dans l’application Metro. Cela permet à une application d’être hautement personnalisé et donc perçu différemment par ses multiples utilisateurs. Il faut donc réduire au maximum le nombre de contrôles qui ne sont pas du contenu.

Tactile, dynamique, en mouvement

Metro rassemble aussi un certain nombre de recommandation sur l’aspect tactile de l’application, en particulier la taille des éléments tactiles. En effet sur un système qui se veut complètement utilisable aux doigts et bénéficiant d’au moins 4 points simultanément, toute l’interface doit être interactive. Lors des interactivités, l’application doit montrer immédiatement que les mouvements sont pris en compte.

Enfin les transitions et animations ont un grand rôle à jouer dans l’application Metro : les transitions permettent de distraire l’utilisateur pendant le chargement des composants de l’application. Les animations permettent de simuler une interaction physique avec l’utilisateur.

Comment concevoir une application Metro ?

Microsoft a rendu disponible un document qui explique un grand nombre de best practices sur la conception d’application pour Windows Phone 7. Avant de vous lancer dans le développement je vous conseille de lire attentivement ce guide. Vous pouvez télécharger le Windows Phone UI Design and Interaction Guide à l’adresse suivante : http://go.microsoft.com/?linkid=9713252. Vous pouvez en outre lire le document explicatif du concept de Metro : http://go.microsoft.com/fwlink/?LinkID=189338

Ensuite il va vous falloir penser à comment votre idée d’application peut se traduire en langage Metro. Suivez bien les recommandations du guide, elles permettent à votre application d’être cohérente avec le système lui-même et avec les autres applications.

Sachez cependant qu’il n’y a pas une seule façon de faire une application sur un thème donnée qui soit conforme au style. Par exemple Microsoft a créé deux applications météo bien distinctes avec le style Metro ; Metro ne doit donc pas être un frein à la créativité mais un guide.

N’oubliez pas non plus que l’utilisateur doit être au centre de l’application. Essayer de penser en tant qu’utilisateur afin de faire les meilleurs choix pour les utilisateurs. L’utilisateur appréciera également si votre application se plie à sa personnalité et à son contenu. La personnalisation est donc un élément clé à ne pas oublier pendant la conception.

Une fois votre idée fixée sur le papier, vous pouvez passer au développement. N’oubliez pas, les contrôles de Silverlight pour Windows Phone 7 ont été entièrement stylisés pour respecter le style Metro. Cela ne vous empêche pas d’éditer leur aspect visuel, mais tâchez de rester dans l’esprit Metro, en évitant par exemple les boutons chromés ou les contrôles avec beaucoup de nuances de couleurs.

Microsoft a créé un style graphique attrayant basé sur un certain nombre de critères. En normalisant ces critères dans le langage de conception Metro, l’opportunité est offerte aux développeurs de créer des applications qui vont en quelque sorte étendre Windows Phone 7. Une chose est sûre, le prochain système d’exploitation mobile de Microsoft va offrir une expérience utilisateur particulièrement soignée et cohérente.

Comment persister les données sous WP7 ?

Conserver des données sur le téléphone est le commun d’une grande majorité des applications, pour ne pas dire toutes les applications mobiles. Dans Windows Mobile, l’application avait accès à l’intégralité du système de fichiers du terminal, ce qui rendait la tâche assez similaire à ce qui se fait sous Windows. Sous Windows Phone 7, on se rapproche plus de ce qui se fait dans Silverlight pour PC / Mac ; aucun accès au système de fichiers, et encore moins à la base de registre de l’appareil. Tout, ou presque, passe par l’IsolatedStorage.

L’IsolatedStorage est un espace de stockage qui comme son nom le suggère est isolé des espaces de stockage des autres applications. Il ne sera donc pas question de partager les fichiers de l’application A avec l’application B. Ou presque. En effet certains fichiers gérés par les hubs de Windows Phone 7, pourront être accessibles par toutes les applications qui veulent étendre le hub en question. Pour l’instant il est surtout question du Hub photos, mais qui sait peut-être sera-t-il possible à l’avenir d’étendre d’autre hubs, voir même d’étendre les applications.

Pour cet article je vais uniquement m’intéresser à l’accès à l’IsolatedStorage et à la configuration des applications grâce à l’IsolatedStorageSettings.

L’Isolated Storage

Tout ce qui concerne l’utilisation de l’IsolatedStorage se trouve dans l’espace de nom System.IO.IsolatedStorage. Pour commencer il faut récupérer la racine des fichiers ; pour cela une seule façon de faire, appeler la méthode statique GetUserStoreForApplication de la classe IsolatedStorageFile qui renvoie une instance de cette même classe.

IsolatedStorageFile root = IsolatedStorageFile.GetUserStoreForApplication();

Cet objet remplace les traditionnelles classes File et Directory du framework .NET. On peut par exemple vérifier la présence d’un fichier ou d’un dossier avec les méthodes FileExists et DirectoryExists. On peut également créer de nouveaux dossiers et fichiers (CreateDirectory et CreateFile), obtenir la liste des fichiers et dossiers (GetFileNames et GetDirectoryNames) et finalement ouvrir un fichier en lecture ou en écriture à l’aide de la méthode OpenFile et de la classe IsolatedStorageFileStream.

IsolatedStorageFileStream fs = root.OpenFile("file.xml", System.IO.FileMode.Open);

L’IsolatedStorageFileStream s’apparente à un FileStream classique et permet donc d’exécuter toutes les opérations habituelles, lire, écrire, repositionner le curseur, et pour finir fermer le flux. Il peut également être utilisé au travers d’un StreamWriter ou d’un StreamReader, respectivement pour lire ou écrire plus facilement dans le fichier.

L’IsolatedStorageFile permet donc de gérer tout l’espace de fichier réservé à l’application. Il s’apparente en beaucoup d’aspects aux APIs de .NET en matière de gestion de fichiers. En revanche, l’IsolatedStorage d’une application est limitée en taille. Il est donc nécessaire de vérifier le Quota via la propriété du même nom. A priori une application ne devra pas dépasser les 2Go de mémoire sur le téléphone, ce qui paraît déjà être une limite assez haute. Attention également, quand l’utilisateur supprimera l’application, il effacera du même coup toutes les données de l’application.

La configuration des applications

Pour gérer les paramètres de l’application, la solution que je viens de détailler paraît un peu lourde. C’est pour cela qu’existe l’IsolatedStorageSettings. Ce n’est ni plus ni moins qu’un dictionnaire persisté sur l’IsolatedStorage. Les clés sont des chaînes de caractères, et les valeurs sont les objets à persister. La classe IsolatedStorageSettings est donc idéale pour conserver la configuration de vos applications.

IsolatedStorageSettings.ApplicationSettings["Key"] = "Value";

Pour toute autre information, la MSDN est comme toujours d’une grande aide : http://msdn.microsoft.com/en-us/library/ff402541%28VS.92%29.aspx

Qu’en est-il de SQL Compact ?

Enfin la grande question, existe-t-il une version de SQL Compact disponible sur WP7 ? Hélas non, du moins pas pour le moment. Il existe en revanche un certain nombre de personnes qui se sont penché sur le sujet, en open-source ou non.