Выпадающее меню и строка меню

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

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

Это правильный контроль?

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

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

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

Важные API:класс MenuFlyout, свойство ContextFlyout, свойство FlyoutBase.AttachedFlyout

Откройте приложение WinUI 3 Gallery и посмотрите MenuFlyout в действии

Приложение WinUI 3 Gallery содержит интерактивные примеры элементов управления и функций WinUI. Получите приложение из Microsoft Store или просмотрите исходный код GitHub.

Чтобы создать всплывающее меню, используйте класс MenuFlyout. Вы определяете содержимое меню, добавив MenuFlyoutItem, MenuFlyoutSubItem, SplitMenuFlyoutItem, ToggleMenuFlyoutItem, RadioMenuFlyoutItem и MenuFlyoutSeparator в MenuFlyout.

Эти объекты предназначены для:

MenuFlyoutItem — выполнение немедленного действия.
MenuFlyoutSubItem — содержащий каскадный список пунктов меню.
SplitMenuFlyoutItem — выполнение действия по умолчанию с соответствующими действиями в каскадном списке. Дополнительные сведения см. раздел «Добавление элемента разделенного меню».
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 == Microsoft.UI.Colors.Red)
    {
        rectangleFill.Color = Microsoft.UI.Colors.Blue;
    }
    else
    {
        rectangleFill.Color = Microsoft.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 == Microsoft.UI.Colors.Red)
    {
        rectangleFill.Color = Microsoft.UI.Colors.Blue;
    }
    else
    {
        rectangleFill.Color = Microsoft.UI.Colors.Red;
    }
}

Важные API:класс SplitMenuFlyoutItem, свойство Items

Откройте приложение коллекции WinUI 3 и просмотрите SplitMenuFlyoutItem в действии

Приложение WinUI 3 Gallery содержит интерактивные примеры элементов управления и функций WinUI. Получите приложение из Microsoft Store или просмотрите исходный код GitHub.

SplitMenuFlyoutItem предоставляет возможность разделенной кнопки во всплывающем меню. Она состоит из двух частей:

Основная часть выполняет действие по умолчанию, например MenuFlyoutItem. Чтобы ответить, когда пользователь выбирает его, обработайте событие Click или задайте свойство Command .
Вторичная часть открывает подменю связанных параметров, например MenuFlyoutSubItem.

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

Замечание

Для SplitMenuFlyoutItem требуется Windows App SDK 1.8.6 или более поздней версии.

В этом примере из приложения коллекции WinUI 3 в меню MenuFlyout добавляется два разделенных пункта меню. Элементы подменю находятся в свойстве Items . Так как Items это свойство содержимого XAML SplitMenuFlyoutItem, вы можете добавить элементы подменю непосредственно в элемент SplitMenuFlyoutItem.

<StackPanel Orientation="Horizontal" Spacing="12">
    <Button Content="File Options">
        <Button.Flyout>
            <MenuFlyout>
                <SplitMenuFlyoutItem Text="Save" Click="SplitMenuFlyoutItem_Click">
                    <SplitMenuFlyoutItem.Icon>
                        <FontIcon Glyph="&#xE74E;" />
                    </SplitMenuFlyoutItem.Icon>
                    <MenuFlyoutItem Text="Save as .docx" Click="SplitMenuFlyoutItem_Click" />
                    <MenuFlyoutItem Text="Save as .pdf" Click="SplitMenuFlyoutItem_Click" />
                    <MenuFlyoutItem Text="Save as .txt" Click="SplitMenuFlyoutItem_Click" />
                </SplitMenuFlyoutItem>
                <SplitMenuFlyoutItem Text="Share" Icon="Share" Click="SplitMenuFlyoutItem_Click">
                    <MenuFlyoutItem Text="Share via email" Click="SplitMenuFlyoutItem_Click" />
                    <MenuFlyoutItem Text="Share via link" Click="SplitMenuFlyoutItem_Click" />
                </SplitMenuFlyoutItem>
            </MenuFlyout>
        </Button.Flyout>
    </Button>
    <TextBlock x:Name="SelectedCommandText" VerticalAlignment="Center" />
</StackPanel>

