ContextMenu 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>

Если вы уже прочитали главу о Menu меню, вы скоро поймете, что ContextMenu работает точно так же, и неудивительно, поскольку оба они наследуют класс MenuBase. Так же, как мы видели в примерах для Menu, вы можете добавить события Click элементам ContextMenu, которые будут обрабатываться, когда пользователь на них нажимает, но более подходящий способ - использовать команды.

Команды и значки для контекстного меню

В следующем примере я расскажу вам о ключевых особенностях при использовании 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 вызывалось при щелчке правой кнопкой мыши по элементу управления, к которому он принадлежало. 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;
		}
	}
}

Первое, что вы должны заметить, это то, что я переместил ContextMenu. Я убрал его от кнопки и добавил, как ресурс для Window, чтобы сделать его доступным в пределах окна. Это ещё и значительно облегчает поиск.

У кнопки теперь есть обработчик события Click, который я обрабатываю в Code-behind. Оттуда я просто нахожу экземпляр ContextMenu в рамках ресурсов окна и после этого я делаю две вещи: устанавливаю свойство PlacementTarget, которое сообщает WPF, для какого элемента будет отображено контекстное меню, а затем устанавливаю IsOpen - true, чтобы открыть меню. И это все, что нам нужно!