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).

Contoh menu konteks umum

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.

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 MenuFlyoutItem, MenuFlyoutSubItem, SplitMenuFlyoutItem, ToggleMenuFlyoutItem, RadioMenuFlyoutItem, dan MenuFlyoutSeparator ke MenuFlyout.

Objek-objek ini adalah untuk:

MenuFlyoutItem—Melakukan tindakan langsung.
MenuFlyoutSubItem—Berisi daftar item menu berjenjang.
SplitMenuFlyoutItem—Melakukan tindakan default, dengan tindakan terkait dalam daftar bertingkat. Untuk informasi selengkapnya, lihat Menambahkan item menu split.
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 == Microsoft.UI.Colors.Red)
    {
        rectangleFill.Color = Microsoft.UI.Colors.Blue;
    }
    else
    {
        rectangleFill.Color = Microsoft.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 == Microsoft.UI.Colors.Red)
    {
        rectangleFill.Color = Microsoft.UI.Colors.Blue;
    }
    else
    {
        rectangleFill.Color = Microsoft.UI.Colors.Red;
    }
}

API Penting:Kelas SplitMenuFlyoutItem, properti Items

Buka aplikasi Galeri WinUI 3 dan lihat SplitMenuFlyoutItem beraksi

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

SplitMenuFlyoutItem memberikan pengalaman split button dalam flyout menu. Ini memiliki dua bagian:

Bagian utama melakukan tindakan default, seperti MenuFlyoutItem. Untuk merespons saat pengguna memilihnya, tangani peristiwa Click atau atur properti Command.
Bagian sekunder membuka submenu opsi terkait, seperti MenuFlyoutSubItem.

Gunakan item menu pisah saat perintah memiliki tindakan default umum dan beberapa variasi, seperti menyimpan file dalam format yang berbeda. Ini menjaga menu Anda lebih pendek daripada jika Anda mencantumkan setiap variasi sebagai item terpisah.

Nota

SplitMenuFlyoutItem memerlukan SDK Aplikasi Windows 1.8.6 atau yang lebih baru.

Contoh ini, dari aplikasi Galeri WinUI 3, menambahkan dua item menu split ke MenuFlyout. item submenu berada di properti Items. Karena Items adalah properti konten XAML dari SplitMenuFlyoutItem, Anda dapat menambahkan item submenu langsung di dalam elemen SplitMenuFlyoutItem.

<StackPanel Orientation="Horizontal" Spacing="12">
    <Button Content="File Options">
        <Button.Flyout>
            <MenuFlyout>
                <SplitMenuFlyoutItem Text="Save" Click="SplitMenuFlyoutItem_Click">
                    <SplitMenuFlyoutItem.Icon>
                        <FontIcon Glyph="&#xE74E;" />
                    </SplitMenuFlyoutItem.Icon>
                    <MenuFlyoutItem Text="Save as .docx" Click="SplitMenuFlyoutItem_Click" />
                    <MenuFlyoutItem Text="Save as .pdf" Click="SplitMenuFlyoutItem_Click" />
                    <MenuFlyoutItem Text="Save as .txt" Click="SplitMenuFlyoutItem_Click" />
                </SplitMenuFlyoutItem>
                <SplitMenuFlyoutItem Text="Share" Icon="Share" Click="SplitMenuFlyoutItem_Click">
                    <MenuFlyoutItem Text="Share via email" Click="SplitMenuFlyoutItem_Click" />
                    <MenuFlyoutItem Text="Share via link" Click="SplitMenuFlyoutItem_Click" />
                </SplitMenuFlyoutItem>
            </MenuFlyout>
        </Button.Flyout>
    </Button>
    <TextBlock x:Name="SelectedCommandText" VerticalAlignment="Center" />
</StackPanel>

private void SplitMenuFlyoutItem_Click(object sender, RoutedEventArgs e)
{
    // SplitMenuFlyoutItem derives from MenuFlyoutItem, so one handler works for both.
    if (sender is MenuFlyoutItem selectedItem)
    {
        SelectedCommandText.Text = "Clicked: " + selectedItem.Text;
    }
}

Submenu juga dapat berisi objek MenuFlyoutSeparator dan objek SplitMenuFlyoutItem lainnya. Jika koleksi Items kosong, bagian sekunder dinonaktifkan.

Untuk menyesuaikan submenu, atur SubMenuPresenterStyle ke gaya untuk presenter submenu, dan SubMenuItemStyle ke gaya untuk item di submenu.

Pengguna berinteraksi dengan dua bagian secara terpisah saat mereka menggunakan keyboard:

Saat bagian utama memiliki fokus, tekan Enter atau Spasi untuk melakukan tindakan default, atau tekan tombol Panah kanan untuk memindahkan fokus ke bagian sekunder.
Saat bagian sekunder memiliki fokus, tekan Enter atau tombol Panah kanan untuk membuka submenu.
Saat submenu terbuka, tekan Esc atau tombol Panah kiri untuk menutupnya.

Pembaca layar juga mengumumkan dua bagian secara terpisah. Bagian sekunder diumumkan sebagai tombol yang menyediakan lebih banyak opsi untuk item menu.

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.

Contoh menu konteks dengan ikon

<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" />

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.

<MenuBar>
    <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"/>
    </MenuBarItem>

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

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

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

Saran dan Komentar

Apakah halaman ini membantu?

Terakhir diperbarui pada 2026-10-16

Apakah ini kontrol yang tepat?

Membuat menu flyout

Tambahkan item menu terpisah

Icons

Penutupan otomatis

Membuat bilah menu

Artikel terkait

Saran dan Komentar

Sumber Daya Tambahan: