WinRT XAML – Intégrer une police personnalisée

La charte Metro vient simplifier les interfaces, avec une mise en avant de la typographie, on s’en tient au minimum pour se focaliser sur le contenu.

Dans ce contexte, la police de vos applications a son importance. Par défaut, WinRT vous propose Segoe UI et ses déclinaisons, répondant à de nombreuses utilisations. Et si vous vouliez inclure une police plus originale, qui ne serait pas installée sur le poste client ? Dans ce cas, il va falloir l’inclure à votre package… voyons comment procéder.

C’était mieux avant ?

Pour les habitués de Silverlight, il était très simple d’intégrer une nouvelle police à son projet via Expression Blend. Pour nous aider, on avait un super outil nommé “Font Manager“, qui intégrait automatiquement la police en 2 clics. Malheureusement pour nous, ce manager est désactivé dans la dernière version RC de Blend 5. Gardons espoir pour la prochaine version, mais en attendant, il faut bien trouver une solution.

Intégrer la police au projet

Voyons comment s’en sortir sans l’aide précieuse de Blend. Nous allons tenter d’intégrer une police que j’aime beaucoup et que j’ai notamment utilisé dans Quoties et Showrizo, j’ai nommé Mister Spicy Dos.

Tout d’abord, ajoutons un nouveau répertoire “Fonts”, et glissons-y notre police. On fera bien attention à vérifier que le Build Action est sur “Content” :

Pour rappel, le mode Content copie le fichier à côté de la dll, alors que le mode Resource l’inclue directement dans la dll.

 

A partir de là, on n’a plus qu’à déclarer notre TextBlock dont la propriété FontFamily devra prendre le formalisme suivant :

FontFamily=”/<chemin>/<fichierPolice>#<nomPolice>”

 

Pour obtenir le nom de la police, ouvrez simplement le fichier et notez son nom en en-tête.


<TextBlock FontFamily="/Assets/Fonts/MisterSpicyDos.ttf#Mister Spicy Dos"
FontSize="42"
Text="Ainsi font, font, font ..."/>

 

Plusieurs syntaxes sont possibles pour exprimer un chemin sous WinRT, selon les besoins ou préférences :

  • /<chemin>/…/<nomFichier> : lorsque le fichier se trouve dans la même dll
  • ms-appx:///<nomProjet>/<chemin>/…/<nomFichier> : mode absolu, utile lorsque le fichier se trouve dans une dll différente

Conversion en ressources

Pour factoriser et réutiliser la FontFamily, une bonne pratique est de la déclarer en tant que ressource :

 <FontFamily x:Key="MisterSpicyDos">/Assets/Fonts/MisterSpicyDos.ttf#Mister Spicy Dos</FontFamily> 

Pour générer ces lignes, Blend nous aide avec l’option “convertir en nouvelle ressource” :

Voici le résultat final :
<Page
x:Class="AinsiFontFontFont.MainPage"
IsTabStop="false"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"><Page.Resources>
<FontFamily x:Key="MisterSpicyDos">/Assets/Fonts/MisterSpicyDos.ttf#Mister Spicy Dos</FontFamily>
</Page.Resources><Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<TextBlock FontFamily="{StaticResource MisterSpicyDos}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="42"
Text="Ainsi font, font, font ..."/>
</Grid>
</Page>

Pensez à respecter le travail des auteurs en n’utilisant que des polices libres de droit ou avec leur autorisation.

Enfin, attention à ne pas abuser des polices personnalisées. Les guidelines sont assez strictes à ce sujet, même s’il ne faut pas brider son côté artistique pour autant 🙂

Vous pouvez télécharger les sources du projet depuis ce lien.

Nombre de vue : 127

COMMENTAIRES 2 commentaires

  1. […] Lire la suite sur le blog So@t TwitterDiggFacebookDeliciousStumbleUpon […]

  2. PooLP dit :

    Bonjour,

    Apparemment ça ne fonctionne pas avec toutes les polices de caractères.

    J’ai essayé avec la police Diavlo (http://www.exljbris.com/diavlo.html), et ça ne fonctionne pas (essai avec font en OTF et TTF) … ce qui est bizarre, lors de l’édition du textBlock dans Blend, la police apparaît correctement.

    Pourriez-vous essayer pour voir si ça pose aussi problème chez vous ?

AJOUTER UN COMMENTAIRE