MenuFlyout Kelas

Definisi

Ruang nama:

Windows.UI.Xaml.Controls

Mewakili flyout yang menampilkan menu perintah.

/// [Windows.Foundation.Metadata.ContractVersion(Windows.Foundation.UniversalApiContract, 65536)]
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
/// [Windows.UI.Xaml.Markup.ContentProperty(Name="Items")]
class MenuFlyout : FlyoutBase

[Windows.Foundation.Metadata.ContractVersion(typeof(Windows.Foundation.UniversalApiContract), 65536)]
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
[Windows.UI.Xaml.Markup.ContentProperty(Name="Items")]
public class MenuFlyout : FlyoutBase

Public Class MenuFlyout
Inherits FlyoutBase

<MenuFlyout>
  oneOrMoreItems
</MenuFlyout>

Warisan

Object IInspectable DependencyObject FlyoutBase MenuFlyout

Turunan

Windows.UI.Xaml.Controls.MenuBarItemFlyout

Atribut

ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute ContentPropertyAttribute

Persyaratan Windows

Rangkaian perangkat	Windows 10 (diperkenalkan dalam 10.0.10240.0)
API contract	Windows.Foundation.UniversalApiContract (diperkenalkan dalam v1.0)

Contoh

Tip

Untuk informasi selengkapnya, panduan desain, dan contoh kode, lihat Menu dan menu konteks.

Jika Anda telah menginstal aplikasi WinUI 2 Gallery , klik di sini untuk membuka aplikasi dan melihat MenuFlyout beraksi.

• Mendapatkan aplikasi WinUI 2 Gallery (Microsoft Store)
• Dapatkan kode sumber (GitHub)

Contoh ini membuat kelas MenuFlyout dan menggunakan properti ContextFlyout , properti yang tersedia untuk sebagian besar kontrol, untuk menampilkan kelas 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;
    }
}

Contoh ini menunjukkan bagaimana Anda dapat menambahkan dan menghapus item menu saat runtime berdasarkan perubahan kondisi di aplikasi Anda.

<StackPanel Margin="40" Width="220">
    <Rectangle x:Name="Rect1" Height="100" Width="200" 
               Stroke="Black" StrokeThickness="1" Fill="White">
        <Rectangle.ContextFlyout>
            <MenuFlyout x:Name="RectangleColorMenu"/>
        </Rectangle.ContextFlyout>
    </Rectangle>

    <StackPanel>
        <TextBlock TextWrapping="WrapWholeWords"
                   Text="Check colors to include in the menu, then choose a color from the context menu on the rectangle."/>
        <CheckBox Content="Blue" Click="CheckBox_Click" Tag="blue"/>
        <CheckBox Content="Green" Click="CheckBox_Click" Tag="green"/>
        <CheckBox Content="Red" Click="CheckBox_Click" Tag="red"/>
        <CheckBox Content="Yellow" Click="CheckBox_Click" Tag="yellow"/>
    </StackPanel>
</StackPanel>

private void CheckBox_Click(object sender, RoutedEventArgs e)
{
    // Using the Tag property lets you localize the display name
    // without affecting functionality.
    var cb = (CheckBox)sender;
    if (cb.IsChecked == true)
    {
        AddMenuItem(cb.Tag.ToString(), cb.Content.ToString());
    }
    else
    {
        RemoveMenuItem(cb.Content.ToString());
    }
}

private void AddMenuItem(string colorString, string locColorName)
{
    // Set the color.
    Color newColor = Colors.Blue;
    if (colorString == "green")
        newColor = Colors.Green;
    else if (colorString == "red")
        newColor = Colors.Red;
    else if (colorString == "yellow")
        newColor = Colors.Yellow;

    // Create the menu item.
    var newMenuItem = new MenuFlyoutItem();
    newMenuItem.Text = locColorName;
    newMenuItem.Click += (s, e1) =>
    {
        Rect1.Fill = new SolidColorBrush(newColor);
    };

    // Add the item to the menu.
    RectangleColorMenu.Items.Add(newMenuItem);

    // Sort the menu so it's always consistent.
    var orderedItems =  RectangleColorMenu.Items.OrderBy(i => ((MenuFlyoutItem)i).Text).ToList();
    RectangleColorMenu.Items.Clear();
    foreach (var item in orderedItems)
    {
        RectangleColorMenu.Items.Add(item);
    }
}

