MAUI propose parfois des options surprenantes, comme une astuce simple pour afficher du HTML !
Il peut sembler inutile de vouloir afficher du texte en HTML dans une application MAUI, puisque XAML répond déjà aux besoins de mise en forme, de gestion des polices, des couleurs, etc.
Cependant, il existe au moins deux situations où l'affichage de HTML sous MAUI se justifie :
- La première est lorsque votre application reçoit, disons via un service web, du texte en HTML. Le convertir en texte brut ou adapter le code HTML pour un rendu en XAML pourrait s'avérer décevant ou fastidieux...
- La seconde situation concerne les textes dont le formatage est complexe, avec un mélange d'italique, de gras et de changements de couleur. Il serait alors probablement plus simple d'utiliser un extrait de texte formaté dans un éditeur HTML plutôt que de le décomposer en plusieurs "
span" du Label XAML.
Ainsi, il y a effectivement au moins deux raisons valables pour lesquelles on pourrait avoir besoin d'afficher du HTML dans une application MAUI. Et vous en trouverez peut-être d'autres.
Mais comment ?
Un Label cachotier
Eh oui, c'est bien lui, le modeste Label que vous retrouvez dans toutes vos applications ! Il est capable d'afficher du HTML, à condition de le lui spécifier poliment, ou plutôt, en utilisant la propriété TextType, qui doit être définie sur Html.
Et voilà tout...
Ensuite, cela relève simplement des préférences personnelles pour saisir le code HTML à montrer. Ce dernier peut être transmis au Label par son code-behind, par un Binding à un ViewModel, ou inséré directement dans la propriété Text, ou encore, s'il contient des balises HTML (ce qui serait incompatible avec le XML de XAML qui utilise un marquage similaire), en plaçant le code HTML dans une section CDATA.
Donc imagions la phrase suivante à afficher, codée en HTML :
<p>Ceci est un <em>texte</em> en <span style="text-decoration: underline;">HTML</span> à afficher dans un <strong>Label</strong> <span style="color: #ff0000;">MAUI</span></p>
Si ce texte provient d'un code C# (code-behind ou liaison au ViewModel), il peut être transmis tel quel (comme récupéré d'un service Web, par exemple). Cependant, s'il doit être intégré dans le code XAML, il est important de veiller à ce que le balisage HTML n'interfère pas avec celui de XAML. C'est la raison pour laquelle l'utilisation directe de la propriété Text est rare et qu'une section CDATA est généralement préférée :
(copie d'écrans sous Visual Studio pour que vous ayez le bon rendu visuel de ce à quoi cela ressemble)
Et à l'écran sous Android on aura bien le rendu suivant :
Sous Windows cela donnera :
Limitations
Il est à noter, par exemple, que la fonction de soulignement ne semble pas fonctionner sous Android, tout comme sous Windows. En outre, la segmentation du code dans la section CDATA (afin d'éviter une ligne trop longue) ne crée pas de problème sous Android, tandis que sous Windows, ce retour à la ligne est interprété littéralement et non comme un espace. On observe également que, tandis qu'Android gère parfaitement la coloration du mot "MAUI", Windows semble ne pas la prendre en compte.
Conclusion
En résumé, c'est clair : l'accès est direct dans le Label quotidien, mais l'exercice a ses limites. Le Label doit se conformer à ce que l'OS autorise, et cela varie selon les systèmes d'exploitation.
Utiliser du HTML est-il alors judicieux si le rendu change d'une plateforme à l'autre ? Difficile à dire. Pour un texte qui comporte simplement du gras et de l'italique, cela peut s'avérer plus aisé que de manipuler des segments de texte "span" au sein d'un Label.
C'est une solution économique qui offre un résultat correct sans prétention de luxe. L'offre est donc équitable.
Pour un affichage HTML complet et uniforme sur différentes plateformes, il est préférable d'utiliser un WebView, mais c'est une tout autre histoire. Nous discutons ici de l'insertion de quelques mots dans un Label, et non du rendu d'un site Web complet.
Stay Tuned !