菜单浮出控件和菜单栏

菜单浮出控件在菜单和上下文菜单方案中使用，用于显示用户请求时的命令或选项的列表。 菜单浮出控件显示了一个可包含菜单项和子菜单的单一内联顶级菜单。 若要在水平行中显示一组多个顶级菜单，请使用菜单栏（通常位于应用窗口顶部）。

这是正确的控件吗？

有关确定菜单和上下文菜单方案的帮助，以及何时使用菜单浮出控件和命令栏浮出控件的指南，请参阅菜单和上下文菜单。

菜单浮出控件可以用作菜单和上下文菜单，以组织命令。 若要显示任意内容（如通知或请求确认），则使用对话框或浮出控件。

如果需要经常使用某一特定命令并希望有可用的空间，请参阅集合命令获取有关该命令直接置于自己的元素中的示例，以便用户无需遍历菜单即可访问它。

UWP 和 WinUI 2

重要

本文中的信息和示例针对使用 Windows 应用 SDK 和 WinUI 3 的应用进行优化，但通常适用于使用 WinUI 2 的 UWP 应用。 有关特定于平台的信息和示例，请参阅 UWP API 参考。

本部分包含你在 UWP 或 WinUI 2 应用中使用该控件所需的信息。

MenuBar 需要 Windows 10 版本 1809（SDK 17763）或更高版本，或 Windows UI 库。

UWP 应用的 MenuFlyout 和 MenuBar 控件作为 Windows UI 库 2 的一部分包含在内。 有关详细信息（包括安装说明），请参阅 Windows UI 库。 这些控件的 API 同时存在于 Windows.UI.Xaml.Controls 和 Microsoft.UI.Xaml.Controls 命名空间中。

• UWP API：MenuFlyout 类、 MenuBar 类、 ContextFlyout 属性、 FlyoutBase.AttachedFlyout 属性
• WinUI 2 Apis：MenuBar 类、 ContextFlyout 属性、 FlyoutBase.AttachedFlyout 属性
• 打开 WinUI 2 库应用，查看运行中的 MenuBar。 WinUI 2 库应用包括大多数 WinUI 2 控件、特性和功能的交互式示例。 通过 Microsoft Store 获取应用，或在 GitHub 上获取源代码。

建议使用最新的 WinUI 2 来获取所有控件的最新样式和模板。 WinUI 2.2 或更高版本包含这些使用圆角的控件的新模板。 有关详细信息，请参阅圆角半径。

若要将本文中的代码与 WinUI 2 配合使用，请使用 XAML 中的别名 (我们使用 muxc) 来表示项目中包含的 Windows UI 库 API。 有关详细信息 ，请参阅 WinUI 2 入门 。

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

<muxc:MenuFlyout />
<muxc:MenuBar />

创建菜单浮出控件

• 重要 API：MenuFlyout 类、 ContextFlyout 属性、 FlyoutBase.AttachedFlyout 属性

打开 WinUI 3 库应用，查看操作中的 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;
    }
}

下一个示例几乎完全相同，但该示例使用 FlyoutBase.ShowAttachedFlyout 属性将其显示为菜单，而不是使用 ContextFlyout 属性来显示 MenuFlyout 类作为上下文菜单。

<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="&#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 像素。

轻型消除

轻型消除控件（如菜单、上下文菜单和其他浮出控件）会捕获瞬态 UI 内的键盘焦点和游戏板焦点，直到消除为止。 若要为此行为提供视觉提示，Xbox 上的轻型消除控件将绘制覆盖，以便使 UI 范围之外的可见性变暗。 可以使用 LightDismissOverlayMode 属性来修改此行为。 默认情况下，瞬态 UI 将在 Xbox（“自动”）上绘制轻型消除覆盖层，但不会绘制其他设备系列 。 你可选择强制覆盖始终为“On”或始终为“Off” 。

<MenuFlyout LightDismissOverlayMode="Off" />

创建菜单栏

• 重要 API：MenuBar 类。 MenuBarItem 类

打开 WinUI 3 库应用，查看操作中的 MenuBar。

WinUI 3 库应用包括大多数 WinUI 3 控件、特性和功能的交互式示例。 通过 Microsoft Store 获取应用，或在 GitHub 上获取源代码

可以使用相同的元素在菜单栏中创建菜单，就像在菜单浮出控件中一样。 但是，不是在 MenuFlyout 中对 MenuFlyoutItem 对象进行分组，而是在 MenuBarItem 元素中进行分组。 每个 MenuBarItem 都作为顶级菜单添加到 MenuBar。

注意

此示例仅显示如何创建 UI 结构，但不显示任何命令的实现。

<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 应用的命令设计基础知识
• 菜单和上下文菜单
• 用于集合和列表的上下文命令
• MenuFlyout 类
• MenuBar 类