private void RemoveMenuItem(string locColorName)
{
    // Get any menu items to remove and remove them.
    var items = RectangleColorMenu.Items.Where(i => ((MenuFlyoutItem)i).Text == locColorName);
    foreach (MenuFlyoutItem item in items)
    {
        RectangleColorMenu.Items.Remove(item);
    }
}

Keterangan

Tip

Untuk informasi selengkapnya, panduan desain, dan contoh kode, lihat Menu dan menu konteks.

MenuFlyout untuk sementara menampilkan daftar perintah atau opsi yang terkait dengan apa yang saat ini dilakukan pengguna.

Gunakan kontrol Flyout untuk menampilkan item tunggal dan kontrol MenuFlyout untuk memperlihatkan menu item. Untuk informasi selengkapnya, lihat Menu dan menu konteks.

Kontrol MenuFlyout dapat digunakan sebagai nilai properti Button.Flyout . Ini biasanya diatur dalam XAML sebagai bagian dari definisi UI halaman. Tombol adalah satu-satunya kontrol yang memiliki properti Flyout khusus. Saat diatur sebagai Button.Flyout, MenuFlyout ditampilkan saat tombol diketuk atau dipanggil.

Untuk mengaitkan MenuFlyout dengan kontrol lain, gunakan properti ContextFlyout yang tersedia di UIElement apa pun.

Catatan untuk versi sebelumnya

Catatan

Properti ContextFlyout tidak tersedia sebelum Windows 10 Anniversary Update (SDK versi 14393). Untuk versi sebelumnya, gunakan properti terlampir FlyoutBase.AttachedFlyout .

Anda dapat menggunakan properti terlampir FlyoutBase.AttachedFlyout untuk mengaitkan MenuFlyout dengan kontrol lain. Saat MenuFlyout ditetapkan ke elemen UI lain menggunakan FlyoutBase.AttachedFlyout, Anda harus memanggil metode ShowAt atau metode ShowAttachedFlyout statis untuk menampilkan flyout.

Selain anggota yang tercantum di atas, ada anggota lain dari kelas dasar FlyoutBase yang sering digunakan dalam skenario MenuFlyout umum:

• FlyoutBase.AttachedFlyout: properti terlampir yang mengaitkan MenuFlyout dengan elemen UI tertentu (ini bisa menjadi kelas turunan FrameworkElement apa pun).
• ShowAttachedFlyout: metode statis yang dapat menentukan apakah flyout sudah dikaitkan dengan elemen UI melalui penggunaan FlyoutBase.AttachedFlyout . Jika demikian, metode memanggil ShowAt secara internal, menggunakan FrameworkElement yang Anda tentukan.

Gaya kontrol dan templat

Anda dapat mengubah Gaya dan ControlTemplate default untuk memberikan tampilan unik pada kontrol. Untuk informasi tentang memodifikasi gaya dan templat kontrol, lihat Kontrol gaya. Gaya, templat, dan sumber daya default yang menentukan tampilan kontrol disertakan dalam generic.xaml file. Untuk tujuan desain, generic.xaml tersedia secara lokal dengan penginstalan paket SDK atau NuGet.

• Gaya WinUI (disarankan): Untuk gaya yang diperbarui dari WinUI, lihat \Users\<username>\.nuget\packages\microsoft.ui.xaml\<version>\lib\uap10.0\Microsoft.UI.Xaml\Themes\generic.xaml.
• Gaya non-WinUI: Untuk gaya bawaan, lihat %ProgramFiles(x86)%\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\<SDK version>\Generic\generic.xaml.

