Les icônes Segoe UI Symbol

Microsoft depuis Windows 8 recommande d’utiliser des icônes provenant d’une police de caractères « Segoe UI Symbol ».

C’est très pratique, il suffit de choisir cette fonte et de connaître ensuite le code pour directement accéder à l’image vectorielle de très bonne qualité, et personnalisable avec de la couleur.

Certains caractères ont une largeur nulle permettant également de faire un contour d’une autre couleur ou encore de créer un cercle autour de l’cône.

Les palettes d’icônes Segoe UI Symbol sont consultables sur différents sites :

exemple :

• http://www.adamdawes.com/windows8/win8_segoeuisymbol.html
• http://www.kreativekorp.com/charset/font.php?font=Segoe+UI+Symbol

C’est assez simple, dans une application XAML, il suffit de codifier le caractère avec les tags XML standards.

Exemple :

<TextBlock Text="🎨" FontFamily="Segoe UI Symbol" FontSize="40" Foreground="Red" />

Va afficher l’icone « palette de couleur » en rouge et en taille 40.

C# , Char et les codes supérieurs à 0xFFFF

Comment générer cette icône côté C# ? (dans un objet en DataBinding par exemple)

On trouve pas mal d’exemples sur les blog et forums de discussion et ce qui est conseillé est d’utiliser le Char et le code d’échappement « \u ».

Exemple : Si l’on veut une icône dans notre texte, il suffit de coder :

string Text = "\u2708";

L’exemple suivant correspondant à un avion.

Le problème avec les codes supérieurs à FFFF, c’est que la syntaxe précédente correspondant à la valeur d’un Char (16 bits)  n’est plus supportée.

Et dans notre cas précédent, l’affichage de l’icône palette ne marche pas !

string Text = "\u1F3A8";  // Bad result

Deux caractères correspondant à d’autres lettres seront affichés au lieu de notre icône.

En effet, un Char ne peut avoir une valeur > FFFF et les codes de type 1F3000 ne sont pas manipulables de cette façon.

Il reste également un autre problème comment parcourir les différentes icônes pour les afficher (pour proposer un écran de choix par exemple), la syntaxe « \uFFFF » n’est pas adaptée.

Il existe une autre façon de faire, plus propre je pense et plus évolutive.

string Text = Char.ConvertFromUtf32(0x1F3A8);

Cette syntaxe accepte un nombre entier en entrée et retourne le code en utf32 sans contrainte de taille.

Il est alors possible de renvoyer plusieurs icônes en parcourant tous les symboles désirés (exemple : les 250 icônes de la tranche 1F400)

for (int i = 0; i < 250; i++)
{
   Icones.Add(new IconeViewModel
   {
        Text = Char.ConvertFromUtf32(0x1F400+i)
   });
}