Как сделать контекстное окно

Обновлено: 27.04.2024

Если верить Википедии, контекстное меню — меню, появляющееся при взаимодействии пользователя с графическим интерфейсом (при нажатии правой кнопки мыши). Контекстное меню содержит ограниченный набор возможных действий, который обычно связаны с выбранным объектом.

На вашем компьютере клик правой кнопкой мыши на рабочем столе вызовет контекстное меню операционной системы. Отсюда вы, вероятно, можете создать новую папку, получить какую-то информацию и сделать что-нибудь еще. Контекстное меню в браузере позволяет, например, получить информацию о странице, посмотреть ее исходники, сохранить изображение, открыть ссылку в новой вкладке, поработать с буфером обмена и всякое такое. Причем набор доступных действий зависит от того, куда именно вы кликнули, то есть от контекста. Это стандартное поведение, закладываемое разработчиками браузера [И расширений к нему].

Веб-приложения постепенно начинают заменять стандартные контекстные меню своими собственными. Отличными примерами являются все те же Gmail и Dropbox. Вопрос лишь в том, как сделать свое контекстное меню? В браузере при клике правой кнопкой мыши срабатывает событие contextmenu. Нам придется отменить поведение по умолчанию и сделать так, чтобы вместо стандартного меню выводилось наше собственное. Это не так уж сложно, но разбираться будем пошагово, так что выйдет довольно объемно. Для начала создадим базовую структуру приложения, чтоб разрабатываемый пример не был совсем уж оторван от реальности.

Список задач

Пример результата есть на CodePen. Можете заглянуть туда сразу, если лень читать или хотите убедиться, что действительно заинтересованы в дальнейшем чтении. Ну а пока приступим к пошаговой разработке задуманного. Я буду использовать некоторые современные фишки CSS и создам простейший список задач на data-атрибутах. Также воспользуюсь сбросом стилей от Эрика Мейера и сброшу свойство box-sizing для всех элементов в border-box:

Я не буду использовать префиксы в CSS, но в демо на CodePen включен автопрефиксер.

Создание базовой структуры

Откроем наш HTML-документ, накидаем шапку, контентную часть с некоторым списком задач и подвал. Я также подтяну Font Awesome и шрифт Roboto, чтобы сделать оформление немного лучше. Каждая задача должна содержать атрибут data-id, который в реальности брался бы из БД. Также каждая задача будет содержать список действий. Вот важные части разметки:

Если вы используете CodePen, можете в настройках включить автопрефиксер и подключение CSS-сброса. В противном случае придется делать все руками, если еще не автоматизировали этот процесс. Не забывайте, что наша цель — создание контекстного меню, так что обработка действий не будет реализована. А теперь давайте добавим еще немного CSS:

Полный набор стилей (да и всего остального) представлен на CodePen. А здесь будут самые важные части кода, разметки и оформления. Но давайте уже наконец приблизимся к нашему контекстному меню.

Набросаем наше контекстное меню — разметка

  1. Просмотр задачи.
  2. Редактирование задачи.
  3. Удаление задачи.
  1. Мы хотим, чтобы контекстное меню появлялось там, где был выполнен правый клик, то есть ему нужно абсолютное позиционирование. Поэтому не стоит его разметку помещать в контейнер с относительным позиционированием.
  2. Нам потребуются какие-нибудь переменные или атрибуты, чтобы можно было определить, к какой задаче относится выбранное действие.

Приводим наше меню в порядок — CSS

Уже была упомянута необходимость абсолютного позиционирования разрабатываемого меню. Кроме того, установим свойство z-index в 10. Не забывайте, что в вашем приложении может потребоваться другое значение. Это не все возможные стили, в демке наведены прочие красивости, но они уже зависят от ваших потребностей и не являются обязательными. Прежде чем переходить к JS, сделаем меню невидимым по умолчанию и добавим дополнительный класс для его отображения.

Разворачиваем наше контекстное меню — JavaScript

Начнем с того, что посмотрим, как зарегистрировать событие contextmenu. Откроем самовыполняющуюся функцию и отловим событие на всем документе. Также будем логировать событие в консоль, чтобы получить какую-то информацию:

  1. Потребуется цикл по всем элементам списка задач и добавление обработчика события contextmenu к каждому из них.
  2. Для каждого обработчика отменим стандартное поведение.
  3. Будем логировать в консоли событие и элемент, к которому оно относится.

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

