Les couleurs jouent un rôle crucial dans la création d'interfaces utilisateurs (UI) esthétiques et intuitives. En plus de rendre une application visuellement attrayante, le choix judicieux des couleurs peut considérablement améliorer l'expérience utilisateur (UX).
Par exemple, en modifiant la couleur de la barre de statut, vous pouvez renforcer la cohérence du thème de votre application ou créer une alerte visuelle efficace en cas de besoin. Que ce soit pour offrir une meilleure lisibilité, signaler un changement d'état ou tout simplement pour harmoniser l'ensemble de votre design, la gestion des couleurs de la barre de statut est un atout à ne pas négliger.
Présentation du contrôle StatusBarBehavior
Le Community Toolkit de .NET MAUI propose une large gamme de comportements (Behaviors) qui facilitent la création d'interfaces réactives et dynamiques. Parmi ces outils, le contrôle StatusBarBehavior se distingue par sa capacité à gérer la couleur et le style de la barre de statut de votre application. Ce contrôle permet de modifier facilement l'apparence de cette barre en fonction des interactions utilisateur ou des changements d'état au sein de l'application, enrichissant ainsi l'UX. Outre le StatusBarBehavior, le Community Toolkit regorge d'autres Behaviors tout aussi intéressants, tels que les behaviors pour la validation des entrées utilisateur, la gestion des états visuels, et bien plus encore, offrant une flexibilité et une personnalisation accrues à vos projets MAUI.
Installer et activer le Community Toolkit
Avant de pouvoir utiliser le StatusBarBehavior, il est essentiel de configurer votre projet pour qu'il puisse tirer parti du Community Toolkit de MAUI. Voici un bref rappel des étapes à suivre :
1. Ajout du package NuGet : Dans Visual Studio, ouvrez le gestionnaire de packages NuGet et recherchez 'CommunityToolkit.Maui'. Ajoutez-le à votre projet.
2. Initialisation dans le fichier MauiProgram.cs : Après avoir installé le package, il est nécessaire d'initialiser le toolkit dans la méthode CreateMauiApp de votre fichier Program.cs, comme ceci :
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.UseMauiCommunityToolkit(); // Initialisation du toolkit
return builder.Build();
}
Mise en œuvre du contrôle StatusBarBehavior
L'utilisation du StatusBarBehavior est simple et s'intègre parfaitement dans vos pages XAML et le code C#. Voici comment vous pouvez mettre en place ce contrôle dans une application MAUI. Je vous montrerai plus bas comment uitiliser de façon plus simple et plus directe le contrôle. Mais pour l'instant voici une petite App qui permet de choisir une couleur au runtime et changer la couleur de la barre de statut à la volée. La capture animée ci-dessous vous montre le comportement de cette App.
MainPage.XAML
<?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"
x:Class="statbarcolor.MainPage"
x:Name="MainContainer">
<ScrollView>
<VerticalStackLayout Padding="30,30" Spacing="25">
<FlexLayout
x:Name="StackColorList"
AlignItems="Center"
BindableLayout.ItemsSource="{Binding Colors}"
Direction="Row"
FlexLayout.AlignSelf="Center"
HorizontalOptions="FillAndExpand"
JustifyContent="Center"
Wrap="Wrap">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Button
BackgroundColor="{Binding Color}"
BorderColor="Transparent"
BorderWidth="2"
Command="{Binding BindingContext.ColorItemClickedCommand,
Source={x:Reference MainContainer}}"
CommandParameter="{Binding .}"
CornerRadius="0"
HeightRequest="100"
WidthRequest="100">
<Button.Triggers>
<DataTrigger
Binding="{Binding IsSelected}"
TargetType="Button"
Value="True">
<Setter Property="BorderColor" Value="Red" />
</DataTrigger>
</Button.Triggers>
</Button>
</DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>
<Button
x:Name="CounterBtn"
Command="{Binding ChangeStatusBarColorCommand}"
HorizontalOptions="Center"
Text="Change StatusBar Color" />
</VerticalStackLayout>
</ScrollView>
</ContentPage>
MainPage.Xaml.cs
using statbarcolor.ViewModels;
namespace statbarcolor
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
BindingContext = new MainPageViewModel();
}
}
}
MainPageViewModel.cs
using CommunityToolkit.Maui.Core;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows.Input;
namespace statbarcolor.ViewModels
{
public class MainPageViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public ICommand ColorItemClickedCommand { get; set; }
public ICommand ChangeStatusBarColorCommand { get; set; }
private ColorItem? lastSelectedItem;
private ObservableCollection<ColorItem> colors;
public ObservableCollection<ColorItem> Colors
{
get => colors;
set
{
colors = value;
OnPropertyChanged(nameof(Colors));
}
}
public MainPageViewModel()
{
ColorItemClickedCommand = new Command<ColorItem>((i) =>
OnColorItemClicked(i));
ChangeStatusBarColorCommand = new Command(OnChangeStatusBarColor);
Colors =
[
new ColorItem() { Color = Color.FromArgb("#F7DC6F") },
new ColorItem() { Color = Color.FromArgb("#7DCEA0") },
new ColorItem() { Color = Color.FromArgb("#7FB3D5") },
new ColorItem() { Color = Color.FromArgb("#9B59B6") },
new ColorItem() { Color = Color.FromArgb("#641E16") },
new ColorItem() { Color = Color.FromArgb("#00FF00") },
new ColorItem() { Color = Color.FromArgb("#1ABC9C") },
new ColorItem() { Color = Color.FromArgb("#1B4F72") },
new ColorItem() { Color = Color.FromArgb("#D7DBDD") }
];
}
private void OnColorItemClicked(ColorItem? item)
{
if (item == null) return;
if (lastSelectedItem != null)
lastSelectedItem.IsSelected = false;
lastSelectedItem = item;
item.IsSelected = true;
}
private void OnChangeStatusBarColor()
{
if (lastSelectedItem == null) return;
CommunityToolkit.Maui.Core.Platform.StatusBar.SetColor(lastSelectedItem.Color);
CommunityToolkit.Maui.Core.Platform.StatusBar.SetStyle(StatusBarStyle.LightContent);
}
public void OnPropertyChanged([CallerMemberName] string? propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
public class ColorItem : INotifyPropertyChanged
{
private bool isSelected;
public bool IsSelected
{
get => isSelected;
set
{
isSelected = value;
OnPropertyChanged();
}
}
private Color color;
public Color Color
{
get => color;
set
{
color = value;
OnPropertyChanged();
}
}
public event PropertyChangedEventHandler? PropertyChanged;
public void OnPropertyChanged([CallerMemberName]
string? propertyName = null)
{
PropertyChanged?.Invoke(this,
new PropertyChangedEventArgs(propertyName));
}
}
}
Dans cet exemple, le bouton "Change StatusBar Color" utilise la couleur sélectionnée dans la liste pour modifier l'apparence de la barre de statut. Ce comportement enrichit l'interface utilisateur en offrant un retour visuel dynamique et engageant. Mais ce n'est qu'un exemple de changement dynamique de la couleur. Bien souvent on voudra juste affecter une couleur à la barre, dans ce cas un simple bout de code XAML comme suit sera suffisant :
<ContentPage.Behaviors>
<toolkit:StatusBarBehavior StatusBarColor="Red" StatusBarStyle="LightContent" />
</ContentPage.Behaviors>
Ou bien par code C# :
class MyPage : ContentPage
{
public MyPage()
{
this.Behaviors.Add(new StatusBarBehavior
{
StatusBarColor = Colors.Red,
StatusBarStyle = StatusBarStyle.LightContent
});
}
}
Conclusion
Le StatusBarBehavior du Community Toolkit pour .NET MAUI est un outil intéressant pour améliorer l'UX de votre application en vous permettant de personnaliser facilement la barre de statut. Que vous souhaitiez harmoniser le thème de votre application ou signaler un changement d'état, ce contrôle offre une flexibilité précieuse. Pour en savoir plus et explorer d'autres Behaviors, n'hésitez pas à consulter la documentation officielle.
Stay Tuned !