Snackbar
Artikel 03/29/2024
5 kontributor
Saran dan Komentar
Dalam artikel ini
Snackbar
adalah pemberitahuan berwakli yang muncul di bagian bawah layar secara default. Ini diberhentikan setelah durasi waktu yang dapat dikonfigurasi. Snackbar
sepenuhnya dapat disesuaikan dan dapat berlabuh ke apa pun IView
.
Menginformasikan Snackbar
kepada pengguna tentang proses yang telah dilakukan atau akan dilakukan aplikasi. Muncul sementara, menuju bagian bawah layar.
Untuk mengakses Snackbar
fungsionalitas, diperlukan penyiapan khusus platform berikut.
Tidak diperlukan penyiapan lain.
Tidak diperlukan penyiapan lain.
Saat menggunakannya Snackbar
, penting untuk melakukan dua langkah berikut:
1. Aktifkan penggunaan snackbar dengan MauiAppBuilder
Saat menggunakan UseMauiCommunityToolkit
options
memanfaatkan parameter untuk mengaktifkan penggunaan snackbar di Windows sebagai berikut:
var builder = MauiApp.CreateBuilder()
.UseMauiCommunityToolkit(options =>
{
options.SetShouldEnableSnackbarOnWindows(true);
})
Hal di atas akan secara otomatis mendaftarkan handler yang diperlukan dengan mengonfigurasi peristiwa siklus hidup (OnLaunched
dan OnClosed
).
2. Sertakan pendaftaran ToastNotification dalam file Package.appxmanifest Anda
Untuk menangani tindakan snackbar, Anda harus memodifikasi Platform\Windows\Package.appxmanifest
file sebagai berikut:
Di Package.appxmanifest , di tag pembuka <Package>
, tambahkan Namespace XML berikut:
xmlns:com="http://schemas.microsoft.com/appx/manifest/com/windows10"
xmlns:desktop="http://schemas.microsoft.com/appx/manifest/desktop/windows10"
Di Package.appxmanifest , juga dalam tag pembuka<Package>
, perbarui IgnorableNamespaces
untuk menyertakan com
uap
rescap
dan :desktop
IgnorableNamespaces="uap rescap com desktop"
Contoh: Tag Selesai <Package>
Berikut adalah contoh tag pembukaan <Package>
lengkap yang telah menambahkan dukungan untuk 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">
Di Package.appxmanifest , di dalam setiap <Application>
tag, tambahkan ekstensi berikut:
<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>
Contoh: Tag selesai <Applications>
Berikut adalah contoh tag lengkap <Applications>
yang sekarang telah menambahkan dukungan untuk 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>
Contoh: File yang Diperbarui Package.appxmanifest
ke Dukungan Snackbar
Di bawah ini adalah contoh Package.appxmanifest
file yang telah diperbarui untuk didukung Snackbar
di 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>
Untuk informasi selengkapnya tentang menangani aktivasi: Mengirim pemberitahuan toast lokal dari aplikasi C#
Tidak diperlukan penyiapan lain.
Sintaks
Snackbar
dipanggil menggunakan C#.
C#
Untuk menampilkan Snackbar
, Anda perlu membuatnya, menggunakan metode Make
statis :
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);
Saat memanggil Snackbar.Make()
, parameternya string text
diperlukan. Semua parameter bersifat opsional.
Cuplikan layar berikut menunjukkan Snackbar yang dihasilkan:
Ada juga metode ekstensi, yang akan menjangkar ke Snackbar
:VisualElement
await MyVisualElement.DisplaySnackbar("Snackbar is awesome. It is anchored to MyVisualElement");
Peringatan
Snackbar
pada Windows tidak dapat berlabuh ke VisualElement
dan selalu ditampilkan sebagai Pemberitahuan Windows default.
SnackBar
berisi dua peristiwa:
public static event EventHandler Shown
public static event EventHandler Dismissed
Ini juga berisi properti public static bool IsShown { get; }
.
Snackbar.Shown += (s, e) => { Console.WriteLine(Snackbar.IsShown); };
Snackbar.Dismissed += (s, e) => { Console.WriteLine(Snackbar.IsShown); };
Properti
Properti
Tipe
Deskripsi
SMS
string
SMS. Diperlukan
Perbuatan
Action
Tindakan yang akan dipanggil pada klik tombol tindakan.
ActionButtonText
string
Teks tombol tindakan.
Jangkar
IView
Snackbar
jangkar. Snackbar
muncul di dekat tampilan ini. Ketika null
, Snackbar
akan muncul di bagian bawah layar.
Durasi
TimeSpan
Snackbar
durasi.
VisualOptions
SnackbarOptions
Snackbar
opsi visual.
SnackbarOptions
memungkinkan SnackbarOptions
kustomisasi gaya default Snackbar
.
Properti
Properti
Tipe
Deskripsi
Nilai default
CharacterSpacing
double
Penspasian karakter pesan.
0.0d
Font
Font
Font pesan.
Font.SystemFontOfSize(14)
Warna Teks
Color
Warna teks pesan.
Colors.Black
ActionButtonFont
Font
Font tombol tindakan.
Font.SystemFontOfSize(14)
ActionButtonTextColor
Color
Warna teks tombol tindakan.
Colors.Black
BackgroundColor
Color
Warna latar belakang.
Colors.LightGray
CornerRadius
CornerRadius
Radius sudut.
new CornerRadius(4, 4, 4, 4)
Metode
Metode
Deskripsi
tampilkan
Tampilkan yang diminta Snackbar
. Ini akan mengalihkan semua yang saat ini ditampilkan Snackbar
Tutup
Tutup yang diminta Snackbar
.
Catatan
Anda hanya dapat menampilkan 1 Snackbar
secara bersamaan. Jika Anda memanggil metode untuk kedua kalinya Show
, metode pertama Snackbar
akan secara otomatis diberhentikan sebelum yang kedua Snackbar
ditampilkan.
Contoh
Anda dapat menemukan contoh fitur ini dalam tindakan di Aplikasi Sampel Toolkit Komunitas .NET MAUI.
API
Anda dapat menemukan kode sumber untuk Snackbar
lebih pada repositori GitHub .NET MAUI Community Toolkit.