Но для начала давайте добавим к меню ID, чтобы его проще было получать посредством JS. Также добавим переменную состояния меню menuState и и переменную с активным классом. Получились три переменных:

Едем дальше. Пересмотрим функцию contextMenuListener и добавим toggleMenuOn, отображающую меню:

На данный момент правой кнопкой мыши уже можно вызвать наше контекстное меню. Но нельзя сказать, что оно работает правильно. Во-первых, оно находится совсем не там, где хотелось бы. Для устранения проблемы понадобится немного математики. Во-вторых, закрыть это меню пока невозможно. С учетом того, как работают обычные контекстные меню, хотелось бы, чтоб наша его реализация закрывалась при клике не меню и при нажатии Escape. Помимо этого при правом клике вне нашего меню оно должно закрыться, а вместо него требуется открытие меню по умолчанию. Давайте попробуем все это решить.

Рефакторинг нашего кода

  1. contextmenu — Проверка состояния и раскрытие контекстного меню.
  2. click — Скрытие меню.
  3. keyup — Обработка нажатий клавиш. В данном руководстве интересна только ESC.
  1. Само проверяемое событие.
  2. Имя класса для сравнения. Если событие произошло внутри элемента, имеющего указанный класс, или родитель этого элемента имеет такой класс, то нужно вернуть этот элемент.

Вернемся и отредактируем contextListener:

Имея вспомогательную функцию, делающую за нас часть грязной работы, и отлавливая событие contextmenu на всем документе, мы можем теперь закрывать меню при клике вне его. Для этого добавим функцию toggleMenuOff и отредактируем contextListener:

Теперь нажмите правой кнопкой по элементу списка. А после — где-нибудь в другом месте документа. Вуаля! Наше меню закрылось и открылось стандартное. Затем сделаем нечто похожее самое для события click, чтобы не от одной правой кнопки оно закрывалось:

Этот кусок кода несколько отличается от предыдущего, потому что Firefox. После того, как правая кнопка мыши отжата, в Firefox срабатывает событие click, так что здесь нам приходится дополнительно убеждаться, что произошел действительно клик левой кнопкой. Теперь меню не моргает при правом клике. Давайте добавим похожий обработчик и на нажатие клавиши ESC:

Мы получили меню, которое открывается и закрывается как задумано, взаимодействующее с пользователем естественным образом. Давайте наконец отпозиционируем меню и попробуем обрабатывать события внутри него.

Позиционирование нашего контекстного меню

С учетом текущих HTML и CSS, наше меню отображается в нижней части экрана. Но нам-то хотелось бы, чтоб оно появлялось там, где произошел клик. Давайте исправим сие досадное упущение. Во-первых, добавим еще одну вспомогательную функцию, получающую точные координаты клика. Назовем ее getPosition и попробуем заставить обрабатывать разные причуды браузеров:

Наш первый шаг в позиционировании меню — подготовка трех переменных. Добавим их в соответствующий блок кода:

Создадим функцию positionMenu, принимающую единственный аргумент — событие. Пока что пусть она выводит координаты меню в консоль:

Отредактируем contextListener, чтобы начать процесс позиционирования:

Снова повтыкайте в контекстное меню и загляните в консоль. Убедитесь, что позиция действительно доступна и логируется. Мы можем использовать встроенные стили для задания свойств top и left посредством JS. Вот и новая версия positionMenu:

  1. Что будет, если пользователь кликнет близко к правому краю окна? Контекстное меню выйдет за его пределы.
  2. Что делать, если пользователя меняет размеры окна при открытом контекстном меню? Возникает та же проблема. Dropbox решает эту проблему скрытием переполнения по оси x (x-overflow: hidden).

Как вы помните, по умолчанию наше меню скрыто, так что нельзя просто взять и посчитать его размеры. В нашем случае меню статическое, но при реальном применении его содержимое может меняться в зависимости от контекста, так что рассчитывать ширину и высоту лучше в момент открытия. Получим нужные величины внутри функции positionMenu:

Введем еще две переменных, но на этот раз для размеров окна:

Посчитаем их значения похожим образом:

В конечном счете давайте предположим, что хотим показывать меню не ближе, чем в 4 пикселях от края окна. Можно сравнить значения, как я говорил выше, и скорректировать позицию как-то так:

