{"id":202,"date":"2023-10-20T12:55:49","date_gmt":"2023-10-20T11:55:49","guid":{"rendered":"https:\/\/coding4phone.com\/?p=202"},"modified":"2024-01-10T11:28:44","modified_gmt":"2024-01-10T10:28:44","slug":"un-outil-pour-creer-des-path-pour-net-maui","status":"publish","type":"post","link":"https:\/\/coding4phone.com\/?p=202","title":{"rendered":"Un outil pour cr\u00e9er des Path pour .NET MAUI"},"content":{"rendered":"\n

Pour afficher des icones dans une page .NET MAUI vous pouvez utiliser des images \u00ab\u00a0classiques\u00a0\u00bb (PNG, JPG, SVG) mais elles ont une taille d\u00e9finie. Il est vrai que le format SVG est vectoriel mais il est transform\u00e9 \u00e0 la vol\u00e9e en PNG par MAUI, donc le cot\u00e9 vectoriel du SVG n’est utilis\u00e9 que<\/span> pendant la pr\u00e9paration des ressources. A l’usage dans l’application elles deviennent des images PNG.<\/p>\n\n\n\n

Quand l’icone n’est pas trop complexe on peut utiliser le composant \u00ab\u00a0Path\u00a0\u00bb qui permet de cr\u00e9er une repr\u00e9sentation vectorielle. Le \u00ab\u00a0Path\u00a0\u00bb utilise un mini langage de commandes<\/a> (via sa propri\u00e9t\u00e9 \u00ab\u00a0Data\u00a0\u00bb) qu’on retrouve par exemple en WPF.<\/p>\n\n\n\n

Voici la d\u00e9claration d’un \u00ab\u00a0Path\u00a0\u00bb qui dessine une croix dans un cercle plein d’une taille de 100×100 en noir :<\/p>\n\n\n

\n  <Path \n\t  WidthRequest="100" \n\t  HeightRequest="100" \n\t  Aspect="Uniform" \n\t  Fill="Black" \n\t  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" \/>\n<\/pre><\/div>\n\n\n
Ce qui donne :<\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
Comme le \u00ab\u00a0Path\u00a0\u00bb est vectoriel, il est tr\u00e8s simple et efficace de modifier la taille de l’image finale sans perdre en qualit\u00e9. Bien s\u00fbr, c’est une image en une seule couleur mais pour agr\u00e9menter une UI ce n’est pas un soucis.<\/p>\n\n\n\n
Le soucis c’est de remplir la propri\u00e9t\u00e9 \u00ab\u00a0Data\u00a0\u00bb avec les bonnes valeurs. Id\u00e9alement il nous faudrait un outil pour \u00e7a.<\/p>\n\n\n\n
Si vous cherchez une collection d’ic\u00f4nes \u00e0 utiliser via des \u00ab\u00a0Path\u00a0\u00bb pour vos applications, il existe un outil tr\u00e8s pratique qui s’appelle Metro Studio<\/a><\/strong> et qui est propos\u00e9 par Syncfusion<\/a><\/strong>. <\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/p>\n\n\n\n
Pour le t\u00e9l\u00e9charger, vous devez juste cr\u00e9er un compte chez Syncfusion. Rien de bien nouveau dans le principe. Vous recevrez un code licence \u00e0 saisir pour que l’application fonctionne.<\/p>\n\n\n\n
Metro Studio est capable de r\u00e9aliser \u00e9norm\u00e9ment de choses mais ici nous allons \u00ab\u00a0juste\u00a0\u00bb nous concentrer sur les \u00ab\u00a0Path\u00a0\u00bb.<\/p>\n\n\n\n
\n