Share via

Меню и контекстные меню

  • Статья

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

Пример типичного контекстного меню

Выбор правильного элемента управления

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

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

Когда следует использовать меню или контекстное меню?

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

Если вы хотите добавить команды (например, "Вырезать", "Копировать" и "Вставить") в элемент текста или изображения, используйте контекстное меню вместо меню. В этом сценарии основная роль текстового элемента заключается в представлении и редактировании текста; Дополнительные команды (например, "Вырезать", "Копировать" и "Вставить") являются вторичными и находятся в контекстном меню.

Пример контекстного меню в фотоальбоме

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

Контекстные меню имеют следующие характеристики:

  • Подключаются к одному элементу и отображают вспомогательные команды.
  • Вызываются щелчком правой кнопки мыши (или эквивалентным действием, например нажатием и удерживанием пальцем).
  • связаны с элементом посредством его свойства ContextFlyout.

В случаях, когда контекстное меню будет содержать общие команды (например, Копировать, Вырезать, Вставить, Удалить, Общий доступ или команды выбора текста), используйте всплывающий элемент панели команд и сгруппируйте эти общие команды в качестве основных команд, чтобы они отображались в виде одной горизонтальной строки в контекстном меню.

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

Меню имеют следующие характеристики:

  • обладают одной точкой входа (например, меню "Файл" в верхней части экрана), которая отображается постоянно;
  • обычно прикреплены к кнопке или родительскому элементу меню;
  • вызываются левым щелчком мыши (или эквивалентным действием, например нажатием пальцем);
  • связаны с элементом посредством его свойств Flyout или FlyoutBase.AttachedFlyout либо сгруппированы в строку меню в верхней части окна приложения.

Когда пользователь вызывает командный элемент (например, кнопку), основная роль которого заключается в представлении дополнительных команд, используйте всплывающее меню для размещения одного меню верхнего уровня, которое будет отображаться в виде всплывающего элемента, присоединенного к элементу пользовательского интерфейса на холсте. Каждый элемент MenuFlyout может размещать элементы меню и вложенные меню. Для приложений, которым может потребоваться дополнительная организация или группирование, используйте строку меню как быстрый и простой способ отображения набора из нескольких меню верхнего уровня в горизонтальной строке.

UWP и WinUI 2

Важно!

Сведения и примеры в этой статье оптимизированы для приложений, использующих Windows App SDK и WinUI 3, но обычно применимы к приложениям UWP, использующим WinUI 2. Сведения и примеры для конкретной платформы см. в справочнике по API UWP.

Этот раздел содержит сведения, необходимые для использования элемента управления в приложении UWP или WinUI 2.

Элементы управления CommandBarFlyout и MenuBar для приложений UWP включены в библиотеку пользовательского интерфейса Windows 2. Дополнительные сведения, включая инструкции по установке, см. в описании библиотеки пользовательского интерфейса Windows. API для этих элементов управления существуют в пространствах имен Windows.UI.Xaml.Controls и Microsoft.UI.Xaml.Controls .

Мы рекомендуем использовать последнюю версию WinUI 2 , чтобы получить самые актуальные стили и шаблоны для всех элементов управления. WinUI 2.2 или более поздней версии включает новый шаблон для этих элементов управления, в котором используются скругленные углы. Дополнительные сведения см. в разделе о радиусе угла.

Чтобы использовать код из этой статьи с WinUI 2, используйте псевдоним в XAML (мы используем muxc) для представления API-интерфейсов библиотеки пользовательского интерфейса Windows, включенных в проект. Дополнительные сведения см. в статье Начало работы с WinUI 2 .

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:CommandBarFlyout />
<muxc:MenuBar />