En développement mobile, l'affichage de petits messages informatifs peut être un outil très puissant pour offrir une meilleure expérience utilisateur. MAUI, Multi-platform App UI, propose une méthode simple et efficace pour afficher des SnackBars et des Toasts, lesquels sont des moyens rapides et non intrusifs de fournir des informations ou des actions aux utilisateurs. Dans ce billet, nous allons examiner comment implémenter ces fonctionnalités dans une application MAUI.
Qu'est-ce qu'un SnackBar?
Un SnackBar est un message d'information léger qui apparaît en bas de l'application. Il est souvent utilisé pour fournir des commentaires sur une opération. En plus du message textuel, un SnackBar peut également inclure une action, ce qui le rend interactif.
Qu'est-ce qu'un Toast?
Contrairement à un SnackBar, un Toast est un message non interactif qui s'affiche pendant une courte période avant de disparaître automatiquement. Il est généralement utilisé pour des informations qui ne nécessitent pas d'interaction de la part de l'utilisateur.
Implémentation en MAUI
SnackBar
Pour afficher un SnackBar en MAUI, il suffit d'utiliser la méthode DisplaySnackBar de l'objet Page. Voici un exemple d'utilisation en code-behind :
using Microsoft.Maui.Controls;
// ...
public class MyPage : ContentPage
{
public async Task ShowSnackBar()
{
var snackBar = new SnackBarOptions
{
MessageOptions = new MessageOptions { Foreground = Brushes.Black },
Background = Brushes.White,
Message = "Ceci est un SnackBar",
Duration = TimeSpan.FromSeconds(3),
Actions = new List<SnackBarActionOptions>
{
new SnackBarActionOptions
{
Foreground = Brushes.Red,
Text = "Annuler",
Action = () => Console.WriteLine("Action Annuler cliquée.")
}
}
};
await this.DisplaySnackBar(snackBar);
}
}
On notera qu'en production on préfèrera mettre en place un service d'affichage des notifications de type SnackBar ou Toast, sous la forme d'un Singleton Lazy, d'une classe statique, en l'intégrant dans un moteur d'IoC pour faire de l'injection de dépendances et toutes ces choses qui font passer de la simple démo comme ici à quelque chose d'utilisable dans la réalité. Cette approche pragmatique allant plus en profondeur pour plus de réalisme est abordée dans mon ouvrage "Guide Complet de .NET MAUI" en vente sur Amazon (format broché ou Kindle).
Toast
L'affichage d'un Toast est tout aussi simple. Utilisez la méthode DisplayToast de l'objet Page :
using Microsoft.Maui.Controls;
// ...
public class MyPage : ContentPage
{
public async Task ShowToast()
{
var toast = new ToastOptions
{
MessageOptions = new MessageOptions { Foreground = Brushes.Black },
Background = Brushes.Gray,
Message = "Ceci est un Toast",
Duration = TimeSpan.FromSeconds(2)
};
await this.DisplayToast(toast);
}
}
La même remarque s'applique ici, à savoir qu'en production on implémentera un service permettant notamment aux ViewModels d'avoir accès à l'affichage des Toasts et Snackbars sans violation de MVVM.
Conclusion
Les SnackBars et les Toasts sont des composants utiles pour améliorer l'expérience utilisateur en fournissant des feedbacks rapides et des actions simples. Avec MAUI, il devient extrêmement facile d'intégrer ces éléments dans vos applications. Les méthodes DisplaySnackBar et DisplayToast offrent une interface simple pour configurer et afficher ces messages, ce qui vous permet de vous concentrer davantage sur la logique métier de votre application.
Stay Tuned !