Ajouter des icônes vectorielles à vos application … grâce aux polices de caractère

Trouver des icônes est souvent une tâche pénible pour les développeurs. Ce post décrit une technique simple pour utiliser des polices « symboliques » dans vos applications WPF et Silverlight permettant ainsi :

  • D’avoir des icônes vectoriels donc retaillables sans perte
  • Une amélioration potentielle des performances en passant par la stack de rendu de texte optimisée
  • Avoir votre jeu d’icônes dans un fichier unique (Silverlight), voire sans aucune ressource supplémentaire (WPF)
  • Inconvénient : les polices étant définies de manière monochromatique, elles ne sont affichées qu’avec une unique brush. Bien que vous puissiez définir une brush des plus  extravagantes, vos icônes sont intrinsèquement monochromes.

FontsAsVectorIcons

Pour les applications WPF, il suffit de définir en tant que FontFamily le nom d’une police disponible localement :

<TextBlock FontFamily="Wingdings" Text="A B C 7 8 9"/>

Sur Silverlight 2 et supérieur, vous pouvez embarquer une police directement dans votre XAP en tant que fichier ressource. Vous pourrez ensuite la référencer par la syntaxe suivante :

<TextBlock FontFamily="MyFontFile.ttf#My Font" Text="A B C 7 8 9"/>

ou si vous chargez la police depuis une autre assembly

<TextBlock FontFamily="/MyAssembly;Component/MyFontFile.ttf#My Font" Text="A B C 7 8 9"/>

En Silverlight, spécifier le nom d’une police disponible localement marchera dans certain cas, car les polices de l’OS sont mises à contribution lors de la résolution de FontFamily. Ce n’est cependant pas une bonne pratique de portabilité. Par exemple, Wingdings n’est pas disponible par défaut sur d’anciennes versions de Mac OS X, ce qui engendre l’utilisation de la police par défaut « Portable ».

FontsAsVectorIcons_mac

Veillez ainsi à inclure les polices que vous utilisez, et dont vous disposez des droits de distribution, dans vos XAPs.

Important : Les polices disponibles avec votre système, par exemple Wingdings sous Windows, sont soumises à des droits d’auteurs et ne sont pas librement distribuables. Vous pouvez obtenir des polices libres de droit sur le web en  utilisant votre moteur de recherche préféré ou en contactant le détenteur des droits de la police que vous souhaitez utiliser.

Comme toujours, j’espère que ce post vous sera utile !

FontsAsVectorIcons.zip