Eléments d'ergonomie et de design de Windows Phone 7 : l'Application Bar

Un article rédigé le 13 avril 2010 par : Pierre Cauchois, Responsable Relation Technique mobilité et embarqué avec les Développeurs Retrouvez plus d'informations sur son blog.

L’Application Bar est la barre d’icônes et de menu qui se situe en bas de l’écran du terminal, et qui permet de contrôler l’application. C’est un peu l’héritage des soft-keys qui existaient dans les versions précédentes de Windows Mobile et Windows Phone, et il convient d’accorder le plus grand soin au choix des actions qu’on veut y exposer, par l’intermédiaire d’icônes ou d’un menu. Le but de cet article est d’en comprendre le fonctionnement dans ses moindres détails : heureusement il est particulièrement simple !

Les recommandations d'utilisation de l'Application Bar

Le Guide des recommandations d’interfaces graphiques et d’usages de Windows Phone 7 comporte toute une section sur l’Application Bar. Les recommandations sont les suivantes :

• Utiliser les couleurs du thème du système à moins d’une excellente raison pour changer les couleurs. Les icônes devraient être monochromes sur fond transparent. Il est bien sûr possible de déroger à cette règle mais la qualité du rendu n’est alors pas garantie…
• L’opacité de l’Application Bar peut être ajustée finement mais il est préférable d’utiliser des valeurs de 0 (transparente, elle n’apparait pas), 0.5 (légèrement opaque, elle recouvre l’interface de l’application) ou 1 (pas de transparence, dans ce cas l’application est ajustée au-dessus de l’Application Bar)
• Les icônes de l’Application Bar devraient avoir une taille de 48x48. Toute autre taille sera ajustée mais l’ajustement peut causer une perte de qualité.
• Le cercle dessiné autour de l’icône est dessiné par l’Application Bar et ne devrait pas être inclus dans l’image de l’icône.
• Il vaut mieux restreindre l’utilisation des icônes aux actions évidentes et les plus utilisées de votre application – pour le reste, préférez le menu, qui se déroule avec d’un geste.
• Les éléments du menu sortiront de l’écran s’ils sont trop longs. Il n’y a pas de taille prédéfinie ou limite, mais une bonne pratique est de se limiter à entre 14 et 20 caractères.
• L’Application Bar ne devrait pas comporter plus de 4 icônes, et ne doit en comporter autant que si c’est absolument nécessaire.
• Le menu de l’Application Bar ne devrait pas comporter plus de 5 éléments, car cela forcera l’utilisateur à faire défiler le contenu.
• Pour des raisons de cohérence avec l’interface graphique de Windows Phone 7, les chaines de caractères du menu seront toutes converties en minuscules.

Ajouter une Application Bar en C#

Le contrôle de l’Application Bar est défini dans l’assembly Microsoft.Phone.Shell. Il faut donc commencer par rajouter une référence et la directive using correspondante :

using Microsoft.Phone.Shell;

L’Application Bar est déjà déclarée dans l’application sous le nom ApplicationBar. Il convient donc juste de la définir, en commençant par initialiser son instance :

ApplicationBar = new ApplicationBar();

Ensuite on peut initialiser les différents paramètres, notamment l’opacité, la visibilité, et la capacité de l’Application Bar à afficher un menu :

ApplicationBar.Opacity = 0.5;

ApplicationBar.Visible = true;

ApplicationBar.IsMenuEnabled = false;

À cet endroit on peut également initialiser les couleurs de premier et d’arrière-plan, mais comme vu dans la première partie de l’article, ce n’est pas recommandé.

On peut maintenant ajouter des boutons et des icônes. Ces éléments sont stockés dans les listes ApplicationBar.Buttons et ApplicationBar.MenuItems.

Les boutons sont de type ApplicationBarIconButton et s’initialisent de la façon suivante :

ApplicationBarIconButton SaveButton = new ApplicationBarIconButton(new Uri("Save.png", UriKind.Relative));

SaveButton.Click += new EventHandler(SaveButton_Click);

Il suffit ensuite de l’ajouter à la liste des boutons :

ApplicationBar.Buttons.Add(SaveButton);

Les éléments du menu fonctionnent de la même manière :

ApplicationBarMenuItem SaveMenuItem = new ApplicationBarMenuItem("Save");

SaveMenuItem.Click += new EventHandler(SaveMenuItem_Click);

ApplicationBar.MenuItems.Add(SaveMenuItem);

Dans le cas des boutons comme des éléments du menu, on peut les activer ou les désactiver à l’aide de la propriété Enabled. Par exemple :

SaveMenuItem.Enabled = false;

Ajouter une Application Bar en XAML

On peut faire tout ce qu’on vient de voir en C# en XAML.

La directive Using se transforme en XAML de la façon suivante :

xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone.Shell"

A rajouter bien entendu dans l’élément racine de la page : phoneNavigation:PhoneApplicationPage.

Ensuite, on rajoute à l’intérieur de la page la balise <phoneNavigation:PhoneApplicationPage.ApplicationBar>

Puis comme en C#, on peut créer des boutons et des éléments du menu, en rajoutant des éléments à l’intérieur même de cette balise, par exemple comme ceci :

<phoneNavigation:PhoneApplicationPage.ApplicationBar>

        <shell:ApplicationBar Visible="True" IsMenuEnabled="True">

            <shell:ApplicationBar.Buttons>

                <shell:ApplicationBarIconButton x:Name="button1" Click="button1_Click" IconUri="/Images/button1.png"></shell:ApplicationBarIconButton>

                <shell:ApplicationBarIconButton x:Name="button2" Click="button2_Click" IconUri="/Images/button2.png"></shell:ApplicationBarIconButton>

            </shell:ApplicationBar.Buttons>

            <shell:ApplicationBar.MenuItems>

                <shell:ApplicationBarMenuItem x:Name="menuItem1" Click="menuItem1_Click" Text="MenuItem 1"></shell:ApplicationBarMenuItem>

                <shell:ApplicationBarMenuItem x:Name="menuItem2" Click="menuItem2_Click" Text="MenuItem 2"></shell:ApplicationBarMenuItem>

            </shell:ApplicationBar.MenuItems>

        </shell:ApplicationBar>

</phoneNavigation:PhoneApplicationPage.ApplicationBar>

Des icônes pour l’Application Bar

Trouver des icônes :

Une application de dessin aussi simple que MS Paint ou Paint.NET peut permettre de créer des icônes, si on s’en sent capable. Sinon, Microsoft a publié un jeu d’icônes bien utile qui recouvre les fonctionnalités de bases qu’on pourrait vouloir voir dans une Application Bar, et qui sinon permettront au moins de servir de point de départ :

Ce pack d’icônes peut être téléchargé ici : Téléchargement du pack d'icones Windows Phone 7

Les rajouter au projet :

Pour rajouter une icône dans une application, la méthode recommandée est de l’inclure dans le projet (un drag & drop dans la solution marche très bien !) mais il ne faut pas oublier d’en modifier les propriétés : à savoir placer la Build Action à « Content » et le « Copy To Output Directory à « Copy Always » ou « Copy if newer » !

Et voilà, c’est tout ce qu’il faut savoir sur l’Application Bar. Une fonctionnalité bien simple mais essentielle dans l’ergonomie Windows Phone 7. Tâchez de respecter au mieux ces best-practices, mais n’oubliez pas de les passer toujours au filtre de votre propre jugement : et pour paraphraser Bill Buxton, quoi que vous choisissiez de faire, faites le naturellement :-)