Сейчас наше меню ведет себя совсем хорошо. Осталось что-то сделать с ресайзом окна. Я уже говорил, как поступает Dropbox, но вместо этого мы будем закрывать контекстное меню. [Такое поведение куда ближе к стандартному] Добавим в функцию init следующую строку:

И напишем саму функцию:

Цепляем события к пунктам контекстного меню

Если ваше приложение сложнее данного примера, и у вас планируется динамическое содержимое контекстного меню, придется подробнее вникнуть в происходящее далее, чтобы самому додумать недостающие детали. В нашем приложении все проще, и есть всего одно меню с постоянным набором действий. Таким образом, можно быстро проверить, какой именно элемент был выбран, и обработать этот выбор. В нашем примере просто сохраним выбранный элемент в переменную и запишем в консоль его data-id и выбранное действие. Для этого отредактируем разметку меню:

Далее давайте закэшируем все нужные объекты:

Появилась переменная taskItemInContext, которой присваивается значение при правом клике по элементу списка. Она нам потребуется для логирования ID элементов. Также появились новые имена классов. Теперь пройдемся по функциональности.

Функция инициализации остается такой же. Первое изменение затрагивает contextListener, ведь мы хотим сохранять в taskItemInContext элемент, на который кликнул пользователь, а функция clickInsideElement как раз его и возвращает:

Мы сбрасываем ее в null, если правый клик произошел не по элементу списка. Ну и возьмемся за clickListener. Как я упоминал ранее, для простоты мы просто будем выводить информацию в консоль. Сейчас при отлавливании события click производится несколько проверок и меню закрывается. Внесем коррективы и начнем обрабатывать клик внутри контекстного меню, выполняя некоторое действие и лишь после этого закрывая меню:

Вы могли заметить, что вызывается функция menuItemListener. Ее мы определим чуть позже. Функции keyupListener, resizeListener и positionMenu оставляем без изменений. Функции toggleMenuOn и toggleMenuOff отредактируем незначительно, изменив имена переменных для лучшей читаемости кода:

Наконец реализуем menuItemListener:

На этом разработка функциональности заканчивается.

Некоторые замечания

  1. На протяжении всей статьи я упоминал правый клик как событие для открытия контекстного меню. Не все являются правшами и не у всех выставлены стандартные настройки мыши. Но вне зависимости от этого, событие contextmenu действует именно в соответствии с настройками мыши, а не привязано жестко к именно правой кнопке.
  2. Еще один важный момент заключается в том, что мы рассмотрели только полноценные настольные веб-приложения с мышью в качестве устройства ввода. Пользователи могут пользоваться клавиатурой или мобильными устройствами, поэтому не забудьте предусмотреть альтернативные способы взаимодействия для сохранения дружественного интерфейса.

Большой вопрос

Совместимость с браузерами

  • Chrome 39
  • Safari 7
  • Firefox 33

Заключение и демо

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

Кодовая база этого руководства залита на GitHub и будет поддерживаться и, возможно, обновляться в течение долгого времени. А полное рабочее демо можно потыкать на CodePen.

От переводчика


Перевод местами достаточно вольный, но не в ущерб смыслу или содержанию. Все, что не относится напрямую к оригиналу, вынесено в примечания.
С предложениями, пожеланиями и замечаниями, как обычно, в ЛС.

Всплывающее окно контекста — это основной элемент управления в представлении ContextPopup платформы ленты Windows. Это система расширенного контекстного меню, которая предоставляется платформой только как расширение для реализации ленты. Платформа не предоставляет контекстное всплывающее окно как независимый элемент управления.

Компоненты всплывающего окна контекста

Всплывающее окно контекста является логическим контейнером для контекстного меню и Mini-Toolbar вложенных элементов управления, предоставляемых с помощью элементов разметки ContextMenu и MiniToolbar соответственно:

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

Каждый вложенный элемент управления может отображаться не более одного раза во всплывающем оккупе контекста.

На следующем снимке экрана показано всплывающее окно контекста и его составляющие вложенные элементы управления.

screen shot with callouts showing the ribbon contextual ui components.

Всплывающее окно контекста является чисто концептуально и не предоставляет никаких функций пользовательского интерфейса, таких как позиционирование или изменение размера.

Как правило, всплывающее окно контекста отображается путем щелчка правой кнопкой мыши (или с помощью сочетания клавиш SHIFT+F10) в интересующем объекте. Однако действия, необходимые для отображения всплывающего окна контекста, определяются приложением.

Реализация всплывающего окна контекста

Аналогично другим элементам управления Windows лентой всплывающее окно контекста реализуется с помощью компонента разметки, который определяет сведения о презентации и компонент кода, который управляет его функциональностью.

В следующей таблице перечислены элементы управления, поддерживаемые каждым вложенным элементом управления контекстного всплывающего окна.

Control Mini-Toolbar Контекстное меню
Button x x
Флажок x x
Поле со списком x
Кнопка раскрывающегося списка x x
Раскрывающийся элемент выбора цвета x x
Коллекция раскрывающихся списков x x
Элемент управления шрифтом x
Кнопка справки
Коллекция на ленте
Spinner
Кнопка разделения x x
Коллекция кнопок "Разделение" x x
Переключатель x x

разметку

Каждый вложенный элемент управления контекста должен объявляться отдельно в разметке.

Mini-Toolbar

При добавлении элементов управления на мини-панель инструментов контекста следует учитывать следующие две рекомендации:

  • Элементы управления должны быть очень узнаваемыми и обеспечивать очевидные функциональные возможности. Знакомство является ключевым, так как метки и подсказки не предоставляются для элементов управления Mini-Toolbar.
  • Каждая команда, предоставленная элементом управления, должна быть представлена в другом месте пользовательского интерфейса ленты. Mini-Toolbar не поддерживает навигацию с помощью клавиатуры.

В следующем примере показана базовая разметка элемента MiniToolbar , содержащего три элемента управления Button .

Для каждой строки элементов управления на мини-панели инструментов указывается один элемент MenuGroup .

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

В следующем примере показана базовая разметка для элемента ContextMenu , содержащего три элемента управления Button .

Каждый набор элементов управления в элементе MenuGroup отделен горизонтальной полосой в контекстном меню.

Хотя всплывающее окно контекста может содержать не более одного из каждого подконтроля, допустимы несколько объявлений элементов ContextMenu и MiniToolbar в разметке ленты. Это позволяет приложению поддерживать различные сочетания контекстного меню и элементов управления Mini-Toolbar на основе критериев, определенных приложением, например контекста рабочей области.

Дополнительные сведения см. в описании элемента ContextMap .

В следующем примере показана базовая разметка для элемента ContextPopup .

Чтобы вызвать всплывающее окно контекста, метод IUIContextualUI::ShowAtLocation вызывается, когда окно верхнего уровня приложения ленты получает уведомление WM_CONTEXTMENU.

В этом примере показано, как обрабатывать уведомление WM_CONTEXTMENU в методе WndProc() приложения ленты.

В следующем примере показано, как приложение ленты может отображать всплывающее окно контекста в определенном расположении экрана с помощью метода IUIContextualUI::ShowAtLocation .

Метод GetCurrentContext() имеет значение cmdContextMap , определенное в предыдущем примере разметки.

g_pApplication — это ссылка на интерфейс IUIFramework .

Ссылка на IUIContextualUI может быть выпущена до закрытия всплывающего окна контекста, как показано в предыдущем примере. Однако ссылка должна быть освобождена в какой-то момент, чтобы избежать утечек памяти.

Mini-Toolbar имеет встроенный эффект исчезания, основанный на близости указателя мыши. По этой причине рекомендуется, чтобы Mini-Toolbar отображались как можно ближе к указателю мыши. В противном случае из-за конфликтующих механизмов отображения Mini-Toolbar может не отображаться должным образом.

Свойства всплывающего окна контекста

Ключи свойств, связанные с элементом управления контекстного всплывающего окна, отсутствуют.

В этом пошаговом руководстве в окне инструментов помещается контекстное меню. Контекстное меню — это меню, которое появляется, когда пользователь щелкает правой кнопкой мыши кнопку, текстовое поле или фон окна. Команды в контекстном меню ведут себя так же, как команды в других меню или на панелях инструментов. Для поддержки контекстного меню укажите его в vsct -файле и отобразите в ответ на щелчок правой кнопкой мыши.

Окно инструментов состоит из пользовательского элемента управления WPF в пользовательском классе окна инструментов, который наследует от ToolWindowPane .

в этом пошаговом руководстве показано, как создать контекстное меню в виде меню Visual Studio, объявляя пункты меню в файле . vsct , а затем используя платформу управляемого пакета для их реализации в классе, который определяет окно инструментов. такой подход упрощает доступ к Visual Studio командам, элементам пользовательского интерфейса и модели объектов автоматизации.