private void SplitMenuFlyoutItem_Click(object sender, RoutedEventArgs e)
{
    // SplitMenuFlyoutItem derives from MenuFlyoutItem, so one handler works for both.
    if (sender is MenuFlyoutItem selectedItem)
    {
        SelectedCommandText.Text = "Clicked: " + selectedItem.Text;
    }
}

Подменю также может содержать объекты MenuFlyoutSeparator и другие объекты SplitMenuFlyoutItem. Если коллекция Items пуста, вторичная часть отключена.

Чтобы настроить подменю, задайте для SubMenuPresenterStyle стиль элемента представления подменю, а для SubMenuItemStyle — стиль элементов в подменю.

Пользователи взаимодействуют с двумя частями отдельно при использовании клавиатуры:

Когда основная часть имеет фокус, нажмите клавишу ВВОД или ПРОБЕЛ, чтобы выполнить действие по умолчанию, или нажмите клавишу СТРЕЛКА ВПРАВО, чтобы переместить фокус на вторичную часть.
Когда вторичная часть имеет фокус, нажмите клавишу ВВОД или СТРЕЛКА ВПРАВО, чтобы открыть подменю.
Когда подменю открыт, нажмите клавишу ESC или клавишу СТРЕЛКА ВЛЕВО, чтобы закрыть ее.

Средства чтения с экрана также объявляют две части отдельно. Вторичная часть объявляется как кнопка, которая предоставляет дополнительные параметры для элемента меню.

Icons

Рекомендуем добавлять значки пунктов меню для:

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

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

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

<MenuFlyout>
  <MenuFlyoutItem Text="Share" >
    <MenuFlyoutItem.Icon>
      <FontIcon Glyph="&#xE72D;" />
    </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 (Auto), но не на других семействах устройств. Вы можете принудительно настроить постоянное включение или отключение наложения.

<MenuFlyout LightDismissOverlayMode="Off" />

Важные API:класс MenuBar. Класс MenuBarItem

Откройте программу WinUI 3 Gallery и посмотрите, как работает MenuBar

Приложение WinUI 3 Gallery содержит интерактивные примеры элементов управления и функций WinUI. Получите приложение из Microsoft Store или просмотрите исходный код GitHub.

Для создания меню в строке меню используйте те же элементы, что и для всплывающего меню. Тем не менее вместо группирования объектов MenuFlyoutItem в элементе MenuFlyout следует сгруппировать их в элементе MenuBarItem. Каждый элемент MenuBarItem добавляется к MenuBar как меню верхнего уровня.

Замечание

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

<MenuBar>
    <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"/>
    </MenuBarItem>

    <MenuBarItem Title="Edit">
        <MenuFlyoutItem Text="Undo"/>
        <MenuFlyoutItem Text="Cut"/>
        <MenuFlyoutItem Text="Copy"/>
        <MenuFlyoutItem Text="Paste"/>
    </MenuBarItem>

    <MenuBarItem Title="View">
        <MenuFlyoutItem Text="Output"/>
        <MenuFlyoutSeparator/>
        <RadioMenuFlyoutItem Text="Landscape" GroupName="OrientationGroup"/>
        <RadioMenuFlyoutItem Text="Portrait" GroupName="OrientationGroup" IsChecked="True"/>
        <MenuFlyoutSeparator/>
        <RadioMenuFlyoutItem Text="Small icons" GroupName="SizeGroup"/>
        <RadioMenuFlyoutItem Text="Medium icons" IsChecked="True" GroupName="SizeGroup"/>
        <RadioMenuFlyoutItem Text="Large icons" GroupName="SizeGroup"/>
    </MenuBarItem>

    <MenuBarItem Title="Help">
        <MenuFlyoutItem Text="About"/>
    </MenuBarItem>
</MenuBar>

основы проектирования команд для приложений Windows
Меню и контекстные меню
Контекстная команда для коллекций и списков
Класс MenuFlyout
Класс SplitMenuFlyoutItem
Класс MenuBar

Обратная связь

Были ли сведения на этой странице полезными?

Последнее обновление: 2026-10-16

Это правильный контроль?

Создание всплывающего меню

Добавить элемент разделенного меню

Icons

Легкое отклонение

Создание строки меню

Связанные статьи

Обратная связь

Дополнительные ресурсы