Ressources : Textes + Font Awesome

Une application .NET (et pas que) a toujours besoins de différents type de ressources : images, pour profiter d’icônes, de textes, pour les traduction ou même de style, pour faciliter son design. Tour d’horizon de la définition de nouvelle Ressources.

Les fichiers de ressources peuvent prendre différentes formes ou extension selon l’environnement de développement ou l’utilité. Leur but restent cependant le même : contenir les ressources dont se servira l’application pour fonctionner. Il s’agit donc de données fixe (ou au mieux personnalisable), qui seront utilisé tout au long de l’application. On peut identifier :

  • De simple fichiers de configurations au format xml, souvent suffixé de .conf, contenant par exemple les ConnectionString d’accès aux base de données, valeur de TimeOut etc. Exemple : App.config pour un projet WPF.
  • Des fichiers contenant des ressources, sous forme Key-Value au format xaml, pour du textes, des styles ou des valeurs par défauts. Partie 1.
  • Les fichiers d’accès aux ressources externes au sens large : documents, images, icons (etc). pouvant avoir l’extension .resource ou .resx. Partie 2.

Conteneur de Ressources

Dans le cas de traduction ou simplement de stockages de données au format texte il peut être intéressant de créer un fichier contenant nos ressources textuels. Il contiendra par exemple tous les messages, identifié par une clé, de notre application.

Dans le cas de ressources textuels, le plus simple est de créer un ResourceDictionnary. En substance, ResourceDictionnary est une classe implémentant IDictionnary dont le contenu pourra être géré en XAML. Les données pourront être accessible aussi bien via une vue XAML que par le code Behind.

Messages

Prenons le cas de courts textes de présentations, de résumés de fonctionnalité ou de tout type de messages dont le contenu gagnerait à ne pas gêner la lisibilité du code. Un ResourceDictionnary dans un fichier ApplicationStrings.xaml pourrait les contenir. De plus, cela permettra par la suite de faciliter la traduction de l’application : il suffira d’appeler un autre fichier de ressource.

Créer un fichier « Dictionnaire de Ressources » ou un simple fichier xaml.

<ResourceDictionary 
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:system="clr-namespace:System;assembly=mscorlib"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:local="clr-namespace:MyNamespace">

   <!-- Buttons -->
   <system:String x:Key="BtCancel">Annuler</system:String>
   <system:String x:Key="BtValid">Valider</system:String>
   <system:String x:Key="BtSave">Enregistrer</system:String>
   <system:String x:Key="BtClose">Fermer</system:String>

   <!-- UserMessages -->
   <system:String x:Key="MessAccountCreated">Le compte a été correctement créé.</system:String>
   <system:String x:Key="MessAccountUpdated">Les modifciations apportées à votre compte ont été enregistrées.</system:String>
   <system:String x:Key="MessAccountDeleted">Le compte a été supprimé. Nous espérons vous revoir bientôt.</system:String>

</ResourceDictionary>

En l’état le fichier nous permet  d’avoir un dictionnaire de string dont la key est un string. Néanmoins, il va falloir référencer ce fichier au sein de l’application pour que le dictionnaire de ressource soit accessible.

Dans le fichier App.xaml :

<Application.Resources>
   <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
         <ResourceDictionary Source="Ressources/Lang/Fr/ButtonsLabel.xaml" />
      </ResourceDictionary.MergedDictionaries>
   </ResourceDictionary>
</Application.Resources>

Ensuite, on peut y accéder :

  1. Via le XAML par l’utilisation du mot clé StaticResource
  2. Via le code par l’utilisation de Application.Current
<Button Content="{StaticResource BtValid}" Click="Button_Click"/>
string ressource = (string)Application.Current.FindResource("MessAccountCreated");

Les Styles

De la même manière que les textes, il est possible de centralisé les style d’une application dans un ResourceDictionnary. D’ailleurs, on retrouve assez régulièrement un fichier Themes/Generic.xaml qui contient les styles par défaut et/ou un fichier Themes/Custom.xaml qui contiendrait les styles de l’applications.

<!--Generic.xaml-->
<Style x:Key="BlueTxb" TargetType="{x:Type TextBlock}">
   <Setter Property="Background">
      <Setter.Value>
         <SolidColorBrush Color="AliceBlue"/>
      </Setter.Value>
   </Setter>
</Style>

<!-- App.xaml -->
<ResourceDictionary>
   <ResourceDictionary.MergedDictionaries>
      <ResourceDictionary Source="Themes/generic.xaml" />
   </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

<!-- Display -->
<TextBlock Text="BlueTextBox" Style="{StaticResource BlueTxb}" />

Icones : FontAwesome

En tant que conclusion, voici l’outil FontAwesome qui permet de facilement utiliser des icones dans son application WPF à travers l’utilisation d’une Font. Bien qu’un package Nuget existe, il est possible d’utiliser la font en tant que StaticResource de notre projet.

Ainsi, en déclarant cette nouvelle ressource dans Generic.xaml :

<FontFamily x:Key="FontAwesome">
   /MonApplication;component/Resources/nom_du_fichier_de_font.otf#Nom Reel De La Font
   <!-- exemple : /ClassicWPFapp;component/ExternalResources/FontAwesome.otf#Font Awesome 5 Free Regular-->
</FontFamily>

Il sera par la suite possible de définir d’associer au font Family du TextBlock la nouvelle ressource.

<TextBlock FontFamily="{StaticResource FontAwesome}" Text="" />

Attention : dans ce cas, le text doit afficher un Glyph, dont la référence (associée à une icone au sein de la Font) est facilement récupérable sur le site de FontAwesome : Icones gratuites FontAwesome

Sources
  • https://www.meziantou.net/using-fontawesome-in-a-wpf-application.htm
  • https://docs.microsoft.com/en-us/dotnet/api/system.windows.resourcedictionary?view=netframework-4.8
  • https://docs.microsoft.com/fr-fr/dotnet/framework/wpf/advanced/how-to-use-a-resourcedictionary-to-manage-localizable-string-resources
  • https://www.c-sharpcorner.com/uploadfile/yougerthen/introduction-to-the-resources-resx-and-resources-files-part-i/
  • https://fontawesome.com/icons/
  • Affaires vecteur créé par pikisuperstar – fr.freepik.com
A lire :

> https://docs.microsoft.com/fr-fr/dotnet/framework/wpf/advanced/how-to-localize-an-application

Laisser un commentaire

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