Les convertisseurs de valeur sont essentiels pour adapter et manipuler les données dans vos applications XAML, tout en conservant la logique métier indépendante de l'interface utilisateur. On les néglige souvent, par méconnaissance mais aussi par paresse de les écrire. Mais savez-vous que le Community Toolkit MAUI en contient déjà beaucoup prêts à l'emploi ?
Introduction : L'Importance des Convertisseurs de Valeurs sous XAML
Depuis les débuts de XAML, les convertisseurs de valeur jouent un rôle crucial en facilitant l'interaction entre les données et l'interface utilisateur. Avec l'avènement du pattern MVVM (Model-View-ViewModel), une confusion s'est installée quant à la responsabilité de l'adaptation des données pour l'interface. Certains développeurs pensent que le ViewModel doit adapter toutes les valeurs pour la Vue, mais cela va à l'encontre des principes fondamentaux de MVVM.
Le ViewModel doit rester ignorant de l'interface utilisateur, permettant ainsi à la Vue de changer sans nécessiter de modifications dans la logique métier. Pour respecter cette séparation, les Value Converters (convertisseurs de valeurs) conservent toute leur importance. Ils permettent de manipuler les données pour les rendre compatibles avec les éléments d'interface, sans introduire de dépendance au niveau du ViewModel. Ils libèrent aussi le code XAML d'une complexisté trop grande, le tout sans avoir à placer du code dans la partie code-behind d'un objet XAML. Il n'y a que des avantages à les utiliser, aucun inconvénient, d'autant que tels qu'ils se présentent, les convertisseurs peuvent être stockés dans une DLL à part et être partagés par de nombreux projets (DRY !).
Par exemple, imaginons que vous ayez un enum représentant différents états de votre application et que vous souhaitiez afficher l'état sélectionné en tant qu'entier dans l'interface utilisateur. Vous pouvez utiliser le EnumToIntConverter pour convertir cet enum en un entier correspondant. Voici un exemple concret en XAML :
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:converters="clr-namespace:CommunityToolkit.Maui.Converters"
x:Class="MyApp.MainPage">
<ContentPage.Resources>
<ResourceDictionary>
<converters:EnumToIntConverter x:Key="EnumToIntConverter"/>
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout>
<Label Text="État sélectionné en tant qu'entier :"
FontSize="Medium"/>
<Label Text="{Binding SelectedState, Converter={StaticResource EnumToIntConverter}}"
FontSize="Large" />
</StackLayout>
</ContentPage>
EnumToIntConverter est utilisé pour convertir l'état SelectedState (un enum) en sa représentation entière et l'afficher dans un Label. Ce n'est qu'un exemple trivial, juste pour vous (re)mettre en tête la façon dont s'utilisent les convertisseurs.
Présentation des Convertisseurs du .NET MAUI Community Toolkit
Le .NET MAUI Community Toolkit propose une large gamme de convertisseurs prêts à l'emploi, permettant de simplifier le développement en évitant de réécrire des convertisseurs courants. Voici une liste complète des convertisseurs disponibles, avec une brève description de chacun :
- BoolToObjectConverter : Convertit une valeur booléenne en un objet spécifique.
- ByteArrayToImageSourceConverter : Convertit un tableau d'octets en une
ImageSource.
- ColorToBlackOrWhiteConverter : Convertit une couleur en noir ou blanc, selon la luminosité perçue.
- ColorToByteAlphaConverter : Convertit la composante alpha d'une couleur en une valeur entre 0 et 255.
- ColorToByteBlueConverter : Convertit la composante bleue d'une couleur en une valeur entre 0 et 255.
- ColorToByteGreenConverter : Convertit la composante verte d'une couleur en une valeur entre 0 et 255.
- ColorToByteRedConverter : Convertit la composante rouge d'une couleur en une valeur entre 0 et 255.
- ColorToCmykStringConverter : Convertit une couleur en sa représentation CMYK sous forme de chaîne.
- ColorToCmykaStringConverter : Convertit une couleur en sa représentation CMYKA sous forme de chaîne.
- ColorToColorForTextConverter : Convertit une couleur en noir ou blanc selon sa visibilité optimale pour le texte.
- ColorToDegreeHueConverter : Convertit une couleur en sa composante de teinte (hue) en degrés (0-360).
- ColorToGrayScaleColorConverter : Convertit une couleur en sa version en niveaux de gris.
- ColorToHexRgbStringConverter : Convertit une couleur en une chaîne hexadécimale RGB.
- ColorToHexRgbaStringConverter : Convertit une couleur en une chaîne hexadécimale RGBA.
- ColorToHslStringConverter : Convertit une couleur en sa représentation HSL sous forme de chaîne.
- ColorToHslaStringConverter : Convertit une couleur en sa représentation HSLA sous forme de chaîne.
- ColorToInverseColorConverter : Convertit une couleur en sa couleur inverse.
- ColorToPercentBlackKeyConverter : Convertit une couleur en sa composante noire sous forme de pourcentage.
- ColorToPercentCyanConverter : Convertit une couleur en sa composante cyan sous forme de pourcentage.
- ColorToPercentMagentaConverter : Convertit une couleur en sa composante magenta sous forme de pourcentage.
- ColorToPercentYellowConverter : Convertit une couleur en sa composante jaune sous forme de pourcentage.
- ColorToRgbStringConverter : Convertit une couleur en sa représentation RGB sous forme de chaîne.
- ColorToRgbaStringConverter : Convertit une couleur en sa représentation RGBA sous forme de chaîne.
- CompareConverter : Compare une valeur entrante avec une valeur spécifiée et retourne le résultat de la comparaison.
- DateTimeOffsetConverter : Convertit un
DateTimeOffset en DateTime.
- DoubleToIntConverter : Convertit une valeur double en un entier et inversement, avec une option de multiplication.
- EnumToBoolConverter : Convertit un énum à un booléen basé sur la comparaison avec des valeurs d'énum spécifiées.
- EnumToIntConverter : Convertit un énum en son type entier sous-jacent.
- ImageResourceConverter : Convertit un ID de ressource d'image en
ImageSource.
- IndexToArrayItemConverter : Convertit un entier en un élément d'un tableau, basé sur l'index.
- IntToBoolConverter : Convertit un entier en booléen et inversement.
- InvertedBoolConverter : Inverse une valeur booléenne.
- IsEqualConverter : Retourne un booléen indiquant si une valeur est égale à une autre.
- IsInRangeConverter : Retourne un booléen indiquant si une valeur est comprise entre une valeur minimale et maximale.
- IsListNotNullOrEmptyConverter : Convertit un
IEnumerable en un booléen.
- IsListNullOrEmptyConverter : Convertit un
IEnumerable en un booléen.
- IsNotEqualConverter : Retourne un booléen indiquant si une valeur est différente d'une autre.
- IsNullConverter : Convertit une valeur en booléen selon si elle est nulle.
- IsNotNullConverter : Convertit une valeur en booléen selon si elle n'est pas nulle.
- IsStringNotNullOrEmptyConverter : Retourne un booléen indiquant si une chaîne n'est ni nulle ni vide.
- IsStringNotNullOrWhiteSpaceConverter : Retourne un booléen indiquant si une chaîne n'est ni nulle, ni vide, ni composée uniquement d'espaces blancs.
- IsStringNullOrEmptyConverter : Retourne un booléen indiquant si une chaîne est nulle ou vide.
- IsStringNullOrWhiteSpaceConverter : Retourne un booléen indiquant si une chaîne est nulle, vide ou composée uniquement d'espaces blancs.
- ItemTappedEventArgsConverter : Extrait l'élément d'un
ItemTappedEventArgs.
- ListToStringConverter : Convertit une collection en chaîne, en utilisant un séparateur spécifié.
- MathExpressionConverter : Permet d'effectuer des opérations mathématiques sur une valeur.
- MultiConverter : Convertit une valeur en utilisant une séquence de convertisseurs.
- MultiMathExpressionConverter : Permet d'effectuer des opérations mathématiques sur plusieurs valeurs via un
MultiBinding.
- SelectedItemEventArgsConverter : Extrait l'élément d'un
SelectedItemEventArgs.
- StateToBoolConverter : Retourne un booléen selon si la valeur fournie correspond à un
LayoutState spécifique.
- StringToListConverter : Convertit une chaîne en une collection en la scindant selon un ou plusieurs séparateurs.
- TextCaseConverter : Convertit la casse d'une chaîne de caractères.
- VariableMultiValueConverter : Convertit des valeurs booléennes via un
MultiBinding en un seul booléen.
Comment Installer et Activer le Community Toolkit
Pour utiliser les convertisseurs de valeur fournis par le .NET MAUI Community Toolkit, vous devez d'abord l'ajouter à votre projet. Pour rappel, voici comment procéder :
-
Installation : Ajoutez le package NuGet CommunityToolkit.Maui à votre projet MAUI en utilisant la console de gestionnaire de packages.
-
Activation : Après l'installation, vous devez enregistrer le Toolkit dans votre application MAUI. Cela se fait généralement dans le fichier MauiProgram.cs :
using CommunityToolkit.Maui;
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.UseMauiCommunityToolkit();
return builder.Build();
}
}
Une fois ces étapes complétées, vous pouvez commencer à utiliser les convertisseurs dans vos pages XAML.
Exemple d'Utilisation du MathExpressionConverter
Décortiquons un exemple de convertisseur offert par le Toolkit un poil plus sophistiqué afin de vous faire sentir toute la valeur de l'apport de cette librairie.
Le MathExpressionConverter est un outil puissant qui facilite l'exécution de diverses opérations mathématiques directement dans le binding XAML. Ce convertisseur prend en charge une expression mathématique en tant que paramètre et l'applique à la valeur liée.
Sa sous-utilisation est surprenante, étant donné qu'il répond à un besoin fréquemment rencontré, tel que l'extraction de la TVA d'un prix toutes taxes comprises pour l'affichage, même lorsque le ViewModel ne fournit pas cette information (ce qui n'est qu'un exemple parmi bien d'autres).
Souvent, dans ces situations, le développeur sera tenté de modifier le ViewModel pour y ajouter des données, et ira même jusqu'à ajuster le Model, entraînant ainsi, de proche en proche, une complexité accrue et des bugs potentiels (et une dette technique qui augmentera). Cependant, l'utilisation d'un convertisseur dédié, comme celui présenté ici, peut accomplir la tâche en quelques secondes et résoudre les problèmes d'affichage sans altérer l'architecture centrale de l'application (d'autant qu'ici le convertisseur est déjà écrit !).
Propriétés du MathExpressionConverter
Le MathExpressionConverter dispose de plusieurs propriétés importantes :
- Expression : Cette propriété définit l'expression mathématique à appliquer à la valeur. Par exemple, une expression pourrait être
"x * 2" pour doubler la valeur liée.
- Culture : Cette propriété optionnelle permet de spécifier la culture à utiliser lors de l'évaluation de l'expression.
Exemple d'utilisation
Supposons que vous ayez une propriété TotalAmount et que vous vouliez afficher la TVA (par exemple 20 %) de ce montant dans votre interface utilisateur :
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
x:Class="MyApp.MainPage">
<StackLayout>
<Label Text="Montant Total :"
FontSize="Medium"/>
<Label Text="{Binding TotalAmount}" FontSize="Large" />
<Label Text="TVA (20%) :"
FontSize="Medium"/>
<Label Text="{Binding TotalAmount, Converter={toolkit:MathExpressionConverter Expression='x * 0.20'}}"
FontSize="Large" />
</StackLayout>
</ContentPage>
Le MathExpressionConverter sert ici à calculer 20 % du montant total et l'afficher dans l'interface utilisateur. L'expression "x * 0.20" est appliquée à la valeur de TotalAmount. Bien entendu le fait de fixer par code les 20% de TVA n'est pas très subtil, mais ce n'est qu'un exemple... Et même s'il fallait l'implémenter comme cela, les 20% pourrait être une constante qu'il serait bien moins couteuse de modifier que d'aller bricoler le ViewModel, voire le Model aussi...
Conclusion
Les convertisseurs de valeur du .NET MAUI Community Toolkit offrent une flexibilité précieuse pour manipuler les données dans vos applications MAUI, tout en respectant les principes du pattern MVVM et sans altérer votre base de code par des bricolages inutiles diminuant sa maintenabilité. Pour aller plus loin, consultez la documentation officielle qui propose des guides détaillés et des exemples d'utilisation pour chaque convertisseur.
Lien vers la documentation officielle du .NET MAUI Community Toolkit.
Stay Tuned !