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 Makestatis :
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 Shownpublic 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
stringSMS. Diperlukan
Perbuatan
ActionTindakan yang akan dipanggil pada klik tombol tindakan.
ActionButtonText
stringTeks tombol tindakan.
Jangkar
IViewSnackbar jangkar. Snackbar muncul di dekat tampilan ini. Ketika null, Snackbar akan muncul di bagian bawah layar.
Durasi
TimeSpanSnackbar durasi.
VisualOptions
SnackbarOptionsSnackbar opsi visual.
SnackbarOptions
memungkinkan SnackbarOptions kustomisasi gaya default Snackbar .
Properti
Properti
Tipe
Deskripsi
Nilai default
CharacterSpacing
doublePenspasian karakter pesan.
0.0d
Font
FontFont pesan.
Font.SystemFontOfSize(14)
Warna Teks
ColorWarna teks pesan.
Colors.Black
ActionButtonFont
FontFont tombol tindakan.
Font.SystemFontOfSize(14)
ActionButtonTextColor
ColorWarna teks tombol tindakan.
Colors.Black
BackgroundColor
ColorWarna latar belakang.
Colors.LightGray
CornerRadius
CornerRadiusRadius 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.
