Exploration de la boîte à outils .net Maui: Alertes

Dans cet article, nous explorerons les différents types d’alertes disponibles dans la boîte à outils communautaire .net Maui.

Les alertes de boîte à outils communautaires .net Maui sont une excellente option pour afficher des informations aux utilisateurs sur la réussite d’une tâche ou de son état actuel, ainsi que des erreurs ou des avertissements qui peuvent nécessiter leur attention sans perturber le flux d’application comme un DisplayAlert fait.

Pour démontrer l’utilisation des alertes dans une application .net Maui, nous créerons un exemple de projet pour les implémenter. Pour ce faire, vous devez créer un nouveau projet en utilisant le Application .net Maui modèle et assurez-vous de ne pas inclure l’exemple de contenu dans le Informations Complémentaires fenêtre.

Ensuite, nous installerons les packages NuGet suivants:

Une fois cela fait, vous devez initialiser les deux bibliothèques de la MauiProgram.cs Fichier en ajoutant les lignes suivantes:

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .UseMauiCommunityToolkit()
            .UseTelerik()
            ...

        return builder.Build();
    }
}

Après avoir initialisé les bibliothèques, procédez pour modifier le MainPage.xaml Fichier comme suit:

1. Ajoutez un nouvel espace de noms avec une référence à la progression Telerik UI pour .net Maui Contrôles (je l’ai appelé telerik), ainsi qu’une référence à l’espace de noms du contenu que vous modifiez (dans mon exemple, il s’appelle local), comme dans l’exemple suivant:

<ContentPage
    x:Class="AlertsDemo.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:AlertsDemo"
    xmlns:telerik="clr-namespace:Telerik.Maui.Controls;assembly=Telerik.Maui.Controls"
    Title="Todo List App">
    ...

2. Ensuite, nous créerons l’interface graphique de l’application à l’aide des commandes suivantes:

• Rampant: Un contrôle pour l’utilisateur pour entrer une nouvelle tâche
• Radbutton: Pour démarrer le processus d’ajouter la tâche à la liste des tâches
• RadcollectionView: Pour afficher les tâches précédemment ajoutées

Le code ressemblerait à ceci:

<ContentPage...>

    <VerticalStackLayout Padding="20" Spacing="20">
        <telerik:RadEntry x:Name="taskEntry" Placeholder="Enter a task..." />
        <telerik:RadButton Clicked="OnAddTaskClicked" Text="Add Task" />
        <telerik:RadCollectionView
            x:Name="taskCollectionView"
            HeightRequest="300"
            ItemsSource="{x:Static local:MainPage.Tasks}"
            SelectionMode="None">
            <telerik:RadCollectionView.ItemTemplate>
                <DataTemplate>
                    <Label FontSize="16" Text="{Binding}" />
                </DataTemplate>
            </telerik:RadCollectionView.ItemTemplate>
        </telerik:RadCollectionView>
    </VerticalStackLayout>

</ContentPage>    

D’un autre côté, le fichier de code et de code – dans mon exemple MainPage.xaml.cs– aurait d’abord ressembler à ceci:

using CommunityToolkit.Maui.Core;
using System.Collections.ObjectModel;
using System.Threading;

namespace AlertsDemo
{
    public partial class MainPage : ContentPage
    {
        public static ObservableCollection<string> Tasks { get; } = new ObservableCollection<string>();

        public MainPage()
        {
            InitializeComponent();
        }

        private async void OnAddTaskClicked(object sender, EventArgs e)
        {
            string task = taskEntry.Text?.Trim();

            if (!string.IsNullOrEmpty(task))
            {                
                Tasks.Add(task);                
                taskEntry.Text = string.Empty;               
            }
            else
            {               
            }
        }
    }
}

Si nous exécutons l’application avec les modifications précédentes, vous verrez un résultat comme ce qui suit:

Dans l’image ci-dessus, j’ai ajouté quelques tâches à la liste. Cependant, vous pouvez voir qu’il n’y a pas de notifications pour savoir que la tâche a été ajoutée avec succès, ni pour avertir l’utilisateur qu’il a oublié de saisir le texte de la tâche avant d’appuyer sur le Ajouter une tâche bouton. Implémentons ces notifications à l’aide des alertes de boîte à outils communautaires .net Maui.

Le premier type d’alerte que nous examinerons est la barre des collations, qui est un type d’alerte qui apparaît par défaut en bas de l’écran pour la durée que nous définissons. Notez que pour utiliser cette alerte sur Android et iOS, aucune modification supplémentaire n’est requise. Cependant, pour Windows, vous devez d’abord configurer le MauiProgram.cs Fichier pour activer les snackbars sur Windows, comme indiqué ci-dessous:

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .UseMauiCommunityToolkit(options =>
            {
                options.SetShouldEnableSnackbarOnWindows(true);
            })
            ...            
    }
}

Ensuite, modifiez le fichier situé dans votre projet | Platforms | Windows | Package.appmanifest en l’ouvrant avec le Éditeur XML (texte) Pour ajouter les espaces de noms suivants:

<Package
  ...
  xmlns:com="http://schemas.microsoft.com/appx/manifest/com/windows10"
  xmlns:desktop="http://schemas.microsoft.com/appx/manifest/desktop/windows10">

Dans cette même balise, localisez le IgnorableNamespaces Attribuez-le et mettez-le comme suit:

IgnorableNamespaces="uap rescap com desktop"

Enfin, dans chacun Applications tag, ajouter un Extensions Section comme indiqué ci-dessous:

<Applications>
    <Application Id="App" Executable="$targetnametoken$.exe" EntryPoint="$targetentrypoint$">
        <uap:VisualElements
            ... />
        </uap:VisualElements>
        
        <Extensions>
            
            <desktop:Extension Category="windows.toastNotificationActivation">
                <desktop:ToastNotificationActivation ToastActivatorCLSID="6e919706-2634-4d97-a93c-2213b2acc334" />
            </desktop:Extension>

            
            <com:Extension Category="windows.comServer">
                <com:ComServer>
                    <com:ExeServer Executable="YOUR-PATH-TO-EXECUTABLE" DisplayName="$targetnametoken$" Arguments="----AppNotificationActivated:">
                        
                        <com:Class Id="6e919706-2634-4d97-a93c-2213b2acc334" />
                    </com:ExeServer>
                </com:ComServer>
            </com:Extension>
        </Extensions>

    </Application>
</Applications>

Dans le code ci-dessus, remplacez YOUR-PATH-TO-EXECUTABLE avec un chemin valide. Dans mon cas, le chemin est AlertsDemo\AlertsDemo.exe.

Après avoir configuré le projet Windows, voyons comment afficher des snackbars.

Affichage d’une barre de colonne

Pour afficher une barre de snack, vous devez le faire à partir du code C #. Les propriétés que vous pouvez configurer pour une barre de snack sont les suivantes:

• Texte (String): le texte à afficher à l’utilisateur (Requis)
• Action (Action): une action à exécuter lorsque le bouton Snackbar est cliqué
• Actionbuttontext (String): le texte affiché sur le bouton Snackbar
• Ancre (IView): Si une ancre est spécifiée, la barre des collations apparaîtra près de la vue spécifiée. Sinon, il apparaîtra en bas de l’écran
• Durée (Timespan): la durée de la barre des collations à l’écran
• Visualoptions (SnackbarOptions): Options visuelles pour la barre des collations

Basé sur les propriétés ci-dessus, à la fin du OnAddTaskClicked gestionnaire d’événements, vous pouvez créer un Snackbar Objet comme suit:

CancellationTokenSource cancellationTokenSource = new CancellationTokenSource();
if (!string.IsNullOrEmpty(task))
{
    Tasks.Add(task);
    taskEntry.Text = string.Empty;

    var snackbar = new Snackbar()
    {
        Text = "Task added",
        ActionButtonText = "Undo",
        Action = async () =>
        {
            Tasks.Remove(task);
        },
        Duration = TimeSpan.FromSeconds(5),
        Anchor = taskEntry
    };    
}

Dans le code ci-dessus, nous avons défini une action pour annuler l’ajout de la tâche à travers le Action propriété. Nous avons également précisé que la barre des collations restera pendant 5 secondes et apparaîtra près du TaskEntry contrôle. Enfin, nous devons appeler le Show Méthode pour afficher la barre des collations comme suit:

await snackbar.Show(cancellationTokenSource.Token);

Lorsque vous exécutez l’application, le SnackBar apparaîtra lors de l’ajout d’une nouvelle tâche près de la vue spécifiée, permettant à l’ajout de tâche d’être annulé:

Simplifier la création de snackbar

Le Snackbar La classe a un Make Méthode qui permet de passer une série de paramètres pour éviter de créer une instance du Snackbar Type, permettant un affichage plus rapide des cassettes. Dans notre exemple de code, nous voulons afficher un message lorsque l’utilisateur oublie de saisir une tâche avant d’appuyer sur le Ajouter une tâche bouton. Cela peut être fait en utilisant le Make Méthode comme suit:

