Элемент Snackbar

Статья
03/29/2024

Это Snackbar оповещение по времени, которое по умолчанию отображается в нижней части экрана. Оно закрывается после настраиваемой длительности времени. Snackbar полностью настраивается и может быть привязан к любому IView.

Сообщает Snackbar пользователям о том, что приложение выполнило или выполнит его. Он отображается временно в нижней части экрана.

Инициализация конкретной платформы

Для доступа к Snackbar функциям требуется следующая настройка для конкретной платформы.

Никакой настройки для этого не требуется.

При использовании Snackbar необходимо выполнить следующие два шага:

1. Включение использования закусочных с помощью MauiAppBuilder

При использовании UseMauiCommunityToolkitoptions параметра для включения использования закусочных панели в Windows следующим образом:

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

Приведенный выше параметр автоматически регистрирует необходимые обработчики путем настройки событий жизненного цикла (OnLaunched и OnClosed).

2. Включите регистрации ToastNotification в файл Package.appxmanifest

Чтобы обработать действия с перекуской, необходимо изменить Platform\Windows\Package.appxmanifest файл следующим образом:

В package.appxmanifest в открываемом <Package> теге добавьте следующие пространства имен XML:

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

В Package.appxmanifest также в открываемом <Package> теге обновите, IgnorableNamespaces чтобы включитьcomuaprescapиdesktop:

IgnorableNamespaces="uap rescap com desktop"

Пример: завершенный `<Package>` тег

Ниже приведен пример завершенного открывающего <Package> тега, который добавил поддержку для 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">

В Package.appxmanifest внутри каждого <Application> тега добавьте следующие расширения:

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

Пример: завершенный `<Applications>` тег

Ниже приведен пример завершенного <Applications> тега, который теперь добавил поддержку для 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>

Пример: обновленный `Package.appxmanifest` файл для поддержки `Snackbar`

Ниже приведен пример Package.appxmanifest файла, который был обновлен для поддержки Snackbar в 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>

Дополнительные сведения об обработке активации: отправка локального всплывающего уведомления из приложений C#

Синтаксис

Вызывается Snackbar с помощью C#.

C#

Чтобы отобразить Snackbar его, используйте статический метод 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);

При вызове Snackbar.Make()его параметр string text является обязательным. Все остальные параметры являются необязательными.

На следующем снимка экрана показана результирующая панель перекусок:

Android
iOS

Снимок экрана: Панель закусок на Android

Существует также метод расширения, который привязыт Snackbar к любому VisualElement:

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

Предупреждение

Snackbar в Windows нельзя привязать VisualElement к ней и всегда отображается как уведомление Windows по умолчанию.

SnackBar содержит два события:

public static event EventHandler Shown
public static event EventHandler Dismissed

Он также содержит свойство public static bool IsShown { get; }.

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

Свойства

Свойство	Type	Описание
Текст	`string`	Текстовое сообщение. Обязательный
Действие	`Action`	Действие для вызова кнопки действия.
ActionButtonText	`string`	Текст кнопки действия.
Привязка	`IView`	`Snackbar` Якорь. `Snackbar` отображается рядом с этим представлением. Когда `null`, `Snackbar` появится в нижней части экрана.
Длительность	`TimeSpan`	`Snackbar` Длительность.
VisualOptions	`SnackbarOptions`	`Snackbar` визуальные параметры.

SnackbarOptions

Позволяет SnackbarOptions настроить стиль по умолчанию Snackbar .

Свойства

Свойство	Type	Описание	Default value
CharacterSpacing	`double`	Интервалы символов сообщения.	`0.0d`
Шрифт	`Font`	Шрифт сообщения.	`Font.SystemFontOfSize(14)`
TextColor	`Color`	Цвет текста сообщения.	`Colors.Black`
ActionButtonFont	`Font`	Шрифт кнопки действия.	`Font.SystemFontOfSize(14)`
ActionButtonTextColor	`Color`	Цвет текста кнопки действия.	`Colors.Black`
BackgroundColor	`Color`	Цвет фона.	`Colors.LightGray`
CornerRadius	`CornerRadius`	Радиус угла.	`new CornerRadius(4, 4, 4, 4)`

Методы

Метод	Description
Отображение	Отображение запрошенного `Snackbar`. Это приведет к закрытию любого отображаемого в настоящее время `Snackbar`
Закрыть	Закройте запрошенный `Snackbar`запрос.

Примечание.

Одновременно можно отобразить только 1 Snackbar . При вызове Show метода во второй раз первый Snackbar будет автоматически отклонен до отображения второго Snackbar метода.

Примеры

Пример этой функции можно найти в действии в сообществе .NET MAUI набор средств пример приложения.

API

Исходный код Snackbar можно найти в репозитории сообщества .NET MAUI набор средств GitHub.

Поделиться через

Элемент Snackbar

Инициализация конкретной платформы

1. Включение использования закусочных с помощью MauiAppBuilder

2. Включите регистрации ToastNotification в файл Package.appxmanifest

Пример: завершенный `<Package>` тег

Пример: завершенный `<Applications>` тег

Пример: обновленный `Package.appxmanifest` файл для поддержки `Snackbar`

Синтаксис

C#

Свойства

SnackbarOptions

Свойства

Методы

Примеры

API

Обратная связь

Дополнительные ресурсы