Всплывающий элемент и строка меню
Всплывающие меню используются в сценариях меню и контекстного меню для отображения списка команд или параметров по запросу пользователя. Во всплывающем меню отображается одно встроенное меню верхнего уровня, которое может содержать пункты меню и вложенные меню. Чтобы отобразить набор из нескольких меню верхнего уровня в горизонтальной строке, используйте строку меню (которая обычно размещается в верхней части окна приложения).
Выбор правильного элемента управления
См. раздел Меню и контекстные меню , чтобы узнать, как определить сценарии меню и контекстного меню, а также рекомендации по использованию всплывающего меню и всплывающего меню командной строки.
Всплывающие меню можно использовать как меню и контекстные меню для упорядочения команд. Чтобы отобразить произвольное содержимое, например уведомление или запрос на подтверждение, используйте диалоговое окно или всплывающее окно.
Если определенная команда будет использоваться часто и у вас есть доступное пространство, см. статью Команды коллекции , чтобы получить примеры размещения команды непосредственно в собственном элементе, чтобы пользователям не нужно было переходить к ней через меню.
UWP и WinUI 2
Важно!
Сведения и примеры в этой статье оптимизированы для приложений, использующих Windows App SDK и WinUI 3, но обычно применимы к приложениям UWP, использующим WinUI 2. Сведения и примеры для конкретной платформы см. в справочнике по API UWP.
Этот раздел содержит сведения, необходимые для использования элемента управления в приложении UWP или WinUI 2.
Для использования MenuBar требуется Windows 10, версия 1809 (SDK 17763) или более поздней версии либо библиотека пользовательского интерфейса Windows.
Элементы управления MenuFlyout и MenuBar для приложений UWP включены в библиотеку пользовательского интерфейса Windows 2. Дополнительные сведения, включая инструкции по установке, см. в описании библиотеки пользовательского интерфейса Windows. API для этих элементов управления существуют в пространствах имен Windows.UI.Xaml.Controls и Microsoft.UI.Xaml.Controls .
- API UWP:класс MenuFlyout, класс MenuBar, свойство ContextFlyout, свойство FlyoutBase.AttachedFlyout
- Apis WinUI 2:класс MenuBar, свойство ContextFlyout, свойство FlyoutBase.AttachedFlyout
- Откройте приложение "Коллекция WinUI 2" и просмотрите меню MenuBar в действии. Приложения из коллекции WinUI 2 включают интерактивные примеры большинства элементов управления, возможностей и функций WinUI 2. Получите приложение из Microsoft Store или получите исходный код в GitHub.
Мы рекомендуем использовать последнюю версию WinUI 2 , чтобы получить самые последние стили и шаблоны для всех элементов управления. WinUI 2.2 или более поздней версии включает новый шаблон для этих элементов управления, использующий скругленные углы. Дополнительные сведения см. в разделе о радиусе угла.
Чтобы использовать код из этой статьи с WinUI 2, используйте псевдоним в XAML (мы используем muxc) для представления API библиотеки пользовательского интерфейса Windows, включенных в проект. Дополнительные сведения см. в статье Начало работы с WinUI 2 .
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
<muxc:MenuFlyout />
<muxc:MenuBar />
Создание всплывающего меню
Приложение "Коллекция WinUI 3" содержит интерактивные примеры большинства элементов управления, функций и функций WinUI 3. Получение приложения из Microsoft Store или исходный код на сайте GitHub
Чтобы создать всплывающее меню, используйте класс MenuFlyout. Чтобы задать содержимое меню, необходимо добавить объекты MenuFlyoutItem, MenuFlyoutSubItem, ToggleMenuFlyoutItem, RadioMenuFlyoutItem и MenuFlyoutSeparator в элемент MenuFlyout.
Эти объекты предназначены для:
- MenuFlyoutItem — выполнения немедленного действия;
- MenuFlyoutSubItem — содержания каскадного списка пунктов меню.
- ToggleMenuFlyoutItem — включения или отключения параметра;
- RadioMenuFlyoutItem — переключения между взаимоисключающими пунктами меню.
- MenuFlyoutSeparator — визуального разделения элементов меню.
В этом примере создается MenuFlyout и используется свойство ContextFlyout, доступное для большинства элементов управления, для отображения MenuFlyout в качестве контекстного меню.
<Rectangle
Height="100" Width="100">
<Rectangle.ContextFlyout>
<MenuFlyout>
<MenuFlyoutItem Text="Change color" Click="ChangeColorItem_Click" />
</MenuFlyout>
</Rectangle.ContextFlyout>
<Rectangle.Fill>
<SolidColorBrush x:Name="rectangleFill" Color="Red" />
</Rectangle.Fill>
</Rectangle>
private void ChangeColorItem_Click(object sender, RoutedEventArgs e)
{
// Change the color from red to blue or blue to red.
if (rectangleFill.Color == Windows.UI.Colors.Red)
{
rectangleFill.Color = Windows.UI.Colors.Blue;
}
else
{
rectangleFill.Color = Windows.UI.Colors.Red;
}
}
Следующий пример почти идентичен, но вместо использования свойства ContextFlyout для отображения класса MenuFlyout как контекстного меню в нем используется свойство FlyoutBase.ShowAttachedFlyout для его отображения как меню.
<Rectangle
Height="100" Width="100"
Tapped="Rectangle_Tapped">
<FlyoutBase.AttachedFlyout>
<MenuFlyout>
<MenuFlyoutItem Text="Change color" Click="ChangeColorItem_Click" />
</MenuFlyout>
</FlyoutBase.AttachedFlyout>
<Rectangle.Fill>
<SolidColorBrush x:Name="rectangleFill" Color="Red" />
</Rectangle.Fill>
</Rectangle>
private void Rectangle_Tapped(object sender, TappedRoutedEventArgs e)
{
FlyoutBase.ShowAttachedFlyout((FrameworkElement)sender);
}
private void ChangeColorItem_Click(object sender, RoutedEventArgs e)
{
// Change the color from red to blue or blue to red.
if (rectangleFill.Color == Windows.UI.Colors.Red)
{
rectangleFill.Color = Windows.UI.Colors.Blue;
}
else
{
rectangleFill.Color = Windows.UI.Colors.Red;
}
}
Значки
Рекомендуем добавлять значки пунктов меню для:
- наиболее часто используемых пунктов;
- пунктов меню, значок которых является стандартным или хорошо известным;
- пунктов меню, значок которых хорошо иллюстрирует предназначение команды.
Вы не обязаны добавлять значки для команд без стандартных зрительных образов. Загадочные значки бесполезны, создают визуальные помехи и не позволяют пользователям сосредоточиться на важных пунктах меню.
<MenuFlyout>
<MenuFlyoutItem Text="Share" >
<MenuFlyoutItem.Icon>
<FontIcon Glyph="" />
</MenuFlyoutItem.Icon>
</MenuFlyoutItem>
<MenuFlyoutItem Text="Copy" Icon="Copy" />
<MenuFlyoutItem Text="Delete" Icon="Delete" />
<MenuFlyoutSeparator />
<MenuFlyoutItem Text="Rename" />
<MenuFlyoutItem Text="Select" />
</MenuFlyout>
Совет
Размер значков в MenuFlyoutItem составляет 16x16 пикселей. Если вы используете SymbolIcon, FontIcon или PathIcon, значок автоматически масштабируется до правильного размера без потери качества. При использовании BitmapIcon убедитесь, что размер элемента равен 16x16 пикселей.
Исчезновение
Элементы управления с исчезновением, такие как меню, контекстные меню и другие всплывающие элементы, захватывают фокус клавиатуры или геймпада внутри промежуточного пользовательского интерфейса, пока не будут закрыты. Для предоставления визуальной подсказки по этому поведению элементы управления с исчезновением на Xbox отображают наложение, затемняющее видимость вне области действия пользовательского интерфейса. Это поведение можно изменить с помощью свойства LightDismissOverlayMode . По умолчанию во временно отображаемых элементах пользовательского интерфейса наложение с исчезновением используется на Xbox (автоматически), но не в других семействах устройств. Вы можете принудительно настроить постоянное включение или отключение наложения.
<MenuFlyout LightDismissOverlayMode="Off" />
Создание строки меню
- Важные API:класс MenuBar. Класс MenuBarItem
Приложение "Коллекция WinUI 3" содержит интерактивные примеры большинства элементов управления, функций и функций WinUI 3. Получение приложения из Microsoft Store или исходный код на сайте GitHub
Для создания меню в строке меню используйте те же элементы, что и для всплывающего меню. Тем не менее вместо группирования объектов MenuFlyoutItem в элементе MenuFlyout следует сгруппировать их в элементе MenuBarItem. Каждый элемент MenuBarItem добавляется к MenuBar как меню верхнего уровня.
Примечание
В этом примере показано только создание структуры пользовательского интерфейса, но не показана реализация всех команд.
<muxc:MenuBar>
<muxc:MenuBarItem Title="File">
<MenuFlyoutSubItem Text="New">
<MenuFlyoutItem Text="Plain Text Document"/>
<MenuFlyoutItem Text="Rich Text Document"/>
<MenuFlyoutItem Text="Other Formats..."/>
</MenuFlyoutSubItem>
<MenuFlyoutItem Text="Open..."/>
<MenuFlyoutItem Text="Save"/>
<MenuFlyoutSeparator />
<MenuFlyoutItem Text="Exit"/>
</muxc:MenuBarItem>
<muxc:MenuBarItem Title="Edit">
<MenuFlyoutItem Text="Undo"/>
<MenuFlyoutItem Text="Cut"/>
<MenuFlyoutItem Text="Copy"/>
<MenuFlyoutItem Text="Paste"/>
</muxc:MenuBarItem>
<muxc:MenuBarItem Title="View">
<MenuFlyoutItem Text="Output"/>
<MenuFlyoutSeparator/>
<muxc:RadioMenuFlyoutItem Text="Landscape" GroupName="OrientationGroup"/>
<muxc:RadioMenuFlyoutItem Text="Portrait" GroupName="OrientationGroup" IsChecked="True"/>
<MenuFlyoutSeparator/>
<muxc:RadioMenuFlyoutItem Text="Small icons" GroupName="SizeGroup"/>
<muxc:RadioMenuFlyoutItem Text="Medium icons" IsChecked="True" GroupName="SizeGroup"/>
<muxc:RadioMenuFlyoutItem Text="Large icons" GroupName="SizeGroup"/>
</muxc:MenuBarItem>
<muxc:MenuBarItem Title="Help">
<MenuFlyoutItem Text="About"/>
</muxc:MenuBarItem>
</muxc:MenuBar>
Получение примера кода
- Пример коллекции WinUI — просмотр всех элементов управления XAML в интерактивном формате.
- Пример контекстного меню XAML
Похожие статьи
Windows developer
Обратная связь
Ожидается в ближайшее время: в течение 2024 года мы постепенно откажемся от GitHub Issues как механизма обратной связи для контента и заменим его новой системой обратной связи. Дополнительные сведения см. в разделе https://aka.ms/ContentUserFeedback.
Отправить и просмотреть отзыв по