else
{
    var snackbar = Snackbar.Make("Please enter a task",                    
        duration: TimeSpan.FromSeconds(2), 
        anchor: taskEntry);
    await snackbar.Show(cancellationTokenSource.Token);
}

Le code ci-dessus montre comment nous avons évité de créer le Snackbar Par exemple, permettant un affichage plus rapide de snackbars.

Personnalisation du snackbar

Vous devez savoir que les snackbars peuvent également être personnalisés en utilisant une instance du SnackbarOptions Type, qui a les propriétés suivantes:

• Espacement des caractères (double): pour spécifier l’espacement des caractères
• Fonte (Police): Pour modifier la police du message Snackbar
• Textère (Couleur): Pour changer la couleur du texte de la snackbar
• Actionbuttonfont (Police): pour modifier la police du bouton de snackbar
• ActionButtonTextColor (Couleur): Pour spécifier la couleur du texte du bouton de snackbar
• Fond de fond (Couleur): pour attribuer la couleur d’arrière-plan de la snackbar
• Cornerradius (Cornerradius): pour modifier l’arrondi de la snackbar

Un exemple de définition SnackbarOptions Et l’attribuer à une barre de snack peut être vu ci-dessous:

else
{
    var snackbarOptions = new SnackbarOptions
    {
        BackgroundColor = Colors.DarkGreen,
        TextColor = Colors.White,
        ActionButtonTextColor = Colors.Yellow,
        CornerRadius = new CornerRadius(4),
        Font = Microsoft.Maui.Font.SystemFontOfSize(14),
        ActionButtonFont = Microsoft.Maui.Font.SystemFontOfSize(14),
        CharacterSpacing = 0.5
    };
    var snackbar = Snackbar.Make("Please enter a task",                    
        duration: TimeSpan.FromSeconds(2), 
        anchor: taskEntry,
        visualOptions: snackbarOptions);
    await snackbar.Show(cancellationTokenSource.Token);
}

Lors de l’exécution de l’application avec les modifications attribuées au Snackbar, vous verrez ce qui suit:

Regardons maintenant d’autres méthodes et événements utiles disponibles dans la barre des collations.

Autres méthodes et événements de snackbar

Auparavant, vous avez vu l’utilisation du Show Méthode pour afficher la barre des collations. Si vous appelez le Show Méthode Bien qu’une barre de snack soit déjà à l’écran, elle sera rejetée pour afficher le nouveau snackbar. De même, si vous souhaitez rejeter une barre de snack via le code, vous pouvez le faire en utilisant le Dismiss méthode.

Enfin, il est important de savoir que vous pouvez vous abonner au Shown et Dismiss Événements, le premier à effectuer une action lorsque la barre des collations est affichée, et la seconde pour effectuer une action lorsque la barre de snack est rejetée.

Le deuxième type d’alerte que vous pouvez utiliser grâce à la boîte à outils communautaire .net Maui est l’alerte de toast. Il s’agit d’une alerte qui apparaît en bas de l’écran mais, contrairement à une barre de collation, disparaît automatiquement après l’heure spécifiée. Une autre caractéristique des toasts est qu’ils n’ont pas de propriétés de personnalisation comme les snackbars, donc la conception sera toujours la même.

Les propriétés d’un toast sont les suivantes:

• Texte (String): définit le texte affiché dans le toast
• Durée (ToastDuration): Spécifie l’heure à laquelle le toast sera à l’écran, avec des valeurs possibles ToastDuration.Short pendant 2 secondes et ToastDuration.Long pendant 3,5 secondes
• Texting (Double): Définit la taille de la police

Comme avec une barre de collation, il est possible de créer une instance de la classe de toast ou d’utiliser le Make Méthode pour le créer, comme démontré dans l’extrait de code suivant:

if (!string.IsNullOrEmpty(task))
{
    Tasks.Add(task);
    taskEntry.Text = string.Empty;
    
    string text = "Task added";
    ToastDuration duration = ToastDuration.Short;
    double fontSize = 16;

    var toast = Toast.Make(text, duration, fontSize);

    await toast.Show(cancellationTokenSource.Token);
}

Lorsque vous exécutez l’application avec le code ci-dessus, vous obtenez ce qui suit:

Enfin, il est possible d’utiliser le Dismiss Méthode pour masquer le toast si vous avez besoin de le faire via le code.

Conclusion

Grâce à cet article, vous avez appris les types d’alertes disponibles dans la boîte à outils communautaire .net Maui, qui vous permettent d’informer les utilisateurs que quelque chose se passe sans interrompre le flux d’application. Il est temps de réserver DisplayAlerts et de passer à des collines ou des toasts.