Lokasi mungkin berbeda jika Anda menyesuaikan penginstalan. Gaya dan sumber daya dari versi SDK yang berbeda mungkin memiliki nilai yang berbeda.

XAML juga menyertakan sumber daya yang dapat Anda gunakan untuk memodifikasi warna kontrol dalam status visual yang berbeda tanpa memodifikasi templat kontrol. Memodifikasi sumber daya ini lebih disukai untuk mengatur properti seperti Latar Belakang dan Latar Depan. Untuk informasi selengkapnya, lihat bagian Gaya ringan dari artikel gaya XAML . Sumber daya gaya ringan tersedia mulai dari Windows 10 versi 1607 (SDK 14393).

Riwayat versi

Versi Windows	Versi SDK	Nilai ditambahkan
1809	17763	TampilkanAt

Konstruktor

MenuFlyout()

Menginisialisasi instans baru kelas MenuFlyout .

Properti

AllowFocusOnInteraction	Mendapatkan atau menetapkan nilai yang menunjukkan apakah elemen secara otomatis mendapatkan fokus saat pengguna berinteraksi dengannya. (Diperoleh dari FlyoutBase)
AllowFocusWhenDisabled	Mendapatkan atau menetapkan nilai yang menentukan apakah kontrol dapat menerima fokus saat dinonaktifkan. (Diperoleh dari FlyoutBase)
AreOpenCloseAnimationsEnabled	Mendapatkan atau menetapkan nilai yang menunjukkan apakah animasi diputar saat flyout dibuka atau ditutup. (Diperoleh dari FlyoutBase)
Dispatcher	Mendapatkan CoreDispatcher yang dikaitkan dengan objek ini. CoreDispatcher mewakili fasilitas yang dapat mengakses DependencyObject pada utas UI bahkan jika kode dimulai oleh utas non-UI. (Diperoleh dari DependencyObject)
ElementSoundMode	Mendapatkan atau mengatur nilai yang menentukan preferensi kontrol untuk apakah ia memutar suara. (Diperoleh dari FlyoutBase)
InputDevicePrefersPrimaryCommands	Mendapatkan nilai yang menunjukkan apakah perangkat input yang digunakan untuk membuka flyout tidak dengan mudah membuka perintah sekunder. (Diperoleh dari FlyoutBase)
IsConstrainedToRootBounds	Mendapatkan nilai yang menunjukkan apakah flyout ditampilkan dalam batas akar XAML. (Diperoleh dari FlyoutBase)
IsOpen	Mendapatkan nilai yang menunjukkan apakah flyout terbuka. (Diperoleh dari FlyoutBase)
Items	Mendapatkan koleksi yang digunakan untuk menghasilkan konten menu.
LightDismissOverlayMode	Mendapatkan atau menetapkan nilai yang menentukan apakah area di luar UI yang mematikan cahaya digelapkan. (Diperoleh dari FlyoutBase)
MenuFlyoutPresenterStyle	Mendapatkan atau mengatur gaya yang digunakan saat merender MenuFlyout.
MenuFlyoutPresenterStyleProperty	Mengidentifikasi properti dependensi MenuFlyoutPresenterStyle .
OverlayInputPassThroughElement	Mendapatkan atau mengatur elemen yang harus menerima peristiwa input pointer bahkan ketika di bawah overlay flyout. (Diperoleh dari FlyoutBase)
Placement	Mendapatkan atau mengatur penempatan default yang akan digunakan untuk flyout, sehubungan dengan target penempatannya. (Diperoleh dari FlyoutBase)
ShouldConstrainToRootBounds	Mendapatkan atau menetapkan nilai yang menunjukkan apakah flyout harus ditampilkan dalam batas akar XAML. (Diperoleh dari FlyoutBase)
ShowMode	Mendapatkan atau menetapkan nilai yang menunjukkan bagaimana flyout berperilaku saat ditampilkan. (Diperoleh dari FlyoutBase)
Target	Mendapatkan elemen untuk digunakan sebagai target penempatan flyout. (Diperoleh dari FlyoutBase)
XamlRoot	Mendapatkan atau mengatur XamlRoot tempat flyout ini dilihat. (Diperoleh dari FlyoutBase)

Metode

ClearValue(DependencyProperty)	Menghapus nilai lokal properti dependensi. (Diperoleh dari DependencyObject)
CreatePresenter()	Saat ditimpa di kelas turunan, menginisialisasi kontrol untuk menampilkan konten flyout yang sesuai untuk kontrol turunan. Catatan: Metode ini tidak memiliki implementasi kelas dasar dan harus ditimpa dalam kelas turunan. (Diperoleh dari FlyoutBase)
GetAnimationBaseValue(DependencyProperty)	Mengembalikan nilai dasar apa pun yang ditetapkan untuk properti dependensi, yang akan berlaku dalam kasus di mana animasi tidak aktif. (Diperoleh dari DependencyObject)
GetValue(DependencyProperty)	Mengembalikan nilai efektif properti dependensi saat ini dari DependencyObject. (Diperoleh dari DependencyObject)
Hide()	Menutup flyout. (Diperoleh dari FlyoutBase)
OnProcessKeyboardAccelerators(ProcessKeyboardAcceleratorEventArgs)	Dipanggil tepat sebelum pintasan keyboard (akselerator) diproses di aplikasi Anda. Dipanggil setiap kali kode aplikasi atau proses internal memanggil ProcessKeyboardAccelerators. Ambil alih metode ini untuk memengaruhi penanganan akselerator default. (Diperoleh dari FlyoutBase)
ReadLocalValue(DependencyProperty)	Mengembalikan nilai lokal properti dependensi, jika nilai lokal ditetapkan. (Diperoleh dari DependencyObject)
RegisterPropertyChangedCallback(DependencyProperty, DependencyPropertyChangedCallback)	Mendaftarkan fungsi pemberitahuan untuk mendengarkan perubahan pada DependencyProperty tertentu pada instans DependencyObject ini. (Diperoleh dari DependencyObject)
SetValue(DependencyProperty, Object)	Mengatur nilai lokal properti dependensi pada DependencyObject. (Diperoleh dari DependencyObject)
ShowAt(DependencyObject, FlyoutShowOptions)	Memperlihatkan flyout yang ditempatkan dalam kaitannya dengan elemen yang ditentukan menggunakan opsi yang ditentukan. (Diperoleh dari FlyoutBase)
ShowAt(FrameworkElement)	Memperlihatkan flyout yang ditempatkan dalam kaitannya dengan elemen yang ditentukan. (Diperoleh dari FlyoutBase)
ShowAt(UIElement, Point)	Memperlihatkan flyout yang ditempatkan pada offset yang ditentukan sehubungan dengan elemen target yang ditentukan.
TryInvokeKeyboardAccelerator(ProcessKeyboardAcceleratorEventArgs)	Mencoba memanggil pintasan keyboard (akselerator). (Diperoleh dari FlyoutBase)
UnregisterPropertyChangedCallback(DependencyProperty, Int64)	Membatalkan pemberitahuan perubahan yang sebelumnya terdaftar dengan memanggil RegisterPropertyChangedCallback. (Diperoleh dari DependencyObject)

Acara

Closed	Terjadi ketika flyout disembunyikan. (Diperoleh dari FlyoutBase)
Closing	Terjadi ketika flyout mulai disembunyikan. (Diperoleh dari FlyoutBase)
Opened	Terjadi saat flyout ditampilkan. (Diperoleh dari FlyoutBase)
Opening	Terjadi sebelum flyout ditampilkan. (Diperoleh dari FlyoutBase)

Lihat juga

• MenuFlyoutPresenter
• FlyoutBase
• Flyout
• Flyout
• Ringkasan menu dan menu konteks
• Gambaran umum properti terlampir
• Sampel menu konteks (Windows 10)
• Sampel perintah
• Sampel menu konteks (XAML)