Menu munculan dan bilah menu

Flyout menu digunakan dalam menu dan skenario menu konteks untuk menampilkan daftar perintah atau opsi saat diminta oleh pengguna. Menu flyout menampilkan satu menu tingkat atas yang sebaris dan dapat memiliki item menu serta sub-menu. Untuk menampilkan sekumpulan beberapa menu tingkat atas dalam baris horizontal, gunakan bilah menu (yang biasanya Anda posisikan di bagian atas jendela aplikasi).

Apakah ini kontrol yang tepat?

Lihat menu dan menu konteks untuk membantu mengidentifikasi menu vs. skenario menu konteks dan panduan tentang kapan menggunakan flyout menu vs. flyout bilah perintah.

Menu turunan dapat digunakan sebagai menu dan menu konteks untuk mengatur perintah-perintah. 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, lihat perintah pengumpulan misalnya tentang menempatkan perintah langsung dalam elemennya sendiri sehingga pengguna tidak perlu melalui menu untuk mendapatkannya.

Membuat menu flyout

• API Penting:Kelas MenuFlyout, properti ContextFlyout, properti FlyoutBase.AttachedFlyout

Buka aplikasi Galeri WinUI 3 dan lihat MenuFlyout beraksi

Aplikasi Galeri WinUI 3 mencakup contoh interaktif kontrol dan fitur WinUI. Dapatkan aplikasi dari Microsoft Store atau telusuri kode sumber pada GitHub.

Untuk membuat menu flyout, Anda menggunakan kelas MenuFlyout . Anda menentukan konten menu dengan menambahkan objek MenuFlyoutItem, MenuFlyoutSubItem, ToggleMenuFlyoutItem, RadioMenuFlyoutItem , dan MenuFlyoutSeparator ke MenuFlyout.

Objek-objek ini adalah untuk:

• MenuFlyoutItem—Melakukan tindakan langsung.
• MenuFlyoutSubItem—Berisi daftar item menu berjenjang.
• ToggleMenuFlyoutItem —Mengaktifkan atau menonaktifkan opsi.
• RadioMenuFlyoutItem—Beralih antara item menu yang saling eksklusif.
• MenuFlyoutSeparator—Memisahkan item menu secara visual.

Contoh ini membuat MenuFlyout dan menggunakan properti ContextFlyout , properti yang tersedia untuk sebagian besar kontrol, untuk menampilkan MenuFlyout sebagai menu konteks.

<Rectangle
  Height="100" Width="100">
  <Rectangle.ContextFlyout>
    <MenuFlyout>
      <MenuFlyoutItem Text="Change color" Click="ChangeColorItem_Click" />
    </MenuFlyout>
  </Rectangle.ContextFlyout>
  <Rectangle.Fill>
    <SolidColorBrush x:Name="rectangleFill" Color="Red" />
  </Rectangle.Fill>
</Rectangle>

private void ChangeColorItem_Click(object sender, RoutedEventArgs e)
{
    // Change the color from red to blue or blue to red.
    if (rectangleFill.Color == Windows.UI.Colors.Red)
    {
        rectangleFill.Color = Windows.UI.Colors.Blue;
    }
    else
    {
        rectangleFill.Color = Windows.UI.Colors.Red;
    }
}

Contoh berikutnya hampir identik, tetapi alih-alih menggunakan properti ContextFlyout untuk menampilkan kelas MenuFlyout sebagai menu konteks, contohnya menggunakan properti FlyoutBase.ShowAttachedFlyout untuk menampilkannya sebagai menu.

<Rectangle
  Height="100" Width="100"
  Tapped="Rectangle_Tapped">
  <FlyoutBase.AttachedFlyout>
    <MenuFlyout>
      <MenuFlyoutItem Text="Change color" Click="ChangeColorItem_Click" />
    </MenuFlyout>
  </FlyoutBase.AttachedFlyout>
  <Rectangle.Fill>
    <SolidColorBrush x:Name="rectangleFill" Color="Red" />
  </Rectangle.Fill>
</Rectangle>

private void Rectangle_Tapped(object sender, TappedRoutedEventArgs e)
{
    FlyoutBase.ShowAttachedFlyout((FrameworkElement)sender);
}

private void ChangeColorItem_Click(object sender, RoutedEventArgs e)
{
    // Change the color from red to blue or blue to red.
    if (rectangleFill.Color == Windows.UI.Colors.Red)
    {
        rectangleFill.Color = Windows.UI.Colors.Blue;
    }
    else
    {
        rectangleFill.Color = Windows.UI.Colors.Red;
    }
}

Icons

Pertimbangkan untuk menyediakan ikon item menu untuk:

• Item yang paling umum digunakan.
• Item menu yang ikonnya standar atau terkenal.
• Item menu yang ikonnya menggambarkan dengan baik apa yang dilakukan perintah.