кроме того, если контекстное меню не будет иметь доступа к Visual Studio функциональности, можно использовать ContextMenu свойство элемента XAML в пользовательском элементе управления. Дополнительные сведения см. в разделе ContextMenu.

Предварительные условия

начиная с Visual Studio 2015, пакет SDK для Visual Studio не устанавливается из центра загрузки. он входит в состав Visual Studio установки в качестве дополнительного компонента. Пакет SDK для VS можно установить и позже. Дополнительные сведения: Установка пакета SDK для Visual Studio.

Создание пакета контекстного меню окна инструментов

  1. Создайте проект VSIX с именем TWShortcutMenu и добавьте в него шаблон окна инструментов с именем шорткутмену . Дополнительные сведения о создании окна инструментов см. в разделе Создание расширения с помощью окна инструментов.

Указание контекстного меню

Контекстное меню, как показано в этом пошаговом руководстве, позволяет пользователю выбрать цвет из списка цветов, используемых для заполнения окна инструментов.

В шорткутменупаккаже. vsct найдите в элементе GuidSymbol с именем гуидшорткутменупаккажекмдсет и объявите контекстное меню, группу контекстного меню и пункты меню. Теперь элемент GuidSymbol должен выглядеть следующим образом:

Непосредственно перед элементом Buttons создайте элемент Menus и затем определите контекстное меню.

Контекстное меню не имеет родителя, так как оно не является частью меню или панели инструментов.

Создайте элемент Groups с элементом группы, который содержит элементы контекстного меню, и свяжите группу с контекстным меню.

В элементе Buttons (кнопки) определите отдельные команды, которые будут отображаться в контекстном меню. Элемент Buttons должен выглядеть следующим образом:

В шорткутменукомманд. CS Добавьте определения для идентификатора GUID набора команд, контекстного меню и пунктов меню.

Это те же идентификаторы команд, которые определены в разделе символов файла шорткутменупаккаже. vsct . Контекстная группа не указана здесь, так как она необходима только в vsct -файле.

Реализация контекстного меню

В этом разделе реализуется контекстное меню и его команды.

В шорткутмену. CS окно инструментов может получить службу команд меню, но содержащийся в ней элемент управления не может. Ниже показано, как сделать командную службу меню доступной для пользовательского элемента управления.

В шорткутмену. CS добавьте следующие директивы using:

Переопределите метод Initialize () окна инструментов, чтобы получить службу команд меню и добавить элемент управления, передав командную службу меню конструктору:

В конструкторе окна инструментов Шорткутмену удалите строку, которая добавляет элемент управления. Теперь конструктор должен выглядеть следующим образом:

В шорткутменуконтрол. XAML. CS Добавьте закрытое поле для службы команд меню и измените конструктор элемента управления, чтобы он занимал службу команд меню. Затем с помощью службы команд меню добавьте команды контекстного меню. Конструктор Шорткутменуконтрол теперь должен выглядеть, как в следующем коде. Обработчик команд будет определен позже.

В шорткутменуконтрол. XAML добавьте MouseRightButtonDown событие в элемент верхнего уровня UserControl . Файл XAML теперь должен выглядеть следующим образом:

В шорткутменуконтрол. XAML. CS добавьте заглушку для обработчика событий.

Добавьте следующие директивы using в один и тот же файл:

Реализуйте MyToolWindowMouseRightButtonDown событие следующим образом.

При этом создается CommandID объект для контекстного меню, определяется расположение щелчка мыши и открывается контекстное меню в этом расположении с помощью ShowContextMenu метода.

Реализуйте обработчик команд.

В этом случае только один метод обрабатывает события для всех пунктов меню, определяя CommandID и соответствующим образом устанавливая цвет фона. Если пункты меню содержали несвязанные команды, то для каждой команды был создан отдельный обработчик событий.

Тестирование функций окна инструментов

Выполните сборку решения и запустите отладку. Откроется экспериментальный экземпляр.

в экспериментальном экземпляре выберите представление/другие Windows и щелкните шорткутмену. При этом должно отобразиться окно инструментов.

Щелкните правой кнопкой мыши в тексте окна инструментов. Должно отобразиться контекстное меню со списком цветов.

Выберите цвет в контекстном меню. Цвет фона окна инструментов должен быть изменен на выбранный цвет.

В этом пошаговом руководстве в окне инструментов помещается контекстное меню. Контекстное меню — это меню, которое появляется, когда пользователь щелкает правой кнопкой мыши кнопку, текстовое поле или фон окна. Команды в контекстном меню ведут себя так же, как команды в других меню или на панелях инструментов. Для поддержки контекстного меню укажите его в vsct -файле и отобразите в ответ на щелчок правой кнопкой мыши.

Окно инструментов состоит из пользовательского элемента управления WPF в пользовательском классе окна инструментов, который наследует от ToolWindowPane .

в этом пошаговом руководстве показано, как создать контекстное меню в виде меню Visual Studio, объявляя пункты меню в файле . vsct , а затем используя платформу управляемого пакета для их реализации в классе, который определяет окно инструментов. такой подход упрощает доступ к Visual Studio командам, элементам пользовательского интерфейса и модели объектов автоматизации.

кроме того, если контекстное меню не будет иметь доступа к Visual Studio функциональности, можно использовать ContextMenu свойство элемента XAML в пользовательском элементе управления. Дополнительные сведения см. в разделе ContextMenu.

Предварительные условия

начиная с Visual Studio 2015, пакет SDK для Visual Studio не устанавливается из центра загрузки. он входит в состав Visual Studio установки в качестве дополнительного компонента. Пакет SDK для VS можно установить и позже. Дополнительные сведения: Установка пакета SDK для Visual Studio.

Создание пакета контекстного меню окна инструментов

  1. Создайте проект VSIX с именем TWShortcutMenu и добавьте в него шаблон окна инструментов с именем шорткутмену . Дополнительные сведения о создании окна инструментов см. в разделе Создание расширения с помощью окна инструментов.

Указание контекстного меню

Контекстное меню, как показано в этом пошаговом руководстве, позволяет пользователю выбрать цвет из списка цветов, используемых для заполнения окна инструментов.

В шорткутменупаккаже. vsct найдите в элементе GuidSymbol с именем гуидшорткутменупаккажекмдсет и объявите контекстное меню, группу контекстного меню и пункты меню. Теперь элемент GuidSymbol должен выглядеть следующим образом:

Непосредственно перед элементом Buttons создайте элемент Menus и затем определите контекстное меню.

Контекстное меню не имеет родителя, так как оно не является частью меню или панели инструментов.

Создайте элемент Groups с элементом группы, который содержит элементы контекстного меню, и свяжите группу с контекстным меню.

В элементе Buttons (кнопки) определите отдельные команды, которые будут отображаться в контекстном меню. Элемент Buttons должен выглядеть следующим образом:

В шорткутменукомманд. CS Добавьте определения для идентификатора GUID набора команд, контекстного меню и пунктов меню.

Это те же идентификаторы команд, которые определены в разделе символов файла шорткутменупаккаже. vsct . Контекстная группа не указана здесь, так как она необходима только в vsct -файле.

Реализация контекстного меню

В этом разделе реализуется контекстное меню и его команды.

В шорткутмену. CS окно инструментов может получить службу команд меню, но содержащийся в ней элемент управления не может. Ниже показано, как сделать командную службу меню доступной для пользовательского элемента управления.

В шорткутмену. CS добавьте следующие директивы using:

Переопределите метод Initialize () окна инструментов, чтобы получить службу команд меню и добавить элемент управления, передав командную службу меню конструктору:

В конструкторе окна инструментов Шорткутмену удалите строку, которая добавляет элемент управления. Теперь конструктор должен выглядеть следующим образом:

В шорткутменуконтрол. XAML. CS Добавьте закрытое поле для службы команд меню и измените конструктор элемента управления, чтобы он занимал службу команд меню. Затем с помощью службы команд меню добавьте команды контекстного меню. Конструктор Шорткутменуконтрол теперь должен выглядеть, как в следующем коде. Обработчик команд будет определен позже.

В шорткутменуконтрол. XAML добавьте MouseRightButtonDown событие в элемент верхнего уровня UserControl . Файл XAML теперь должен выглядеть следующим образом:

В шорткутменуконтрол. XAML. CS добавьте заглушку для обработчика событий.

Добавьте следующие директивы using в один и тот же файл:

Реализуйте MyToolWindowMouseRightButtonDown событие следующим образом.

При этом создается CommandID объект для контекстного меню, определяется расположение щелчка мыши и открывается контекстное меню в этом расположении с помощью ShowContextMenu метода.

