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

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

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

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

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

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

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

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

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

Приложение WinUI 3 Gallery содержит интерактивные примеры элементов управления и функций WinUI. Получите приложение из 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;
    }
}

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 как меню верхнего уровня.

Замечание

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

<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>

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

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