Snackbar

Articolo
04/03/2024

è Snackbar un avviso a tempo visualizzato nella parte inferiore della schermata per impostazione predefinita. Viene ignorato dopo un periodo di tempo configurabile. Snackbar è completamente personalizzabile e può essere ancorato a qualsiasi IViewoggetto .

Informa Snackbar gli utenti di un processo che un'app ha eseguito o eseguirà. Viene visualizzato temporaneamente, verso la parte inferiore dello schermo.

Inizializzazione specifica della piattaforma

Per accedere alla Snackbar funzionalità, è necessaria la configurazione specifica della piattaforma seguente.

Non è richiesta alcuna configurazione.

Quando si usa Snackbar è essenziale eseguire i due passaggi seguenti:

1. Abilitare l'utilizzo dello snackbar con MauiAppBuilder

Quando si usa il UseMauiCommunityToolkit parametro per abilitare l'utilizzo options dello snackbar in Windows, come indicato di seguito:

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

Il codice precedente registrerà automaticamente i gestori necessari configurando gli eventi del ciclo di vita (OnLaunched e OnClosed).

2. Includi registrazioni ToastNotification nel file Package.appxmanifest

Per gestire le azioni snackbar è necessario modificare il Platform\Windows\Package.appxmanifest file come segue:

Nel tag di apertura <Package> di Package.appxmanifest aggiungere gli spazi dei nomi XML seguenti:

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

In Package.appxmanifest, anche nel tag di apertura<Package>, aggiornare IgnorableNamespaces in modo da includere com uap rescap e :desktop

IgnorableNamespaces="uap rescap com desktop"

Esempio: Tag completato `<Package>`

Di seguito è riportato un esempio di tag di apertura <Package> completato che ha aggiunto il supporto per 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">

In Package.appxmanifest, all'interno di ogni <Application> tag, aggiungere le estensioni seguenti:

<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>

Esempio: Tag completato `<Applications>`

Di seguito è riportato un esempio di tag completato <Applications> che ora ha aggiunto il supporto per 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>

Esempio: File aggiornato `Package.appxmanifest` al supporto `Snackbar`

Di seguito è riportato un file di esempio Package.appxmanifest che è stato aggiornato per il supporto Snackbar in 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>

Per altre informazioni sulla gestione dell'attivazione: Inviare una notifica di tipo avviso popup locale dalle app C#

Sintassi

Viene Snackbar richiamato tramite C#.

C#

Per visualizzarla Snackbar , è necessario crearla usando il metodo Makestatico :

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);

Quando si chiama Snackbar.Make(), è necessario il relativo parametro string text . Tutti gli altri parametri sono facoltativi.

Lo screenshot seguente mostra lo Snackbar risultante:

Android
iOS

Screenshot di un snackbar in Android

Esiste anche un metodo di estensione che ancora l'oggetto Snackbar a qualsiasi VisualElement:

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

Avviso

Snackbar in Windows non può essere ancorato a VisualElement e viene sempre visualizzato come notifica di Windows predefinita.

SnackBar contiene due eventi:

public static event EventHandler Shown
public static event EventHandler Dismissed

Contiene anche la proprietà public static bool IsShown { get; }.

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

Proprietà

Proprietà	Type	Descrizione
Testo	`string`	SMS. Obbligatorio
Azione	`Action`	Azione da richiamare sul pulsante azione.
ActionButtonText	`string`	Testo del pulsante azione.
Ancora	`IView`	`Snackbar` ancora. `Snackbar` viene visualizzato vicino a questa visualizzazione. Quando `null`, verrà `Snackbar` visualizzato nella parte inferiore della schermata.
Durata	`TimeSpan`	`Snackbar` durata.
VisualOptions	`SnackbarOptions`	`Snackbar` opzioni visive.

SnackbarOptions

SnackbarOptions consente di personalizzare lo stile predefinitoSnackbar.

Proprietà

Proprietà	Type	Descrizione	Default value
CharacterSpacing	`double`	Spaziatura dei caratteri del messaggio.	`0.0d`
Carattere	`Font`	Tipo di carattere del messaggio.	`Font.SystemFontOfSize(14)`
TextColor	`Color`	Colore del testo del messaggio.	`Colors.Black`
ActionButtonFont	`Font`	Carattere del pulsante Azione.	`Font.SystemFontOfSize(14)`
ActionButtonTextColor	`Color`	Colore del testo del pulsante azione.	`Colors.Black`
BackgroundColor	`Color`	Colore di sfondo.	`Colors.LightGray`
CornerRadius	`CornerRadius`	Raggio dell'angolo.	`new CornerRadius(4, 4, 4, 4)`

Metodi

metodo	Descrizione
Mostra	Visualizzare l'oggetto richiesto `Snackbar`. In questo modo verranno ignorati tutti gli eventuali elementi attualmente visualizzati `Snackbar`
Elimina	Ignorare l'oggetto richiesto `Snackbar`.

Nota

È possibile visualizzare solo 1 Snackbar contemporaneamente. Se si chiama il Show metodo una seconda volta, il primo Snackbar verrà ignorato automaticamente prima che venga visualizzato il secondo Snackbar .

Esempi

È possibile trovare un esempio di questa funzionalità in azione nell'applicazione di esempio .NET MAUI Community Toolkit.

API

È possibile trovare il codice sorgente per Snackbar over nel repository GitHub di .NET MAUI Community Toolkit.

Condividi tramite

Snackbar

Inizializzazione specifica della piattaforma

1. Abilitare l'utilizzo dello snackbar con MauiAppBuilder

2. Includi registrazioni ToastNotification nel file Package.appxmanifest

Esempio: Tag completato `<Package>`

Esempio: Tag completato `<Applications>`

Esempio: File aggiornato `Package.appxmanifest` al supporto `Snackbar`

Sintassi

C#

Proprietà

SnackbarOptions

Proprietà

Metodi

Esempi

API

Risorse aggiuntive