Snackbar

Snackbar ist eine zeitlich festgelegte Warnung, die standardmäßig unten auf dem Bildschirm angezeigt wird. Sie wird nach einer konfigurierbaren Zeitdauer geschlossen. Snackbar ist vollständig anpassbar und kann an jeder IView verankert werden.

Die Snackbar-Benutzer informieren die Benutzer über einen Prozess, dass eine App ausgeführt oder ausgeführt wird. Er wird vorübergehend bis zum unteren Rand des Bildschirms angezeigt.

Plattformspezifische Initialisierung

Um auf die Funktion Snackbar zugreifen zu können, ist die folgende plattformspezifische Einrichtung erforderlich.

Android

Es ist kein Setup erforderlich.

iOS/Mac Catalyst

Es ist kein Setup erforderlich.

Windows

Bei der Verwendung von Snackbar ist es wichtig, die folgenden beiden Schritte auszuführen:

1. Aktivieren der Snackbar-Nutzung mit dem MauiAppBuilder

Bei Verwendung von UseMauiCommunityToolkit verwenden Sie den Parameter options, um die Verwendung der Snackbar unter Windows wie folgt zu aktivieren:

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

Im obigen Abschnitt werden die erforderlichen Handler automatisch registriert, indem Lebenszyklusereignisse (OnLaunched und OnClosed) konfiguriert werden.

2. Einfügen von ToastNotification-Registrierungen in Ihre Package.appxmanifest-Datei

Um die Snackbar-Aktionen zu behandeln, müssen Sie die Platform\Windows\Package.appxmanifest-Datei wie folgt ändern:

1. Fügen Sie in Package.appxmanifest im öffnenden <Package>-Tag die folgenden XML-Namespaces hinzu:

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

2. Aktualisieren Sie in Package.appxmanifest, auch im öffnenden <Package>-Tag, IgnorableNamespaces, um uaprescapcom und desktop aufzunehmen:

IgnorableNamespaces="uap rescap com desktop"

Beispiel: <Package>-Tag abgeschlossen

Nachfolgend sehen Sie ein Beispiel für ein abgeschlossenes Eröffnungstag <Package>, das zusätzliche Unterstützung für Snackbar bietet:

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

3. Fügen Sie in Package.appxmanifest innerhalb jedes <Application>-Tags die folgenden Erweiterungen hinzu:

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

Beispiel: <Applications>-Tag abgeschlossen

Nachfolgend sehen Sie ein Beispiel für ein abgeschlossenes <Applications>-Tag, das nun zusätzliche Unterstützung für Snackbar bietet:

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

Beispiel: Package.appxmanifest Datei zur Unterstützung von Snackbar aktualisiert

Nachfolgend finden Sie eine Beispieldatei Package.appxmanifest, die für die Unterstützung von Snackbar unter Windows aktualisiert wurde:

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

Weitere Informationen zur Behandlung der Aktivierung: Senden einer lokalen Popupbenachrichtigung aus C#-Apps

Tizen

Es ist kein Setup erforderlich.

Syntax

Snackbar wird mit C# aufgerufen.

C#

Zum Anzeigen von Snackbar müssen Sie sie mithilfe der statischen Methode Makeerstellen:

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

Beim Aufrufen von Snackbar.Make() ist der Parameter string text erforderlich. Alle anderen Parameter sind optional.

Der folgende Screenshot zeigt die resultierende Snackbar:

Android

iOS

Es gibt auch eine Erweiterungsmethode, die die Snackbar an eine beliebige VisualElement verankert:

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

Warnung

Snackbar unter Windows kann nicht mit VisualElement verankert werden und wird immer als Standard-Windows-Benachrichtigung angezeigt.

SnackBar enthält zwei Ereignisse:

• public static event EventHandler Shown
• public static event EventHandler Dismissed

Sie enthält auch die Eigenschaft public static bool IsShown { get; }.

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

Eigenschaften

Eigenschaft	Typ	BESCHREIBUNG
Text	string	Textnachricht: Erforderlich
Aktion	Action	Aktion, die beim Klicken auf interaktive Schaltflächen aufgerufen werden soll.
ActionButtonText	string	Text der Aktionsschaltfläche.
Anchor	IView	Snackbar-Anker. Snackbar wird in der Nähe dieser Ansicht angezeigt. Bei null wird die Snackbar am unteren Rand des Bildschirms angezeigt.
Duration	TimeSpan	Snackbar Dauer.
VisualOptions	SnackbarOptions	Snackbar visuelle Optionen.

SnackbarOptions

SnackbarOptions ermöglicht das Anpassen des Standardstils Snackbar .

Eigenschaften

Eigenschaft	Typ	BESCHREIBUNG	Standardwert
CharacterSpacing	double	Nachrichtenzeichenabstand.	0.0d
Schriftart	Font	Nachrichtenschriftart.	Font.SystemFontOfSize(14)
TextColor	Color	Textfarbe der Nachricht.	Colors.Black
ActionButtonFont	Font	Schriftart der Interaktiven Schaltfläche.	Font.SystemFontOfSize(14)
ActionButtonTextColor	Color	Textfarbe der Interaktiven Schaltfläche.	Colors.Black
BackgroundColor	Color	Hintergrundfarbe.	Colors.LightGray
CornerRadius	CornerRadius	Eckradius.	new CornerRadius(4, 4, 4, 4)

Methoden

Methode	Beschreibung
Anzeigen	Anzeigen der angeforderten Snackbar. Dadurch werden alle aktuell angezeigten Snackbar geschlossen.
Schließen	Schließen Sie die angeforderte Snackbar.

Hinweis

Sie können nur 1 Snackbar gleichzeitig anzeigen. Wenn Sie die Show-Methode ein zweites Mal aufrufen, wird das erste Snackbar automatisch geschlossen, bevor die zweite Snackbar angezeigt wird.

Beispiele

Sie finden ein Beispiel für dieses Feature in Aktion in der Beispielanwendung für das .NET MAUI Community Toolkit.

API

Sie finden den Quellcode für Snackbar über das GitHub-Repository für das .NET MAUI Community Toolkit.