Bagikan melalui

Popup

Popup adalah cara umum untuk menyajikan informasi kepada pengguna yang berkaitan dengan tugas mereka saat ini. Sistem operasi menyediakan cara untuk menampilkan pesan dan memerlukan respons dari pengguna, pemberitahuan ini biasanya membatasi dalam hal konten yang dapat disediakan pengembang dan juga tata letak dan tampilan.

Catatan

Jika Anda ingin menyajikan sesuatu kepada pengguna yang lebih halang maka lihat opsi Toast dan Snackbar kami.

Tampilan ini Popup memungkinkan pengembang untuk membangun UI kustom mereka sendiri dan menyajikannya kepada pengguna mereka.

Toolkit Komunitas .NET MAUI menyediakan 2 pendekatan untuk membuat Popup yang dapat ditampilkan dalam aplikasi .NET MAUI. Pendekatan ini akan tergantung pada kasus penggunaan. Halaman ini berfokus pada bentuk Popup paling sederhana - dengan hanya merender overlay di dalam aplikasi. Untuk pendekatan yang lebih canggih, memungkinkan kemampuan untuk mengembalikan hasil dari Popup, silakan lihat Popup - Mengembalikan hasil.

Menampilkan Popup

Toolkit Komunitas .NET MAUI menyediakan beberapa pendekatan untuk menampilkan Popup dalam aplikasi .NET MAUI:

  1. Dalam ContentPage, lakukan panggilan ke metode ekstensi this.ShowPopupAsync() dengan meneruskan View untuk ditampilkan di Popup
  2. Mengembalikan hasil dari Popup
  3. Menggunakan PopupService

Dokumentasi di bawah ini menunjukkan cara paling sederhana untuk menampilkan Popup menggunakan .ShowPopupAsync() metode ekstensi. Metode ini mengembalikan Task<IPopupResult> yang akan selesai ketika Popup ditutup. Yang PopupOptions disediakan bersifat opsional.

public class MainPage : ContentPage
{
    // ...

    async void DisplayPopupButtonClicked(object? sender, EventArgs e)
    {
        await this.ShowPopupAsync(new Label
        {
            Text = "This is a very important message!"
        }, new PopupOptions
        {
            CanBeDismissedByTappingOutsideOfPopup = false,
            Shape = new RoundRectangle
            {
                CornerRadius = new CornerRadius(20, 20, 20, 20),
                StrokeThickness = 2,
                Stroke = Colors.LightGray
            }
        })

        /**** Alternatively, Shell.Current can be used to display a Popup

        await Shell.Current.ShowPopupAsync(new Label
        {
            Text = "This is a very important message!"
        }, new PopupOptions
        {
            CanBeDismissedByTappingOutsideOfPopup = false,
            Shape = new RoundRectangle
            {
                CornerRadius = new CornerRadius(20, 20, 20, 20),
                StrokeThickness = 2,
                Stroke = Colors.LightGray
            }
        })
        ****/
    }
}

Popup dengan padding

Atau, Popup dapat dibuat di XAML atau C# dan diteruskan ke ShowPopupAsync().

Membangun Popup di XAML

Cara termudah untuk membuat Popup adalah dengan menambahkan .NET MAUI ContentView (XAML) yang baru ke proyek Anda. Ini akan membuat 2 file: file *.xaml dan file *.xaml.cs .

Ganti konten *.xaml dengan yang berikut:

<ContentView
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="MyProject.SimplePopup"
    Padding="10">

    <Label Text="This is a very important message!" />
    
</ContentView>

Nilai default untuk HorizontalOptions dan VerticalOptions akan mengakibatkan Popup ditampilkan di tengah halaman yang dilapisi.

Popup akan muncul dengan default Padding 15. Untuk meningkatkan tampilan SimplePopup, nilai Padding sebesar 10 telah ditambahkan.

Menyajikan Popup yang Dibuat di XAML

Setelah Popup dibuat di XAML, dapat disajikan melalui penggunaan metode ekstensi Popup yang digunakan pada Page, Shell, atau INavigation, atau melalui implementasi IPopupService dari toolkit ini.

Contoh berikut menunjukkan cara menginstansiasi dan menampilkan dari SimplePopup yang dibuat dalam contoh sebelumnya melalui metode ekstensi pada ContentPage.

using CommunityToolkit.Maui.Views;

public class MyPage : ContentPage
{
    public async Task DisplayPopup(CancellationToken token)
    {
        var popup = new SimplePopup();

        await this.ShowPopupAsync(popup, PopupOptions.Empty, token);
    }
}

Popup dengan padding

Menutup Popup

Ada 2 cara berbeda yang Popup dapat ditutup:

  1. Popup dapat ditutup secara terprogram
  2. Popup dapat ditutup saat pengguna mengetuk di luar popup
    • Nota Untuk mencegah Popup ditutup saat pengguna mengetuk di luarnya, atur PopupOptions.CanBeDismissedByTappingOutsideOfPopup ke false

1. Menutup Popup secara terprogram

Ada 3 opsi untuk menutup program Popup secara terprogram.

  1. Dalam ContentPage, gunakan metode ekstensi this.ClosePopupAsync().
  2. Dalam aplikasi menggunakan Shell, gunakan Shell.Current.ClosePopupAsync() metode ekstensi
  3. Gunakan PopupService

Dalam contoh di bawah ini, kami menunjukkan cara menggunakan this.ClosePopupAsync() dalam ContentPage. Untuk mempelajari cara menggunakan PopupService untuk menutup Popup, lihat dokumentasi PopupService.

using CommunityToolkit.Maui.Views;

public class MyPage : ContentPage
{
    public async Task DisplayAutomaticallyClosingPopup(Timespan displayTimeSpan, CancellationToken token)
    {
        var popup = new SimplePopup();

        // This Popup is closed programmatically after 2 seconds
        this.ShowPopup(popup, new PopupOptions
        {
            CanBeDismissedByTappingOutsideOfPopup = false
        });

        await Task.Delay(TimeSpan.FromSeconds(displayTimeSpan), token);

        await this.ClosePopupAsync(token);

        /**** Alternatively, Shell.Current can be used to close a Popup
        Shell.Current.ShowPopup(popup, new PopupOptions
        {
            CanBeDismissedByTappingOutsideOfPopup = false
        });

        await Task.Delay(TimeSpan.FromSeconds(displayTimeSpan), token);

        await Shell.Current.ClosePopupAsync(token);
        ***/

    }
}

2. Mengetuk di luar Popup

Secara default, pengguna dapat mengetuk di luar Popup untuk menutupnya. Ini dapat dikontrol melalui penggunaan PopupOptions.CanBeDismissedByTappingOutsideOfPopup properti. Mengatur properti ini ke false akan mencegah pengguna menutup Popup dengan mengetuk di luarnya. Lihat PopupOptions untuk detail selengkapnya.

Opsi Popup

PageOverlayColor, Shape, Shadow semuanya dapat disesuaikan untuk Popup. Lihat PopupOptions untuk detail selengkapnya.

Mengatur Default Jendela Munculan

Untuk mengambil alih nilai default untuk setiap Popup di aplikasi, Anda dapat memanggil .SetPopupDefaults() dan .SetPopupOptionsDefaults() saat menginisialisasi Toolkit Komunitas .NET MAUI.

Yang DefaultPopupSettings disediakan akan diterapkan sebagai nilai default untuk setiap Popup di aplikasi Anda, dan DefaultPopupOptionsSettings akan diterapkan sebagai nilai default untuk PopupOptions setiap kali .ShowPopup() dipanggil.

.UseMauiCommunityToolkit(static options =>
{
  options.SetPopupDefaults(new DefaultPopupSettings
  {
	  CanBeDismissedByTappingOutsideOfPopup = true,
	  BackgroundColor = Colors.Orange,
	  HorizontalOptions = LayoutOptions.End,
	  VerticalOptions = LayoutOptions.Start,
	  Margin = 72,
	  Padding = 4
  });
  options.SetPopupOptionsDefaults(new DefaultPopupOptionsSettings
  {
	  CanBeDismissedByTappingOutsideOfPopup = true,
	  OnTappingOutsideOfPopup = async () => await Toast.Make("Popup Dismissed").Show(CancellationToken.None),
	  PageOverlayColor = Colors.Orange,
	  Shadow = null,
	  Shape = null
  });
})

Acara

Kelas ini Popup menyediakan peristiwa berikut yang dapat dilanggani.

Kejadian Deskripsi
Closed Terjadi ketika Popup ditutup.
Opened Terjadi ketika Popup dibuka.

Contoh

Anda dapat menemukan contoh fitur ini dalam tindakan di Aplikasi Sampel Toolkit Komunitas .NET MAUI.

API

Anda dapat menemukan kode sumber untuk Popup lebih pada repositori GitHub .NET MAUI Community Toolkit.

Sumber Daya Tambahan