Windows 8 – Les icônes disponibles pour le composant AppBarCommand

WinJS dispose d’un composant nommé « AppBarCommand« , qui agit en fait comme une skin pour un bouton et lui donne directement un style correct dans une utilisation au sein d’une application Windows 8 Metro. C’est notamment ce type de bouton que vous devrez placer dans l’AppBar qui s’ouvre au click droit sur l’application. Voici un sample Windows qui vous apprendra à vous servir d’une AppBar:

HTML AppBar control sample

De base, cette skin de bouton affiche simplement un icône avec un cercle blanc autour. Vous pouvez lui donner en option un label qui sera affiché en dessous du bouton. Pour rappel, voici comment créer un composant AppBarCommand:

<button data-win-control="WinJS.UI.AppBarCommand"></button>

Avec un label:

<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdRemove',label:'Remove'}"></button>

A noter que le label ne sera pas toujours affiché. Il y a des CSS dans les feuilles de style de base des applications Windows 8 (ui-light.css et ui-dark.css) qui font qu’en mode « snapped » et en mode portrait, les libellés seront masqués (pour un éventuel manque de place). Il est donc important d’avoir un icône qui a du sens.

Pour cela, vous pouvez passer une option « icon » avec un identifiant d’icône parmi ceux diffusés par MS qui font en fait partie de la police de base utilisée pour les applications Windows 8: Segoe UI. Il y a donc une liste d’icônes pré-définis parmi lesquels vous avez de grandes chances de trouver votre bonheur.

Vous trouverez sur cette page de la documentation, la liste de tous les icônes disponibles:

WinJS.UI.AppBarIcon enumeration

Exemple d’utilisation:

<button data-win-control="WinJS.UI.AppBarCommand" 
data-win-options="{id:'cmdRemove',label:'Remove',icon:'remove'}"></button>

Pour les applications en C#, vous devrez utiliser les codes que vous trouverez ici:

https://docs.google.com/document/d/1C6EvcVPM-On2Mgeq6suLpcaBnCX0L-IcZK0JT8YEYEE/edit?pli=1

Vous pouvez aussi allez chercher les références directement dans le fichier ui.js de WinJS mais c’est moins graphique :).

Enfin, un certain Adam Kinney a créé une planche contenant tous ces icônes de manières plus agréable à lire:

http://adamkinney.com/blog/2012/03/04/windows-8-appbaricons-enumerated-and-visualized/

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *