Элемент Snackbar
Статья 03/29/2024
Участники: 5
Обратная связь
В этой статье
Это Snackbar
оповещение по времени, которое по умолчанию отображается в нижней части экрана. Оно закрывается после настраиваемой длительности времени. Snackbar
полностью настраивается и может быть привязан к любому IView
.
Сообщает Snackbar
пользователям о том, что приложение выполнило или выполнит его. Он отображается временно в нижней части экрана.
Для доступа к Snackbar
функциям требуется следующая настройка для конкретной платформы.
Никакой настройки для этого не требуется.
Никакой настройки для этого не требуется.
При использовании Snackbar
необходимо выполнить следующие два шага:
1. Включение использования закусочных с помощью MauiAppBuilder
При использовании UseMauiCommunityToolkit
options
параметра для включения использования закусочных панели в 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
чтобы включить com
uap
rescap
и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
является обязательным. Все остальные параметры являются необязательными.
На следующем снимка экрана показана результирующая панель перекусок:
Существует также метод расширения, который привязыт 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
появится в нижней части экрана.
Duration
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 Community Toolkit.
API
Исходный код Snackbar
можно найти в репозитории .NET MAUI Community Toolkit GitHub.