Pour afficher des icones dans une page .NET MAUI vous pouvez utiliser des images « classiques » (PNG, JPG, SVG) mais elles ont une taille définie. Il est vrai que le format SVG est vectoriel mais il est transformé à la volée en PNG par MAUI, donc le coté vectoriel du SVG n’est utilisé que pendant la préparation des ressources. A l’usage dans l’application elles deviennent des images PNG.
Quand l’icone n’est pas trop complexe on peut utiliser le composant « Path » qui permet de créer une représentation vectorielle. Le « Path » utilise un mini langage de commandes (via sa propriété « Data ») qu’on retrouve par exemple en WPF.
Voici la déclaration d’un « Path » qui dessine une croix dans un cercle plein d’une taille de 100×100 en noir :
<Path
WidthRequest="100"
HeightRequest="100"
Aspect="Uniform"
Fill="Black"
Data="M9.9000245,6.000003L6.0000001,9.8999988 12.100037,16.000007 6.0000001,22.100002 9.9000245,25.999997 16,19.900018 22.100037,25.999997 26,22.100002 19.900024,16.000007 26,9.8999988 22.100037,6.000003 16,12.099997z M16,0C24.799988,0 32,7.2000005 32,16.000007 32,24.800016 24.799988,32.000001 16,32.000001 7.2000123,32.000001 8.3946347E-08,24.800016 0,16.000007 8.3946347E-08,7.2000005 7.2000123,0 16,0z" />
Ce qui donne :
Comme le « Path » est vectoriel, il est très simple et efficace de modifier la taille de l’image finale sans perdre en qualité. Bien sûr, c’est une image en une seule couleur mais pour agrémenter une UI ce n’est pas un soucis.
Le soucis c’est de remplir la propriété « Data » avec les bonnes valeurs. Idéalement il nous faudrait un outil pour ça.
Si vous cherchez une collection d’icônes à utiliser via des « Path » pour vos applications, il existe un outil très pratique qui s’appelle Metro Studio et qui est proposé par Syncfusion.
Pour le télécharger, vous devez juste créer un compte chez Syncfusion. Rien de bien nouveau dans le principe. Vous recevrez un code licence à saisir pour que l’application fonctionne.
Metro Studio est capable de réaliser énormément de choses mais ici nous allons « juste » nous concentrer sur les « Path ».
Lorsque vous sélectionnez une image dans Metro Studio, vous pouvez lui appliquer quelques changements et l’exporter dans différents formats. Pour récupérer les commandes « Path » il suffit de sélectionner le bouton « Code » :
Une fenêtre contenant dans l’onglet « Default XAML » le code du « Path » de l’image s’affiche. C’est du code pour WPF et Il ne reste plus qu’à copier les données de la propriété « Data » et les utiliser dans votre page MAUI. Simple non ?
Metro Studio n’est pas très jeune, sa dernière version est la 5 qui remonte à 2017. Le style des images est 100% METRO (ça me rappelle pleins de souvenir ça) mais il permet de disposer d’une bibliothèque impressionnante d’icones de bonne qualité couvrant énormément de thèmes.
Alors bonne découverte de Metro Studio et amusez vous bien avec les « Path » de .NET MAUI !
Steph.