Bandeau

Article
04/03/2024

Snackbar est une alerte périodique qui s’affiche au bas de l’écran par défaut. Elle disparaît au bout d’un certain temps configurable. Snackbar est entièrement personnalisable et peut être ancré à n’importe quel élément IView.

Le Snackbar informe les utilisateurs d’un processus qu’une application a effectué ou effectuera. Il apparaît temporairement, vers le bas de l’écran.

Initialisation spécifique à la plateforme

Pour accéder à la fonctionnalité Snackbar, vous devez appliquer la configuration spécifique à la plateforme suivante.

Aucune configuration n’est requise.

Lorsque vous utilisez Snackbar, il est essentiel d’effectuer les deux étapes suivantes :

1. Activer l’utilisation de Snackbar avec MauiAppBuilder

Lorsque vous utilisez le UseMauiCommunityToolkit, utilisez le paramètre options pour activer l’utilisation de Snackbar sur Windows comme suit :

var builder = MauiApp.CreateBuilder()
  .UseMauiCommunityToolkit(options =>
  {
    options.SetShouldEnableSnackbarOnWindows(true);
  })

Le code ci-dessus inscrit automatiquement les gestionnaires requis en configurant les événements de cycle de vie (OnLaunched et OnClosed).

2. Inclure les inscriptions ToastNotification dans votre fichier Package.appxmanifest

Pour gérer les actions de Snackbar, vous devez modifier le fichier Platform\Windows\Package.appxmanifest comme suit :

Dans Package.appxmanifest, dans la balise <Package> d’ouverture, ajoutez les espaces de noms XML suivants :

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

Dans Package.appxmanifest, toujours dans la balise d’ouverture <Package>, mettez à jour IgnorableNamespaces pour inclure uap rescap com et desktop :

IgnorableNamespaces="uap rescap com desktop"

Exemple : balise `<Package>` terminée

Voici un exemple de balise d’ouverture <Package> terminée qui prend en charge Snackbar :

<Package
     xmlns="http://schemas.microsoft.com/appx/manifest/foundation/windows10"
     xmlns:uap="http://schemas.microsoft.com/appx/manifest/uap/windows10"
     xmlns:rescap="http://schemas.microsoft.com/appx/manifest/foundation/windows10/restrictedcapabilities"
     xmlns:com="http://schemas.microsoft.com/appx/manifest/com/windows10"
     xmlns:desktop="http://schemas.microsoft.com/appx/manifest/desktop/windows10"
     IgnorableNamespaces="uap rescap com desktop">

Dans Package.appxmanifest, à l’intérieur de chaque balise <Application>, ajoutez les extensions suivantes :

<Extensions>

   <!-- Specify which CLSID to activate when notification is clicked -->
   <desktop:Extension Category="windows.toastNotificationActivation">
       <desktop:ToastNotificationActivation ToastActivatorCLSID="6e919706-2634-4d97-a93c-2213b2acc334" />
   </desktop:Extension>

   <!-- Register COM CLSID -->
   <com:Extension Category="windows.comServer">
       <com:ComServer>
           <com:ExeServer Executable="YOUR-PATH-TO-EXECUTABLE" DisplayName="$targetnametoken$" Arguments="----AppNotificationActivated:"> <!-- Example path to executable: CommunityToolkit.Maui.Sample\CommunityToolkit.Maui.Sample.exe -->
               <com:Class Id="6e919706-2634-4d97-a93c-2213b2acc334" />
           </com:ExeServer>
       </com:ComServer>
   </com:Extension>

</Extensions>

Exemple : balise `<Applications>` terminée

Voici un exemple de balise <Applications> terminée qui prend désormais en charge Snackbar :

<Applications>
  <Application Id="App" Executable="$targetnametoken$.exe" EntryPoint="$targetentrypoint$">
      <uap:VisualElements
          DisplayName="$placeholder$"
          Description="$placeholder$"
          Square150x150Logo="$placeholder$.png"
          Square44x44Logo="$placeholder$.png"
          BackgroundColor="transparent">
           <uap:DefaultTile Square71x71Logo="$placeholder$.png" Wide310x150Logo="$placeholder$.png" Square310x310Logo="$placeholder$.png" />
           <uap:SplashScreen Image="$placeholder$.png" />
       </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:"> <!-- Example path to executable: CommunityToolkit.Maui.Sample\CommunityToolkit.Maui.Sample.exe -->
                     <com:Class Id="6e919706-2634-4d97-a93c-2213b2acc334" />
                  </com:ExeServer>
              </com:ComServer>
          </com:Extension>

       </Extensions>
   </Application>
</Applications>

Exemple : fichier `Package.appxmanifest` mis à jour pour prendre en charge `Snackbar`

Voici un exemple de fichier Package.appxmanifest mis à jour pour prendre en charge Snackbar sur Windows :

<?xml version="1.0" encoding="utf-8"?>
<Package
    xmlns="http://schemas.microsoft.com/appx/manifest/foundation/windows10"
    xmlns:uap="http://schemas.microsoft.com/appx/manifest/uap/windows10"
    xmlns:rescap="http://schemas.microsoft.com/appx/manifest/foundation/windows10/restrictedcapabilities"
    xmlns:com="http://schemas.microsoft.com/appx/manifest/com/windows10"
    xmlns:desktop="http://schemas.microsoft.com/appx/manifest/desktop/windows10"
    IgnorableNamespaces="uap rescap com desktop">

    <Identity Name="maui-package-name-placeholder" Publisher="CN=Microsoft" Version="0.0.0.0" />

    <Properties>
        <DisplayName>$placeholder$</DisplayName>
        <PublisherDisplayName>Microsoft</PublisherDisplayName>
        <Logo>$placeholder$.png</Logo>
    </Properties>

    <Dependencies>
        <TargetDeviceFamily Name="Windows.Universal" MinVersion="10.0.17763.0" MaxVersionTested="10.0.19041.0" />
        <TargetDeviceFamily Name="Windows.Desktop" MinVersion="10.0.17763.0" MaxVersionTested="10.0.19041.0" />
    </Dependencies>

    <Resources>
        <Resource Language="x-generate" />
    </Resources>

    <Applications>
        <Application Id="App" Executable="$targetnametoken$.exe" EntryPoint="$targetentrypoint$">
            <uap:VisualElements
                DisplayName="$placeholder$"
                Description="$placeholder$"
                Square150x150Logo="$placeholder$.png"
                Square44x44Logo="$placeholder$.png"
                BackgroundColor="transparent">
                <uap:DefaultTile Square71x71Logo="$placeholder$.png" Wide310x150Logo="$placeholder$.png" Square310x310Logo="$placeholder$.png" />
                <uap:SplashScreen Image="$placeholder$.png" />
            </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:"> <!-- Example path to executable: CommunityToolkit.Maui.Sample\CommunityToolkit.Maui.Sample.exe -->
                           <com:Class Id="6e919706-2634-4d97-a93c-2213b2acc334" />
                        </com:ExeServer>
                    </com:ComServer>
                </com:Extension>

            </Extensions>
        </Application>
    </Applications>

    <Capabilities>
        <rescap:Capability Name="runFullTrust" />
    </Capabilities>

</Package>

Pour plus d’informations sur la gestion de l’activation, consultez Envoyer une notification toast locale à partir d’applications C#.

Syntaxe

Le Snackbar est appelé à l’aide de C#.

C#

Pour l’afficher Snackbar, vous devez le créer à l’aide de la méthode statique Make :

using CommunityToolkit.Maui.Alerts;

CancellationTokenSource cancellationTokenSource = new CancellationTokenSource();

var snackbarOptions = new SnackbarOptions
{
    BackgroundColor = Colors.Red,
    TextColor = Colors.Green,
    ActionButtonTextColor = Colors.Yellow,
    CornerRadius = new CornerRadius(10),
    Font = Font.SystemFontOfSize(14),
    ActionButtonFont = Font.SystemFontOfSize(14),
    CharacterSpacing = 0.5
};

string text = "This is a Snackbar";
string actionButtonText = "Click Here to Dismiss";
Action action = async () => await DisplayAlert("Snackbar ActionButton Tapped", "The user has tapped the Snackbar ActionButton", "OK");
TimeSpan duration = TimeSpan.FromSeconds(3);

var snackbar = Snackbar.Make(text, action, actionButtonText, duration, snackbarOptions);

await snackbar.Show(cancellationTokenSource.Token);

Lors de l’appel de Snackbar.Make(), son paramètre string text est requis. Tous les autres paramètres sont facultatifs.

La capture d’écran suivante montre le Snackbar résultant :

Android
iOS

Capture d’écran d’un Snackbar sur Android

Il existe également une méthode d’extension, qui ancrera le Snackbar à n’importe quel VisualElement :

await MyVisualElement.DisplaySnackbar("Snackbar is awesome. It is anchored to MyVisualElement");

Avertissement

Snackbar sur Windows ne peut pas être ancré à VisualElement et s’affiche toujours sous la forme d’une notification Windows par défaut.

SnackBar contient deux événements :

public static event EventHandler Shown
public static event EventHandler Dismissed

Il contient également la propriété public static bool IsShown { get; }.

Snackbar.Shown += (s, e) => { Console.WriteLine(Snackbar.IsShown); };
Snackbar.Dismissed += (s, e) => { Console.WriteLine(Snackbar.IsShown); };

Propriétés

Propriété	Type	Description
Texte	`string`	SMS. Obligatoire
Action	`Action`	Action à appeler sur le bouton Action.
ActionButtonText	`string`	Texte du bouton Action.
Ancre	`IView`	`Snackbar` ancre. `Snackbar` apparaît près de cette vue. Lorsque `null`, le `Snackbar` apparaît en bas de l’écran.
Durée	`TimeSpan`	Durée `Snackbar`.
VisualOptions	`SnackbarOptions`	`Snackbar` options visuelles.

SnackbarOptions

Le SnackbarOptions permet de personnaliser le style par défaut Snackbar.

Propriétés

Propriété	Type	Description	Valeur par défaut
CharacterSpacing	`double`	Espacement des caractères de message.	`0.0d`
Police	`Font`	Police du message.	`Font.SystemFontOfSize(14)`
TextColor	`Color`	Couleur du texte du message.	`Colors.Black`
ActionButtonFont	`Font`	Police du bouton Action.	`Font.SystemFontOfSize(14)`
ActionButtonTextColor	`Color`	Couleur de texte du bouton Action.	`Colors.Black`
BackgroundColor	`Color`	Couleur d'arrière-plan.	`Colors.LightGray`
CornerRadius	`CornerRadius`	Rayon de l’angle.	`new CornerRadius(4, 4, 4, 4)`

Méthodes

méthode	Description
Afficher	Affichez le `Snackbar` demandé. Cela ignorera tous les `Snackbar` actuellement affichés
Ignorer	Ignorer le `Snackbar` demandé.

Remarque

Vous ne pouvez afficher que 1 Snackbar en même temps. Si vous appelez la méthode Show une deuxième fois, le premier Snackbar est automatiquement ignoré avant l’affichage du second Snackbar.

Exemples

Vous trouverez un exemple d’utilisation de cette fonctionnalité dans l’exemple d’application du toolkit de la communauté .NET MAUI.

API

Vous pouvez trouver le code source deSnackbar sur le référentiel du kit de ressources de la communauté .NET MAUI sur GitHub.

Partager via

Bandeau

Initialisation spécifique à la plateforme

1. Activer l’utilisation de Snackbar avec MauiAppBuilder

2. Inclure les inscriptions ToastNotification dans votre fichier Package.appxmanifest

Exemple : balise `<Package>` terminée

Exemple : balise `<Applications>` terminée

Exemple : fichier `Package.appxmanifest` mis à jour pour prendre en charge `Snackbar`

Syntaxe

C#

Propriétés

SnackbarOptions

Propriétés

Méthodes

Exemples

API

Ressources supplémentaires