Le IconTintColorBehavior du Community Toolkit MAUI permet de personnaliser facilement la couleur des icônes et images dans une application MAUI, offrant ainsi une grande flexibilité dans la création d'interfaces utilisateur attrayantes et cohérentes. Comment en tirer profit ?
Le Community Toolkit MAUI
Le .NET Community Toolkit MAUI est un ensemble de fonctionnalités et d'outils qui simplifient et améliorent le développement d'applications MAUI (Multi-platform App UI). Ce toolkit propose divers comportements, effets, convertisseurs, et extensions pour enrichir l'expérience utilisateur et réduire la complexité du code. Il contient beaucoup de choses et au moins savoir ce qu'il offre vous permettra d'y faire appel le moment venu.
Installation et activation du Community Toolkit MAUI
Pour utiliser le Community Toolkit MAUI, il faut d'abord l'installer dans votre projet MAUI. Suivez ces étapes pour l'intégrer :
1. Installation du package NuGet :
Pour installer le Community Toolkit, exécutez la commande suivante dans le terminal de votre projet :
dotnet add package CommunityToolkit.Maui
2. Activation du toolkit dans le MauiProgram.cs :
Après avoir installé le package, vous devez l'activer dans votre projet. Ouvrez le fichier MauiProgram.cs et ajoutez la ligne suivante dans la méthode CreateMauiApp :
using CommunityToolkit.Maui;
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.UseMauiCommunityToolkit(); // Ajout du Community Toolkit
return builder.Build();
}
Utilisation du IconTintColorBehavior en XAML
Pour illustrer la richesse du Community Toolkit rien de mieux que de puiser dans ce sac presque sans fond et d'en sortir quelque chose qui pourrait bien vous aider.
C'est le cas de L'IconTintColorBehavior, un des nombreux Behavior disponibles dans le toolkit, qui permet de changer la couleur d'une icône ou d'une image.
Voici une fonction un peu particulière et qui ne semble pas absolument nécessaire au premier coup d'oeil. Détrompez-vous... Pouvoir colorisé à volonté une image ou une icône peut vous éviter d'avoir des tonnes de versions différentes d'un même fichier dans des couleurs différentes... Pensez à l'économie de ressources copie App et économie de temps côté production des images.
Cela permet, par exemple, et avec une seule version d'une image ou icône, de s'adapter à un thème clair ou foncé. Et juste avec un bout de code qui se chargement du changement de couleur pour vous. On peut aussi penser à certaines formes de bases (des cercles, des étoiles, etc) qu'on va utiliser dans une UI mais qu'on désire exploiter en différentes couleurs selon le contexte, le tout avec une seule image et pas une par couleur. Surtout que si on veut ultérieurement utiliser d'autres couleurs, c'est un mot à changer dans le code, pas besoin de sortir PhotShop et de créer une énième version du même fichier image...
Bref, c'est un petit exemple assez humble de l'énorme contribution qu'est le Community Toolkit, mais par l'exotisme de la fonction choisie aujourd'hui j'espère vous intriguer et vous donner l'envie d'aller voir de plus la documentation officielle du toolkit pour découvrir les merveilles qu'il contient ! Animations, Behaviors, Converters, des tas de choses bien pratique vous y attendent...
Dans l'exemple suivant, je vous propose une UI très simple, une note de musique en format PNG qui va changer de couleur selon l'appui sur deux boutons, l'un pour passer l'image en rouge, l'autre en bleu.
<?xml version="1.0" encoding="utf-8" ?>
<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 HorizontalOptions="Center" VerticalOptions="Center" Spacing="20">
<Image x:Name="noteImage"
Source="note.png"
WidthRequest="100"
HeightRequest="100">
<Image.Behaviors>
<toolkit:IconTintColorBehavior x:Name="iconTintBehavior" TintColor="Red"/>
</Image.Behaviors>
</Image>
<Button Text="Change to Blue" Clicked="OnChangeToBlueClicked"/>
<Button Text="Change to Red" Clicked="OnChangeToRedClicked"/>
</StackLayout>
</ContentPage>
Gestion des événements de changement de couleur en C#
Dans le code-behind de la page, nous allons ajouter les événements pour les boutons, afin de changer dynamiquement la couleur de l'icône lorsque les boutons sont pressés.
using CommunityToolkit.Maui.Behaviors;
using Microsoft.Maui.Controls;
namespace MyApp
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}
private void OnChangeToBlueClicked(object sender, EventArgs e)
{
iconTintBehavior.TintColor = Colors.Blue;
}
private void OnChangeToRedClicked(object sender, EventArgs e)
{
iconTintBehavior.TintColor = Colors.Red;
}
}
}
Dans cet exemple simple, les boutons "Change to Blue" et "Change to Red" déclenchent des événements qui modifient
directement la propriété TintColor du IconTintColorBehavior appliqué à l'image note.png. Ce modèle est idéal pour des scénarios simples où vous n'avez pas besoin de la complexité de MVVM.
Utilisation avancée avec MVVM et Binding de la propriété TintColor
Pour des scénarios plus complexes ou lorsque vous suivez une architecture MVVM, vous pouvez lier la propriété TintColor
à une source de données dans le ViewModel. La propriété TintColor du IconTintColorBehavior est bindable, ce qui permet une mise à jour dynamique en fonction des changements de données. On peut ainsi coloriser certaines images utilisées par l'UI en fonction de conditions liées à l'état de l'App. Imaginez juste une icône qui passe du noir au rouge en cas d'avertissement par exemple et qui passer en vert quand tout est ok (tous les champs sont saisis et sont valides par exemple dans un formulaire). Nul besoin de trois images séparées, une seule suffit, modifiée par le Behavior dont la propriété de teinte est Bindée à votre ViewModel. Et ce n'est qu'un exemple assez évident qui me vient en écrivant ces lignes, je suis certain que vous trouverez bien d'autres cas d'utilisations.
Voici un exemple de la manière dont vous pourriez lier cette propriété à une donnée dans votre ViewModel :
<?xml version="1.0" encoding="utf-8" ?>
<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"
BindingContext="{StaticResource MainViewModel}">
<StackLayout HorizontalOptions="Center" VerticalOptions="Center" Spacing="20">
<Image x:Name="noteImage"
Source="note.png"
WidthRequest="100"
HeightRequest="100">
<Image.Behaviors>
<toolkit:IconTintColorBehavior TintColor="{Binding IconColor}"/>
</Image.Behaviors>
</Image>
<Button Text="Change to Blue" Clicked="OnChangeToBlueClicked"/>
<Button Text="Change to Red" Clicked="OnChangeToRedClicked"/>
</StackLayout>
</ContentPage>
ViewModel :
using Microsoft.Maui.Graphics;
using System.ComponentModel;
using System.Runtime.CompilerServices;
namespace MyApp
{
public class MainViewModel : INotifyPropertyChanged
{
private Color _iconColor = Colors.Red;
public Color IconColor
{
get => _iconColor;
set
{
_iconColor = value;
OnPropertyChanged();
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
}
Code-behind (pour simplifier l'exemple, en réalité les boutons seront bindés à des ICommand exposées par le ViewModel bien entendu) :
using Microsoft.Maui.Controls;
namespace MyApp
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}
private void OnChangeToBlueClicked(object sender, EventArgs e)
{
var viewModel = BindingContext as MainViewModel;
viewModel.IconColor = Colors.Blue;
}
private void OnChangeToRedClicked(object sender, EventArgs e)
{
var viewModel = BindingContext as MainViewModel;
viewModel.IconColor = Colors.Red;
}
}
}
Conclusion
Le IconTintColorBehavior du Community Toolkit MAUI est une fonctionnalité pratique et flexible pour ajuster la couleur des icônes ou images dans une application MAUI.
Que vous optiez pour une implémentation simple ou que vous préfériez une approche MVVM avec binding, ce comportement vous offre une grande souplesse pour personnaliser vos interfaces utilisateur, à la fois de façon originale et efficace.
Grâce à sa propriété bindable TintColor, il est facile d'intégrer des changements dynamiques de couleur, offrant ainsi une expérience utilisateur améliorée.
Stay Tuned !
(la note à copier/coller et à appeler "note.png" pour faire fonctionner le code exemple de l'article. Mais toute autre image fera l'affaire aussi).