Реализуйте обработчик команд.

В этом случае только один метод обрабатывает события для всех пунктов меню, определяя CommandID и соответствующим образом устанавливая цвет фона. Если пункты меню содержали несвязанные команды, то для каждой команды был создан отдельный обработчик событий.

Тестирование функций окна инструментов

Выполните сборку решения и запустите отладку. Откроется экспериментальный экземпляр.

в экспериментальном экземпляре выберите представление/другие Windows и щелкните шорткутмену. При этом должно отобразиться окно инструментов.

Щелкните правой кнопкой мыши в тексте окна инструментов. Должно отобразиться контекстное меню со списком цветов.

Выберите цвет в контекстном меню. Цвет фона окна инструментов должен быть изменен на выбранный цвет.

Microsoft значительно изменила дизайн проводника в операционной системе Windows 11. Файловый менеджер по умолчанию отображает только несколько значков вверху панели проводника вместо обширного меню, которое было доступно в проводнике Windows 10. Еще одно большое различие становится очевидным, это когда вы нажимаете правой кнопкой мыши в проводнике. Проводник Windows 11 отображает упрощенное меню с несколькими параметрами по умолчанию. Чтобы получить классическое контекстное меню, вам нужно выбрать ссылку «показать дополнительные параметры». По сути, Microsoft добавила в Windows 11 два контекстных меню проводника.

Большинство ярлыков сторонних программ находятся во второй, классической версии контекстного меню. Некоторые пользователи Windows 11 могут предпочесть вернуться к классическому контекстному меню в проводнике, поскольку в нем перечислены все доступные параметры, а не упрощенный набор действий.


Microsoft усложнила включение классического контекстного меню проводника в Windows 11. Однако, прежнее меню, привычное нам в Windows 10, все еще можно включить с помощью редактирования реестра, либо более легким способом – с помощью программы Winaero Tweaker.

Как включить классическое контекстное меню в Windows 11

Включаем классическое контекстное меню в Windows 11 с помощью Winaero Tweaker

  • Скачайте последнюю версию программы с официального сайта программы.
  • Запустите установочный файл. Выберите установку или запуск портативной версии.
  • После завершения процесса запустите WinAero Tweaker.
  • Перейдите в раздел Windows 11 > Classic Full Context Menu (Классическое полное контекстное меню).
  • Включите опцию Enable classic full context menus.
  • В нижней части программы нажмите на появившуюся кнопку Restart Explorer для перезапуска Проводника и включения изменений.


Теперь Проводник будет отображать классическое полное контекстное меню всякий раз, когда вы будете нажимать правой кнопкой мыши по дискам, файлам, папкам или любому другому элементу в проводнике в Windows 11.


Если вы сравните два контекстных меню, показанных на снимках экрана выше, вы заметите, что новое контекстное меню Windows 11 не отображает большинство параметров, отображаемых в классическом меню. Если вам часто необходим доступ к функциям сторонних инструментов в проводнике, например, к архиватору, подобному WinRar, то вы можете предпочесть включение классического меню, чтобы ускорить этот процесс.

Вы также можете воспользоваться комбинацией клавиш Shift + F10 для отображения классического меню, но такой способ может устроить далеко не всех пользователей.

Как включить классическое меню в Windows 11 с помощью редактирования реестра

Классическое полное контекстное меню можно включить с помощью редактора реестра.

  • Запустите приложение Редактор реестра (regedit.exe) от имени Администратора. Например, воспользуйтесь комбинацией клавиш Win + R и в появившемся окне введите команду regedit.exe.


  • Перейдите в ветку реестра
  • Нажмите правой кнопкой мыши на папку "CLSID" , которая отображена с левой стороны веток реестра. Выберите опцию “Создать” – “Раздел”, создайте раздел с названием .


  • Теперь нажмите правой кнопкой мыши по вновь созданному разделу и создайте еще один раздел, но с названием "InprocServer32".


  • В разделе InprocServer32 откройте ключ, который автоматически был создан, с названием “По умолчанию” и установите для него пустое значение, т.е не присваивайте ему никаких значений. Нажмите на кнопку “OK”.


В графе “Значение” статус “значение не установлено” изменился и теперь там не отображается значение.

  • Закройте редактор реестра и перезагрузите компьютер.

Какое контекстное меню вы предпочитаете? Новое – компактное или прежнее – полное классическое меню?

Читайте также: