Gambaran umum kotak dialog (WPF .NET)
Windows Presentation Foundation (WPF) menyediakan cara bagi Anda untuk merancang kotak dialog Anda sendiri. Kotak dialog adalah jendela tetapi dengan niat dan pengalaman pengguna tertentu. Artikel ini membahas cara kerja kotak dialog dan jenis kotak dialog apa yang bisa Anda buat dan gunakan. Kotak dialog digunakan untuk:
- Tampilkan informasi spesifik kepada pengguna.
- Mengumpulkan informasi dari pengguna.
- Tampilkan dan kumpulkan informasi.
- Tampilkan perintah sistem operasi, seperti jendela cetak.
- Pilih file atau folder.
Jenis jendela ini dikenal sebagai kotak dialog. Kotak dialog dapat ditampilkan dengan dua cara: modal dan modeless.
Menampilkan kotak dialog modal kepada pengguna adalah teknik di mana aplikasi mengganggu apa yang dilakukannya sampai pengguna menutup kotak dialog. Ini umumnya datang dalam bentuk perintah atau pemberitahuan. Jendela lain dalam aplikasi tidak dapat berinteraksi sampai kotak dialog ditutup. Setelah kotak dialog modal ditutup, aplikasi berlanjut. Kotak dialog yang paling umum digunakan untuk menampilkan file terbuka atau menyimpan perintah file, menampilkan dialog printer, atau mengirimkan pesan kepada pengguna dengan beberapa status.
Kotak dialog tanpa mode tidak mencegah pengguna mengaktifkan jendela lain saat terbuka. Misalnya, jika pengguna ingin menemukan kemunculan kata tertentu dalam dokumen, jendela utama akan sering membuka kotak dialog untuk menanyakan kata apa yang mereka cari kepada pengguna. Karena aplikasi tidak ingin mencegah pengguna mengedit dokumen, kotak dialog tidak perlu dimodifikasi. Kotak dialog tanpa mode setidaknya menyediakan tombol Tutup untuk menutup kotak dialog. Tombol lain mungkin disediakan untuk menjalankan fungsi tertentu, seperti tombol Temukan Berikutnya untuk menemukan kata berikutnya dalam pencarian kata.
Dengan WPF Anda bisa membuat beberapa jenis kotak dialog, seperti kotak pesan, kotak dialog umum, dan kotak dialog kustom. Artikel ini membahas masing-masing, dan Sampel Kotak Dialog menyediakan contoh yang cocok.
Kotak pesan
Kotak pesan adalah kotak dialog yang dapat digunakan untuk menampilkan informasi tekstual dan untuk memungkinkan pengguna membuat keputusan dengan tombol. Gambar berikut menunjukkan kotak pesan yang mengajukan pertanyaan dan memberi pengguna tiga tombol untuk menjawab pertanyaan.
Untuk membuat kotak pesan, Anda menggunakan MessageBox kelas . MessageBox memungkinkan Anda mengonfigurasi teks kotak pesan, judul, ikon, dan tombol.
Untuk informasi selengkapnya, lihat Cara membuka kotak pesan.
Kotak dialog umum
Windows menerapkan berbagai jenis kotak dialog yang dapat digunakan kembali yang umum untuk semua aplikasi, termasuk kotak dialog untuk memilih file dan pencetakan.
Karena kotak dialog ini disediakan oleh sistem operasi, kotak dialog dibagikan di antara semua aplikasi yang berjalan pada sistem operasi. Kotak dialog ini memberikan pengalaman pengguna yang konsisten, dan dikenal sebagai kotak dialog umum. Saat pengguna menggunakan kotak dialog umum dalam satu aplikasi, mereka tidak perlu mempelajari cara menggunakan kotak dialog tersebut di aplikasi lain.
WPF merangkum file yang terbuka, menyimpan file, membuka folder, dan mencetak kotak dialog umum dan mengeksposnya sebagai kelas terkelola untuk Anda gunakan.
Untuk mempelajari selengkapnya tentang kotak dialog umum, lihat artikel berikut ini:
- Cara menampilkan kotak dialog umum
- Perlihatkan kotak dialog Buka File
- Perlihatkan kotak dialog Simpan File
- Kotak dialog Buka Folder
- Perlihatkan kotak dialog Cetak
Kotak dialog kustom
Meskipun kotak dialog umum berguna, dan harus digunakan jika memungkinkan, kotak dialog tersebut tidak mendukung persyaratan kotak dialog khusus domain. Dalam kasus ini, Anda perlu membuat kotak dialog Anda sendiri. Seperti yang akan kita lihat, kotak dialog adalah jendela dengan perilaku khusus. Window mengimplementasikan perilaku tersebut dan Anda menggunakan jendela untuk membuat kotak dialog modal dan tanpa mode kustom.
Ada banyak pertimbangan desain yang perlu diperhitungkan saat Anda membuat kotak dialog Anda sendiri. Meskipun jendela aplikasi dan kotak dialog berisi kesamaan, seperti berbagi kelas dasar yang sama, kotak dialog digunakan untuk tujuan tertentu. Biasanya kotak dialog diperlukan saat Anda perlu meminta semacam informasi atau respons kepada pengguna. Biasanya aplikasi akan dijeda saat kotak dialog (modal) ditampilkan, membatasi akses ke aplikasi lainnya. Setelah kotak dialog ditutup, aplikasi berlanjut. Namun, membatasi interaksi ke kotak dialog saja, bukan persyaratan.
Ketika jendela WPF ditutup, jendela tidak dapat dibuka kembali. Kotak dialog kustom adalah jendela WPF dan aturan yang sama berlaku. Untuk mempelajari cara menutup jendela, lihat Cara menutup jendela atau kotak dialog.
Menerapkan kotak dialog
Saat mendesain kotak dialog, ikuti saran ini untuk membuat pengalaman pengguna yang baik:
❌ JANGAN mengacaukan jendela dialog. Pengalaman dialog adalah agar pengguna memasukkan beberapa data, atau membuat pilihan.
✔️ BERIKAN tombol OK untuk menutup jendela.
✔️ Atur properti tombol IsDefault OK ke untuk true memungkinkan pengguna menekan tombol ENTER untuk menerima dan menutup jendela.
✔️ PERTIMBANGKAN untuk menambahkan tombol Batal sehingga pengguna dapat menutup jendela dan menunjukkan bahwa mereka tidak ingin melanjutkan.
✔️ Atur properti Batalkan tombol IsCancel ke untuk true memungkinkan pengguna menekan tombol ESC untuk menutup jendela.
✔️ DO mengatur judul jendela untuk secara akurat menjelaskan apa yang diwakili dialog, atau apa yang harus dilakukan pengguna dengan dialog.
✔️ DO mengatur nilai lebar dan tinggi minimum untuk jendela, mencegah pengguna mengubah ukuran jendela terlalu kecil.
✔️ PERTIMBANGKAN untuk menonaktifkan kemampuan untuk mengubah ukuran jendela jika ShowInTaskbar diatur ke false. Anda dapat menonaktifkan mengubah ukuran dengan mengatur ResizeMode ke NoResize
Kode berikut menunjukkan konfigurasi ini.
<Window x:Class="Dialogs.Margins"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Change Margins"
Closing="Window_Closing"
MinHeight="200"
MinWidth="300"
SizeToContent="WidthAndHeight"
ResizeMode="NoResize"
ShowInTaskbar="False"
WindowStartupLocation="CenterOwner"
FocusManager.FocusedElement="{Binding ElementName=leftMarginTextBox}">
<Grid Margin="10">
<Grid.Resources>
<!-- Default settings for controls -->
<Style TargetType="{x:Type Label}">
<Setter Property="Margin" Value="0,3,5,5" />
<Setter Property="Padding" Value="0,0,0,5" />
</Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Margin" Value="0,0,0,5" />
</Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Width" Value="70" />
<Setter Property="Height" Value="25" />
<Setter Property="Margin" Value="5,0,0,0" />
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<!-- Left,Top,Right,Bottom margins-->
<Label Grid.Column="0" Grid.Row="0">Left Margin:</Label>
<TextBox Name="leftMarginTextBox" Grid.Column="1" Grid.Row="0" />
<Label Grid.Column="0" Grid.Row="1">Top Margin:</Label>
<TextBox Name="topMarginTextBox" Grid.Column="1" Grid.Row="1"/>
<Label Grid.Column="0" Grid.Row="2">Right Margin:</Label>
<TextBox Name="rightMarginTextBox" Grid.Column="1" Grid.Row="2" />
<Label Grid.Column="0" Grid.Row="3">Bottom Margin:</Label>
<TextBox Name="bottomMarginTextBox" Grid.Column="1" Grid.Row="3" />
<!-- Accept or Cancel -->
<StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="4" Orientation="Horizontal" HorizontalAlignment="Right">
<Button Name="okButton" Click="okButton_Click" IsDefault="True">OK</Button>
<Button Name="cancelButton" IsCancel="True">Cancel</Button>
</StackPanel>
</Grid >
</Window>
XAML di atas membuat jendela yang terlihat mirip dengan gambar berikut:
Elemen UI membuka kotak dialog
Pengalaman pengguna untuk kotak dialog juga meluas ke bilah menu atau tombol jendela yang membukanya. Saat item menu atau tombol menjalankan fungsi yang memerlukan interaksi pengguna melalui kotak dialog sebelum fungsi dapat dilanjutkan, kontrol harus menggunakan elipsis di akhir teks headernya:
<MenuItem Header="_Margins..." Click="formatMarginsMenuItem_Click" />
<!-- or -->
<Button Content="_Margins..." Click="formatMarginsButton_Click" />
Saat item menu atau tombol menjalankan fungsi yang menampilkan kotak dialog yang tidak memerlukan interaksi pengguna, seperti kotak dialog Tentang , elipsis tidak diperlukan.
Item menu
Item menu adalah cara umum untuk memberi pengguna tindakan aplikasi yang dikelompokkan ke dalam tema terkait. Anda mungkin telah melihat menu File pada banyak aplikasi yang berbeda. Dalam aplikasi umum, item menu File menyediakan cara untuk menyimpan file, memuat file, dan mencetak file. Jika tindakan akan menampilkan jendela modal, header biasanya menyertakan elipsis seperti yang ditunjukkan pada gambar berikut:
Dua item menu memiliki elipsis: .... Ini membantu pengguna mengidentifikasi bahwa ketika mereka memilih item menu tersebut, jendela modal ditampilkan, menjeda aplikasi sampai pengguna menutupnya.
Teknik desain ini adalah cara mudah bagi Anda untuk berkomunikasi dengan pengguna Anda apa yang harus mereka harapkan.
Tombol
Anda dapat mengikuti prinsip yang sama seperti yang dijelaskan di bagian Item menu. Gunakan elipsis pada teks tombol untuk menunjukkan bahwa ketika pengguna menekan tombol, dialog modal akan muncul. Dalam gambar berikut, ada dua tombol dan mudah untuk memahami tombol mana yang menampilkan kotak dialog:
Mengembalikan hasil
Membuka jendela lain, terutama kotak dialog modal, adalah cara yang bagus untuk mengembalikan status dan informasi ke kode panggilan.
Dialog modal
Saat kotak dialog diperlihatkan dengan memanggil ShowDialog(), kode yang membuka kotak dialog menunggu hingga ShowDialog metode kembali. Ketika metode kembali, kode yang disebutnya perlu memutuskan apakah akan terus memproses atau menghentikan pemrosesan. Pengguna umumnya menunjukkan ini dengan menekan tombol OK atau Batal pada kotak dialog.
Ketika tombol OK ditekan, ShowDialog harus dirancang untuk mengembalikan true, dan tombol Batal untuk mengembalikan false. Ini dicapai dengan mengatur DialogResult properti saat tombol ditekan.
private void okButton_Click(object sender, RoutedEventArgs e) =>
DialogResult = true;
private void cancelButton_Click(object sender, RoutedEventArgs e) =>
DialogResult = false;
Private Sub okButton_Click(sender As Object, e As RoutedEventArgs)
DialogResult = True
End Sub
Private Sub cancelButton_Click(sender As Object, e As RoutedEventArgs)
DialogResult = False
End Sub
Properti DialogResult hanya dapat diatur jika kotak dialog ditampilkan dengan ShowDialog(). DialogResult Saat properti diatur, kotak dialog akan ditutup.
Jika properti tombol IsCancel diatur ke true, dan jendela dibuka dengan ShowDialog(), kunci ESC akan menutup jendela dan diatur DialogResult ke false.
Untuk informasi selengkapnya tentang menutup kotak dialog, lihat Cara menutup jendela atau kotak dialog.
Memproses respons
mengembalikan ShowDialog() nilai boolean untuk menunjukkan apakah pengguna menerima atau membatalkan kotak dialog. Jika Anda memberi tahu pengguna tentang sesuatu, tetapi tidak mengharuskan mereka membuat keputusan atau memberikan data, Anda dapat mengabaikan respons. Respons juga dapat diperiksa dengan memeriksa DialogResult properti. Kode berikut menunjukkan cara memproses respons:
var dialog = new Margins();
// Display the dialog box and read the response
bool? result = dialog.ShowDialog();
if (result == true)
{
// User accepted the dialog box
MessageBox.Show("Your request will be processed.");
}
else
{
// User cancelled the dialog box
MessageBox.Show("Sorry it didn't work out, we'll try again later.");
}
Dim marginsWindow As New Margins
Dim result As Boolean? = marginsWindow.ShowDialog()
If result = True Then
' User accepted the dialog box
MessageBox.Show("Your request will be processed.")
Else
' User cancelled the dialog box
MessageBox.Show("Sorry it didn't work out, we'll try again later.")
End If
marginsWindow.Show()
Dialog tanpa mode
Untuk memperlihatkan kotak dialog tanpa mode, panggil Show(). Kotak dialog setidaknya harus menyediakan tombol Tutup . Tombol lain dan elemen interaktif dapat disediakan untuk menjalankan fungsi tertentu, seperti tombol Temukan Berikutnya untuk menemukan kata berikutnya dalam pencarian kata.
Karena kotak dialog tanpa mode tidak memblokir kode panggilan untuk melanjutkan, Anda harus memberikan cara yang berbeda untuk mengembalikan hasil. Anda dapat melakukan salah satu hal berikut:
- Mengekspos properti objek data di jendela.
- Window.Closed Tangani peristiwa dalam kode panggilan.
- Buat peristiwa di jendela yang dinaikkan saat pengguna memilih objek atau menekan tombol tertentu.
Contoh berikut menggunakan Window.Closed peristiwa untuk menampilkan kotak pesan kepada pengguna saat kotak dialog ditutup. Pesan yang ditampilkan mereferensikan properti kotak dialog tertutup. Untuk informasi selengkapnya tentang menutup kotak dialog, lihat Cara menutup jendela atau kotak dialog.
var marginsWindow = new Margins();
marginsWindow.Closed += (sender, eventArgs) =>
{
MessageBox.Show($"You closed the margins window! It had the title of {marginsWindow.Title}");
};
marginsWindow.Show();
Dim marginsWindow As New Margins
AddHandler marginsWindow.Closed, Sub(sender As Object, e As EventArgs)
MessageBox.Show($"You closed the margins window! It had the title of {marginsWindow.Title}")
End Sub
marginsWindow.Show()
Baca juga
.NET Desktop feedback
Saran dan Komentar
Segera hadir: Sepanjang tahun 2024 kami akan menghentikan penggunaan GitHub Issues sebagai mekanisme umpan balik untuk konten dan menggantinya dengan sistem umpan balik baru. Untuk mengetahui informasi selengkapnya, lihat: https://aka.ms/ContentUserFeedback.
Kirim dan lihat umpan balik untuk