Jangan merasa berkewajiban untuk menyediakan ikon untuk perintah yang tidak memiliki visualisasi standar. Ikon kripto tidak membantu, membuat kekacauan visual, dan mencegah pengguna berfokus pada item menu penting.

<MenuFlyout>
  <MenuFlyoutItem Text="Share" >
    <MenuFlyoutItem.Icon>
      <FontIcon Glyph="&#xE72D;" />
    </MenuFlyoutItem.Icon>
  </MenuFlyoutItem>
  <MenuFlyoutItem Text="Copy" Icon="Copy" />
  <MenuFlyoutItem Text="Delete" Icon="Delete" />
  <MenuFlyoutSeparator />
  <MenuFlyoutItem Text="Rename" />
  <MenuFlyoutItem Text="Select" />
</MenuFlyout>

Petunjuk / Saran

Ukuran ikon dalam MenuFlyoutItem adalah 16x16px. Jika Anda menggunakan SymbolIcon, FontIcon, atau PathIcon, ikon secara otomatis diskalakan ke ukuran yang benar tanpa kehilangan keakuratan. Jika Anda menggunakan BitmapIcon, pastikan aset Anda adalah 16x16px.

Penutupan otomatis

Kontrol yang bisa diabaikan seperti menu, menu konteks, dan flyout lainnya, memerangkap fokus keyboard dan gamepad di dalam antarmuka sementara hingga dinonaktifkan. Untuk memberikan isyarat visual untuk perilaku ini, kontrol pengabaian cahaya pada Xbox akan menarik overlay yang meringankan visibilitas UI di luar cakupan. Perilaku ini dapat dimodifikasi dengan properti LightDismissOverlayMode . Secara bawaan, UI sementara akan menggambar overlay pengabaian cahaya pada Xbox (Auto) tetapi tidak pada keluarga perangkat lainnya. Anda dapat memilih untuk memaksa overlay menjadi selalu Aktif atau selalu Nonaktif.

<MenuFlyout LightDismissOverlayMode="Off" />

Membuat bilah menu

• API Penting:Kelas MenuBar. Kelas MenuBarItem

Buka aplikasi Galeri WinUI 3 dan lihat MenuBar sedang beraksi

Aplikasi Galeri WinUI 3 mencakup contoh interaktif kontrol dan fitur WinUI. Dapatkan aplikasi dari Microsoft Store atau telusuri kode sumber pada GitHub.

Anda menggunakan elemen yang sama untuk membuat menu di bilah menu seperti di flyout menu. Namun, alih-alih mengelompokkan objek MenuFlyoutItem di MenuFlyout, Anda mengelompokkannya dalam elemen MenuBarItem. Setiap MenuBarItem ditambahkan ke Bilah Menu sebagai menu tingkat atas.

Nota

Contoh ini hanya menunjukkan cara membuat struktur UI, tetapi tidak menunjukkan implementasi perintah apa pun.

<muxc:MenuBar>
    <muxc:MenuBarItem Title="File">
        <MenuFlyoutSubItem Text="New">
            <MenuFlyoutItem Text="Plain Text Document"/>
            <MenuFlyoutItem Text="Rich Text Document"/>
            <MenuFlyoutItem Text="Other Formats..."/>
        </MenuFlyoutSubItem>
        <MenuFlyoutItem Text="Open..."/>
        <MenuFlyoutItem Text="Save"/>
        <MenuFlyoutSeparator />
        <MenuFlyoutItem Text="Exit"/>
    </muxc:MenuBarItem>

    <muxc:MenuBarItem Title="Edit">
        <MenuFlyoutItem Text="Undo"/>
        <MenuFlyoutItem Text="Cut"/>
        <MenuFlyoutItem Text="Copy"/>
        <MenuFlyoutItem Text="Paste"/>
    </muxc:MenuBarItem>

    <muxc:MenuBarItem Title="View">
        <MenuFlyoutItem Text="Output"/>
        <MenuFlyoutSeparator/>
        <muxc:RadioMenuFlyoutItem Text="Landscape" GroupName="OrientationGroup"/>
        <muxc:RadioMenuFlyoutItem Text="Portrait" GroupName="OrientationGroup" IsChecked="True"/>
        <MenuFlyoutSeparator/>
        <muxc:RadioMenuFlyoutItem Text="Small icons" GroupName="SizeGroup"/>
        <muxc:RadioMenuFlyoutItem Text="Medium icons" IsChecked="True" GroupName="SizeGroup"/>
        <muxc:RadioMenuFlyoutItem Text="Large icons" GroupName="SizeGroup"/>
    </muxc:MenuBarItem>

    <muxc:MenuBarItem Title="Help">
        <MenuFlyoutItem Text="About"/>
    </muxc:MenuBarItem>
</muxc:MenuBar>

Artikel terkait

• Dasar-dasar desain perintah untuk aplikasi Windows
• Menu dan menu konteks
• Perintah kontekstual untuk koleksi dan daftar
• Kelas MenuFlyout
• kelas MenuBar