Пример создания меню в C#. Элемент управления menuStrip
Содержание
Поиск на других ресурсах:
Условие задачи
Создать приложение типа Windows Forms Application . На форме приложения создать меню по образцу, как показано на рисунке 1.
Рис. 1. Меню, которое нужно создать
Выполнение
1. Запустить Microsoft Visual Studio. Создать проект по шаблону Windows Forms Application
Подробный пример создания проекта по шаблону Windows Forms Application описывается здесь .
Сохранить проект под произвольным именем.
2. Элемент управления MenuStrip
Для создания меню используется элемент управления MenuStrip . Он размещается на панели Toolbox во вкладке « Menus&Toolbars » (рис. 2).
Рис. 2. Элемент управления MenuStrip
После вынесения компонента на форму (с помощью мышки) форма приложения примет вид, как показано на рисунке 3. В нижней части окна проектирования формы размещается объект с именем menuStrip1 . С помощью этого имени можно иметь доступ к свойствам и методам меню.
Рис. 3. Форма приложения после размещения компонента MenuStrip
Если навести курсор мыши на элемент меню TypeHere , то появится кнопка вызова всплывающего меню. Если раскрыть всплывающее меню (клик мышкой), то откроется возможность выбора одного из трех видов элементов управления в меню (рис. 4):
MenuItem – стандартный элемент меню;
ComboBox – элемент меню типа «нисходящий список»;
TextBox – элемент меню типа «поле ввода».
В нашем случае выбираем первый вариант MenuItem .
Рис. 4. Типы элементов меню
Для создания подменю File достаточно набрать текст « File » (рис. 5). С помощью мышки и клавиатуры, можно добавлять элементы меню. Для удаления элемента меню, его предварительно нужно выделить мышкой и нажать клавишу Delete .
Рис. 5. Создание подменю File
После создания всех элементов меню, форма приложения примет вид, как показано на рисунке 6.
Рис. 6. Форма приложения после создания меню
Следующими шагами есть программирование событий, связанных с выбором конкретного элемента меню.
Меню и контекстные меню Menus and context menus
В меню и контекстных меню отображается список команд или параметров, когда пользователь запрашивает их. Menus and context menus display a list of commands or options when the user requests them. Для отображения отдельного встроенного меню используйте всплывающее меню. Use a menu flyout to show a single, inline menu. Используйте строку меню, чтобы отобразить набор меню в горизонтальной строке, обычно в верхней части окна приложения. Use a menu bar to show a set of menus in a horizontal row, typically at the top of an app window. Каждое меню может включать пункты меню и вложенные меню. Each menu can have menu items and sub-menus.
Получение библиотеки пользовательского интерфейса WindowsGet the Windows UI Library
Элемент управления MenuBar является частью библиотеки пользовательского интерфейса Windows — пакета NuGet, который содержит новые элементы управления и компоненты пользовательского интерфейса для приложений для Windows. The MenuBar control is included as part of the Windows UI Library, a NuGet package that contains new controls and UI features for Windows apps. Дополнительные сведения, включая инструкции по установке, см. в обзорной статье о библиотеке пользовательского интерфейса Windows. For more info, including installation instructions, see the Windows UI Library overview.
API-интерфейсы библиотеки пользовательского интерфейса Windows: Класс MenuBar Windows UI Library APIs: MenuBar class
Выбор правильного элемента управления Is this the right control?
Меню и контекстные меню экономят место, упорядочивая команды и скрывая их до востребования. Menus and context menus save space by organizing commands and hiding them until the user needs them. Если определенная команда используется часто, и имеется достаточно свободного места, вы можете разместить ее на отдельном элементе, а не в меню, чтобы для ее использования пользователям не приходилось открывать меню. If a particular command will be used frequently and you have the space available, consider placing it directly in its own element, rather than in a menu, so that users don’t have to go through a menu to get to it.
Меню и контекстные меню предназначены для упорядочения команд. Для отображения произвольного содержимого, например уведомлений или запросов подтверждения, используйте диалоговые окна и всплывающие элементы. Menus and context menus are for organizing commands; to display arbitrary content, such as a notification or confirmation request, use a dialog or a flyout.
MenuBar и MenuFlyout MenuBar vs. MenuFlyout
Чтобы отобразить меню во всплывающем окне, присоединенном к элементу пользовательского интерфейса на холсте, используйте элемент управления MenuFlyout для размещения пунктов меню. To show a menu in a flyout attached to an on-canvas UI element, use the MenuFlyout control to host your menu items. Вы можете вызывать всплывающее меню как обычное меню или контекстное меню. You can invoke a menu flyout either as a regular menu or as a context menu. Всплывающее меню содержит единое меню верхнего уровня и вложенные меню (необязательно). A menu flyout hosts a single top-level menu (and optional sub-menus).
Строка меню (MenuBar) позволяет отображать набор из нескольких меню верхнего уровня в горизонтальной строке. To show a set of multiple top-level menus in a horizontal row, use a menu bar. Строка меню обычно размещается в верхней части окна приложения. You typically position the menu bar at the top of the app window.
MenuBar и CommandBar MenuBar vs. CommandBar
MenuBar и CommandBar представляют области, которые можно использовать для отображения команд пользователям. MenuBar and CommandBar both represent surfaces that you can use to expose commands to your users. MenuBar обеспечивает простой и быстрый способ выводить набор команд в приложениях, которым могут понадобиться дополнительные функции упорядочения или группирования, недоступные в CommandBar. The MenuBar provides a quick and simple way to expose a set of commands for apps that might need more organization or grouping than a CommandBar allows.
MenuBar также можно использовать в сочетании с CommandBar. You can also use a MenuBar in conjunction with a CommandBar. MenuBar позволяет отобразить все команды, а CommandBar — выделить наиболее часто используемые команды. Use the MenuBar to provide the bulk of the commands, and the CommandBar to highlight the most used commands.
Примеры Examples
XAML Controls Gallery XAML Controls Gallery
Если у вас установлено приложение галереи элементов управления XAML, щелкните здесь, чтобы открыть приложение и увидеть MenuFlyout в действии. If you have the XAML Controls Gallery app installed, click here to open the app and see the MenuFlyout in action.
Сравнение меню и контекстных меню Menus vs. context menus
Меню и контекстные меню сходны по внешнему виду и возможному содержимому. Menus and context menus are similar in how they look and what they can contain. Фактически для их создания можно использовать один и тот же элемент управления — MenuFlyout. In fact, you can use the same control, MenuFlyout, to create them. Различие заключается в том, как пользователь получает к ним доступ. The difference is how you let the user access it.
Когда следует использовать меню или контекстное меню? When should you use a menu or a context menu?
Если главным элементом является кнопка или другой элемент команды, основная задача которого состоит в предоставлении дополнительных команд, используйте меню. If the host element is a button or some other command element whose primary role is to present additional commands, use a menu.
Если главным элементом является другой тип элемента с иной основной задачей (такой как представление текста или изображения), используйте контекстное меню. If the host element is some other type of element that has another primary purpose (such as presenting text or an image), use a context menu.
Например, меню можно использовать на кнопке для возможности фильтрации и сортировки списка. For example, use a menu on a button to provide filtering and sorting options for a list. В этом случае основное назначение элемента управления кнопки — предоставление доступа к меню. In this scenario, the primary purpose of the button control is to provide access to a menu.
Если вам требуется добавить команды (такие как «вырезать», «копировать» и «вставить») к элементу текста, используйте контекстное меню вместо обычного. If you want to add commands (such as cut, copy, and paste) to a text element, use a context menu instead of a menu. В этом случае основная задача элемента текста заключается в представлении и редактировании текста. Дополнительные команды (такие как «вырезать», «копировать» и «вставить») второстепенны и относятся к контекстному меню. In this scenario, the primary role of the text element is to present and edit text; additional commands (such as cut, copy, and paste) are secondary and belong in a context menu.
Меню Menus
обладают одной точкой входа (например, меню «Файл» в верхней части экрана), которая отображается постоянно; Have a single entry point (a File menu at the top of the screen, for example) that is always displayed.
обычно прикреплены к кнопке или родительскому элементу меню; Are usually attached to a button or a parent menu item.
вызываются левым щелчком мыши (или эквивалентным действием, например нажатием пальцем); Are invoked by left-clicking (or an equivalent action, such as tapping with your finger).
связаны с элементом посредством его свойств Flyout или FlyoutBase.AttachedFlyout либо сгруппированы в строку меню в верхней части окна приложения. Are associated with an element via its Flyout or FlyoutBase.AttachedFlyout properties, or grouped in a menu bar at the top of the app window.
Контекстные меню Context menus
Подключаются к одному элементу и отображают вспомогательные команды. Are attached to a single element and display secondary commands.
Вызываются щелчком правой кнопки мыши (или эквивалентным действием, например нажатием и удерживанием пальцем). Are invoked by right clicking (or an equivalent action, such as pressing and holding with your finger).
связаны с элементом посредством его свойства ContextFlyout. Are associated with an element via its ContextFlyout property.
Значки Icons
Рекомендуем добавлять значки пунктов меню для: Consider providing menu item icons for:
наиболее часто используемых пунктов; The most commonly used items.
пунктов меню, значок которых является стандартным или хорошо известным; Menu items whose icon is standard or well known.
пунктов меню, значок которых хорошо иллюстрирует предназначение команды. Menu items whose icon well illustrates what the command does.
Вы не обязаны добавлять значки для команд без стандартных зрительных образов. Don’t feel obligated to provide icons for commands that don’t have a standard visualization. Загадочные значки бесполезны, создают визуальные помехи и не позволяют пользователям сосредоточиться на важных пунктах меню. Cryptic icons aren’t helpful, create visual clutter, and prevent users from focusing on the important menu items.
Размер значков в MenuFlyoutItem составляет 16×16 пикселей. The size of the icon in a MenuFlyoutItem is 16x16px. Если вы используете SymbolIcon, FontIcon или PathIcon, значок автоматически масштабируется до правильного размера без потери качества. If you use SymbolIcon, FontIcon, or PathIcon, the icon automatically scales to the correct size with no loss of fidelity. При использовании BitmapIcon убедитесь, что размер элемента равен 16×16 пикселей. If you use BitmapIcon, ensure that your asset is 16x16px.
Создание всплывающего или контекстного меню Create a menu flyout or a context menu
Для создания всплывающего или контекстного меню используется класс MenuFlyout. To create a menu flyout or a context menu, you use the MenuFlyout class. Чтобы задать содержимое меню, необходимо добавить объекты MenuFlyoutItem, MenuFlyoutSubItem, ToggleMenuFlyoutItem, RadioMenuFlyoutItem и MenuFlyoutSeparator в элемент MenuFlyout. You define the contents of the menu by adding MenuFlyoutItem, MenuFlyoutSubItem, ToggleMenuFlyoutItem, RadioMenuFlyoutItem and MenuFlyoutSeparator objects to the MenuFlyout.
Эти объекты предназначены для: These objects are for:
MenuFlyoutItem — выполнения немедленного действия; MenuFlyoutItem—Performing an immediate action.
MenuFlyoutSubItem — содержания каскадного списка пунктов меню. MenuFlyoutSubItem—Containing a cascading list of menu items.
ToggleMenuFlyoutItem — включения или отключения параметра; ToggleMenuFlyoutItem—Switching an option on or off.
RadioMenuFlyoutItem — переключения между взаимоисключающими пунктами меню. RadioMenuFlyoutItem—Switching between mutually-exclusive menu items.
MenuFlyoutSeparator — визуального разделения элементов меню. MenuFlyoutSeparator—Visually separating menu items.
В этом примере создается MenuFlyout и используется свойство ContextFlyout, доступное для большинства элементов управления, для отображения MenuFlyout в качестве контекстного меню. This example creates a MenuFlyout and uses the ContextFlyout property, a property available to most controls, to show the MenuFlyout as a context menu.
Следующий пример почти идентичен, но вместо использования свойства ContextFlyout для отображения класса MenuFlyout как контекстного меню в нем используется свойство FlyoutBase.ShowAttachedFlyout для его отображения как меню. The next example is nearly identical, but instead of using the ContextFlyout property to show the MenuFlyout class as a context menu, the example uses the FlyoutBase.ShowAttachedFlyout property to show it as a menu.
Исчезновение Light dismiss
Элементы управления с исчезновением, такие как меню, контекстные меню и другие всплывающие элементы, захватывают фокус клавиатуры или геймпада внутри промежуточного пользовательского интерфейса, пока не будут закрыты. Light dismiss controls such as menus, context menus, and other flyouts, trap keyboard and gamepad focus inside the transient UI until dismissed. Для предоставления визуальной подсказки по этому поведению элементы управления с исчезновением на Xbox отображают наложение, затемняющее видимость вне области действия пользовательского интерфейса. To provide a visual cue for this behavior, light dismiss controls on Xbox will draw an overlay that dims the visibility of out of scope UI. Это поведение можно изменить с помощью свойства LightDismissOverlayMode. This behavior can be modified with the LightDismissOverlayMode property. По умолчанию во временно отображаемых элементах пользовательского интерфейса наложение с исчезновением используется на Xbox ( автоматически ), но не в других семействах устройств. By default, transient UIs will draw the light dismiss overlay on Xbox ( Auto ) but not other device families. Вы можете принудительно настроить постоянное включение или отключение наложения. You can choose to force the overlay to be always On or always Off.
Создание строки меню Create a menu bar
Для использования MenuBar требуется Windows 10, версия 1809 (SDK 17763) или более поздней версии либо библиотека пользовательского интерфейса Windows. MenuBar requires Windows 10, version 1809 (SDK 17763) or later, or the Windows UI Library.
Для создания меню в строке меню используйте те же элементы, что и для всплывающего меню. You use the same elements to create menus in a menu bar as in a menu flyout. Тем не менее вместо группирования объектов MenuFlyoutItem в элементе MenuFlyout следует сгруппировать их в элементе MenuBarItem. However, instead of grouping MenuFlyoutItem objects in a MenuFlyout, you group them in a MenuBarItem element. Каждый элемент MenuBarItem добавляется к MenuBar как меню верхнего уровня. Each MenuBarItem is added to the MenuBar as a top level menu.
В этом примере показано только создание структуры пользовательского интерфейса, но не показана реализация всех команд. This example shows only how to create the UI structure, but does not show implementation of any of the commands.
