Bagikan melalui

Menu dan menu konteks

  • Artikel

Menu dan menu konteks serupa dengan tampilannya dan apa yang dapat dikandungnya. Keduanya menampilkan daftar perintah atau opsi yang terorganisir dan menghemat ruang dengan menyembunyikan hingga pengguna membutuhkannya. Namun ada perbedaan di antara mereka, seperti apa yang harus Anda gunakan untuk membuatnya dan bagaimana mereka diakses oleh pengguna.

Contoh menu konteks umum

Apakah ini kontrol yang tepat?

Menu dan menu konteks adalah untuk mengatur perintah dan menghemat ruang dengan menyembunyikan perintah tersebut hingga pengguna membutuhkannya. Untuk menampilkan konten arbitrer, seperti pemberitahuan atau permintaan konfirmasi, gunakan dialog atau flyout.

Jika perintah tertentu akan sering digunakan dan Anda memiliki ruang yang tersedia, pertimbangkan untuk menempatkannya langsung di elemennya sendiri sehingga pengguna tidak perlu melalui menu untuk mendapatkannya.

Kapan Anda harus menggunakan menu atau menu konteks?

  • Jika elemen host adalah tombol atau beberapa elemen perintah lain yang peran utamanya adalah menyajikan perintah tambahan, gunakan menu.
  • Jika elemen host adalah beberapa jenis elemen lain yang memiliki tujuan utama lain (seperti menyajikan teks atau gambar), gunakan menu konteks.

Jika Anda ingin menambahkan perintah (seperti Potong, Salin, dan Tempel) ke elemen teks atau gambar, gunakan menu konteks alih-alih menu. Dalam skenario ini, peran utama elemen teks adalah menyajikan dan mengedit teks; perintah tambahan (seperti Potong, Salin, dan Tempel) adalah sekunder dan termasuk dalam menu konteks.

Contoh menu konteks di galeri foto

Menu konteks

Menu konteks memiliki karakteristik berikut:

  • Dilampirkan ke satu elemen dan menampilkan perintah sekunder.
  • Dipanggil dengan mengklik kanan (atau tindakan yang setara, seperti menekan dan menahan dengan jari Anda).
  • Dikaitkan dengan elemen melalui properti ContextFlyout-nya.

Dalam kasus di mana menu konteks Anda akan menyertakan perintah umum (seperti perintah Salin, Potong, Tempel, Hapus, Bagikan, atau pilihan teks), gunakan flyout bilah perintah dan kelompokkan perintah umum ini bersama-sama sebagai perintah utama sehingga perintah tersebut akan ditampilkan sebagai baris horizontal tunggal di menu konteks.

Jika menu konteks Anda tidak akan menyertakan perintah umum, flyout bilah perintah atau flyout menu dapat digunakan untuk menampilkan menu konteks. Sebaiknya gunakan CommandBarFlyout karena menyediakan lebih banyak fungsionalitas daripada MenuFlyout dan, jika diinginkan, dapat mencapai perilaku dan tampilan MenuFlyout yang sama hanya dengan menggunakan perintah sekunder.

Menu memiliki karakteristik berikut:

  • Memiliki satu titik masuk (menu File di bagian atas layar, misalnya) yang selalu ditampilkan.
  • Biasanya dilampirkan ke tombol atau item menu induk.
  • Dipanggil dengan mengklik kiri (atau tindakan yang setara, seperti mengetuk dengan jari Anda).
  • Dikaitkan dengan elemen melalui properti Flyout atau FlyoutBase.AttachedFlyout , atau dikelompokkan di bilah menu di bagian atas jendela aplikasi.

Ketika pengguna memanggil elemen perintah (seperti tombol) yang peran utamanya adalah menyajikan perintah tambahan, gunakan flyout menu untuk menghosting satu menu tingkat atas untuk ditampilkan sebaris sebagai flyout yang melekat pada elemen UI di kanvas. Setiap MenuFlyout dapat menghosting item menu dan sub-menu. Untuk aplikasi yang mungkin memerlukan lebih banyak organisasi atau pengelompokan, gunakan bilah menu sebagai cara cepat dan sederhana untuk menampilkan sekumpulan menu tingkat atas dalam baris horizontal.

UWP dan WinUI 2

Penting

Informasi dan contoh dalam artikel ini dioptimalkan untuk aplikasi yang menggunakan SDK Aplikasi Windows dan WinUI 3, tetapi umumnya berlaku untuk aplikasi UWP yang menggunakan WinUI 2. Lihat referensi API UWP untuk informasi dan contoh spesifik platform.

Bagian ini berisi informasi yang Anda butuhkan untuk menggunakan kontrol di aplikasi UWP atau WinUI 2.

Kontrol CommandBarFlyout dan MenuBar untuk aplikasi UWP disertakan sebagai bagian dari WinUI 2. Untuk informasi selengkapnya, termasuk instruksi penginstalan, lihat WinUI 2. API untuk kontrol ini ada di namespace Windows.UI.Xaml.Controls dan Microsoft.UI.Xaml.Controls .

Sebaiknya gunakan WinUI 2 terbaru untuk mendapatkan gaya dan templat terbaru untuk semua kontrol. WinUI 2.2 atau yang lebih baru menyertakan templat baru untuk kontrol ini yang menggunakan sudut bulat. Untuk informasi selengkapnya, lihat radius sudut.

Untuk menggunakan kode dalam artikel ini dengan WinUI 2, gunakan alias di XAML (kami menggunakan muxc) untuk mewakili API Pustaka Windows UI yang disertakan dalam proyek Anda. Lihat Mulai menggunakan WinUI 2 untuk informasi selengkapnya.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:CommandBarFlyout />
<muxc:MenuBar />