Bagikan melalui


Menu Konteks

Kelas ContextMenu mewakili elemen yang mengekspos fungsionalitas dengan menggunakan konteks khusus Menu. ContextMenu dilampirkan ke kontrol tertentu dan memungkinkan Anda menyajikan pengguna dengan daftar item yang menentukan perintah atau opsi yang terkait dengan kontrol tertentu, seperti Button.

Biasanya, pengguna mengekspos ContextMenu di antarmuka pengguna (UI) melalui tombol kanan mouse. Saat pengguna mengklik kanan kontrol, menu akan muncul. Mengklik MenuItem biasanya membuka submenu atau menyebabkan aplikasi menjalankan perintah.

Cuplikan layar memperlihatkan ContextMenu dalam status default dan terbuka.

Membuat Menu Konteks

Anda dapat membuat ContextMenu baik dengan mendeklarasikannya di XAML atau dengan membuatnya secara terprogram dalam kode.

Contoh berikut menunjukkan cara mendeklarasikan menu konteks di XAML:

<Button Name="cmButton" Height="30" Width="200">
    Button with Context Menu
    <Button.ContextMenu>
        <ContextMenu Name="cm" Opened="Menu_OnOpened" Closed="Menu_OnClosed" StaysOpen="true">
            <MenuItem Header="File"/>
            <MenuItem Header="Save"/>
            <MenuItem Header="SaveAs"/>
            <MenuItem Header="Recent Files">
                <MenuItem Header="ReadMe.txt"/>
                <MenuItem Header="Schedule.xls"/>
            </MenuItem>
        </ContextMenu>
    </Button.ContextMenu>
</Button>

Contoh berikutnya menunjukkan cara membuat menu konteks secara terprogram dalam kode:

private void CreateContextMenuProgrammatically()
{
    Button button = new() { Content = "Created with C#" };
    ContextMenu contextMenu = new();
    button.ContextMenu = contextMenu;

    MenuItem fileMenuItem = new() { Header = "File" };
    MenuItem newMenuItem = new() { Header = "New" };
    fileMenuItem.Items.Add(newMenuItem);

    MenuItem openMenuItem = new() { Header = "Open" };
    fileMenuItem.Items.Add(openMenuItem);

    MenuItem recentlyOpenedMenuItem = new() { Header = "Recently Opened" };
    openMenuItem.Items.Add(recentlyOpenedMenuItem);

    MenuItem textFileMenuItem = new() { Header = "Text.xaml" };
    recentlyOpenedMenuItem.Items.Add(textFileMenuItem);

    contextMenu.Items.Add(fileMenuItem);

    // Add the button to your container (implementation depends on your layout)
    // containerPanel.Children.Add(button);
}
Private Sub CreateContextMenuProgrammatically()
    Dim button As New Button() With {.Content = "Created with Visual Basic"}
    Dim contextMenu As New ContextMenu()
    button.ContextMenu = contextMenu

    Dim fileMenuItem As New MenuItem() With {.Header = "File"}
    Dim newMenuItem As New MenuItem() With {.Header = "New"}
    fileMenuItem.Items.Add(newMenuItem)

    Dim openMenuItem As New MenuItem() With {.Header = "Open"}
    fileMenuItem.Items.Add(openMenuItem)

    Dim recentlyOpenedMenuItem As New MenuItem() With {.Header = "Recently Opened"}
    openMenuItem.Items.Add(recentlyOpenedMenuItem)

    Dim textFileMenuItem As New MenuItem() With {.Header = "Text.xaml"}
    recentlyOpenedMenuItem.Items.Add(textFileMenuItem)

    contextMenu.Items.Add(fileMenuItem)

    ' Add the button to your container (implementation depends on your layout)
    ' containerPanel.Children.Add(button)
End Sub

Menerapkan gaya ke ContextMenu

Dengan menggunakan kontrol Style, Anda dapat secara dramatis mengubah tampilan dan perilaku ContextMenu tanpa menulis kontrol kustom. Anda dapat mengatur properti visual dan menerapkan gaya ke bagian kontrol. Misalnya, Anda dapat mengubah perilaku bagian kontrol dengan menggunakan properti, atau Anda dapat menambahkan bagian ke, atau mengubah tata letak, .ContextMenu Contoh berikut menunjukkan beberapa cara untuk menambahkan gaya ke ContextMenu kontrol.

Contoh pertama menentukan gaya yang disebut SimpleSysResources, yang menunjukkan cara menggunakan pengaturan sistem saat ini dalam gaya Anda. Contoh menetapkan MenuHighlightBrushKey sebagai Background warna dan MenuTextBrushKey sebagai Foreground warna ContextMenu.

<Style x:Key="SimpleSysResources" TargetType="{x:Type MenuItem}">
  <Setter Property = "Background" Value=
    "{DynamicResource {x:Static SystemColors.MenuHighlightBrushKey}}"/>
  <Setter Property = "Foreground" Value=
    "{DynamicResource {x:Static SystemColors.MenuTextBrushKey}}"/>
</Style>

Contoh berikut menggunakan elemen Trigger untuk mengubah tampilan Menu sebagai respons terhadap peristiwa yang dimunculkan pada ContextMenu. Saat pengguna memindahkan mouse ke menu, tampilan ContextMenu item berubah.

<Style x:Key="Triggers" TargetType="{x:Type MenuItem}">
  <Style.Triggers>
    <Trigger Property="MenuItem.IsMouseOver" Value="true">
      <Setter Property = "FontSize" Value="16"/>
      <Setter Property = "FontStyle" Value="Italic"/>
      <Setter Property = "Foreground" Value="Red"/>
    </Trigger>
  </Style.Triggers>
</Style>

Gaya dan templat

Bagian ini menjelaskan gaya dan templat untuk ContextMenu kontrol. Anda dapat memodifikasi default ControlTemplate untuk memberi kontrol tampilan yang unik. Untuk informasi selengkapnya, lihat Gaya dan templat dan Membuat templat untuk kontrol.

Properti konten

Kontrol ContextMenu menggunakan Items properti sebagai properti kontennya, yang berisi item menu yang ditampilkan di menu konteks.

Bagian

ContextMenu Kontrol tidak menentukan bagian templat bernama apa pun.

Saat Anda membuat ControlTemplate untuk ContextMenu, templat Anda mungkin berisi ItemsPresenter dalam ScrollViewer. ItemsPresenter menampilkan setiap item di ContextMenu, dan ScrollViewer mengaktifkan pengguliran dalam kontrol. ItemsPresenter Jika bukan anak langsung dari ScrollViewer, Anda harus memberikan ItemsPresenter nama ItemsPresenter.

Keadaan visual

Tabel berikut mencantumkan status visual untuk ContextMenu kontrol.

Nama status visual Nama grup status visual Description
Sah Status Validasi Kontrol valid dan tidak memiliki kesalahan validasi.
FokusTidakValid Status Validasi Kontrol memiliki kesalahan validasi dan memiliki fokus keyboard.
Tidak valid Tidak terfokus Status Validasi Kontrol memiliki kesalahan validasi tetapi tidak memiliki fokus keyboard.

Lihat juga