Контекстне меню WPF

Контекстне меню, яке часто називають спливаючим або вискакуючим меню, — це меню, яке відображається після певних дій користувача, зазвичай після клацання правою кнопкою миші на певному елементі керування або вікні. Контекстні меню часто використовуються для забезпечення функціональності, що відповідає одному елементу керування.

WPF включає в себе елемент керування ContextMenu, і оскільки він майже завжди прив'язаний до певного елемента керування, зазвичай саме так його додають до інтерфейсу. Це робиться через ContextProperty, який надають усі елементи керування (він походить від FrameworkElement, від якого успадковується більшість елементів керування WPF). Розглянемо наступний приклад, щоб побачити, як це робиться:

<Window x:Class="WpfTutorialSamples.Common_interface_controls.ContextMenuSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ContextMenuSample" Height="250" Width="250">
    <Grid>
        <Button Content="Right-click me!" VerticalAlignment="Center" HorizontalAlignment="Center">
            <Button.ContextMenu>
                <ContextMenu>
                    <MenuItem Header="Menu item 1" />
                    <MenuItem Header="Menu item 2" />
                    <Separator />
                    <MenuItem Header="Menu item 3" />
                </ContextMenu>
            </Button.ContextMenu>
        </Button>
    </Grid>
</Window>

Якщо ви вже читали розділ про звичайне меню, то скоро зрозумієте, що ContextMenu працює точно так само, і це не дивно, оскільки вони обидва успадковують клас MenuBase. Як ми бачили в прикладах використання звичайного меню, ви, звичайно, можете додати події Click до цих елементів для обробки коли користувач натискає на них, але більш придатним для WPF способом є використання Commands.

ContextMenu з параметром Commands та піктограмами

У наступному прикладі я покажу вам дві ключові концепції використання ContextMenu: використання команд WPF, які нададуть нам багато функціональності, включаючи обробник події Click, текст і текст швидкого доступу, просто призначивши щось властивості Command. Я також покажу вам, як використовувати значки для елементів ContextMenu. Погляньте:

<Window x:Class="WpfTutorialSamples.Common_interface_controls.ContextMenuWithCommandsSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ContextMenuWithCommandsSample" Height="200" Width="250">
    <StackPanel Margin="10">
        <TextBox Text="Right-click here for context menu!">
            <TextBox.ContextMenu>
                <ContextMenu>
                    <MenuItem Command="Cut">
                        <MenuItem.Icon>
                            <Image Source="/WpfTutorialSamples;component/Images/cut.png" />
                        </MenuItem.Icon>
                    </MenuItem>
                    <MenuItem Command="Copy">
                        <MenuItem.Icon>
                            <Image Source="/WpfTutorialSamples;component/Images/copy.png" />
                        </MenuItem.Icon>
                    </MenuItem>
                    <MenuItem Command="Paste">
                        <MenuItem.Icon>
                            <Image Source="/WpfTutorialSamples;component/Images/paste.png" />
                        </MenuItem.Icon>
                    </MenuItem>
                </ContextMenu>
            </TextBox.ContextMenu>
        </TextBox>
    </StackPanel>
</Window>

Спробуйте запустити приклад і переконайтеся самі, скільки функціональності ми отримуємо безкоштовно, призначаючи команди елементам. Також зверніть увагу, як досить просто використовувати значки в елементах меню ContextMenu.

Викликати ContextMenu з коду

Досі ContextMenu викликалося клацанням правою кнопкою миші на елементі керування, до якого воно належить. WPF робить це автоматично, коли ми призначаємо його властивості ContextMenu. Однак, у деяких ситуаціях вам може знадобитися викликати його вручну з коду. Це також досить просто, тому давайте повторно використаємо перший приклад, щоб продемонструвати це:

<Window x:Class="WpfTutorialSamples.Common_interface_controls.ContextMenuManuallyInvokedSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ContextMenuManuallyInvokedSample" Height="250" Width="250">
    <Window.Resources>
        <ContextMenu x:Key="cmButton">
            <MenuItem Header="Menu item 1" />
            <MenuItem Header="Menu item 2" />
            <Separator />
            <MenuItem Header="Menu item 3" />
        </ContextMenu>
    </Window.Resources>
    <Grid>
        <Button Content="Click me!" VerticalAlignment="Center" HorizontalAlignment="Center" Click="Button_Click" />
    </Grid>
</Window>

using System;
using System.Windows;
using System.Windows.Controls;

namespace WpfTutorialSamples.Common_interface_controls
{
	public partial class ContextMenuManuallyInvokedSample : Window
	{
		public ContextMenuManuallyInvokedSample()
		{
			InitializeComponent();
		}

		private void Button_Click(object sender, RoutedEventArgs e)
		{
			ContextMenu cm = this.FindResource("cmButton") as ContextMenu;
			cm.PlacementTarget = sender as Button;
			cm.IsOpen = true;
		}
	}
}

Перше, що ви повинні помітити, це те, що я перемістив контекстне меню подалі від кнопки. Натомість я додав його як ресурс вікна, щоб зробити його доступним з будь-якого місця у вікні. Це також значно полегшує його пошук, коли нам потрібно його показати.

Тепер кнопка має обробник події Click, який я обробляю в коді на основі коду. Звідти я просто знаходжу екземпляр ContextMenu в ресурсах вікна та потім роблю дві речі: встановлюю її властивість PlacementTarget, яка повідомляє WPF, на основі якого елемента слід обчислювати позицію, а потім встановлюю IsOpen у значення true, щоб відкрити меню. Це все, що вам потрібно!