通过

菜单弹出和菜单栏

菜单弹出窗口用于菜单和上下文菜单场景中，以便在用户请求时显示一组命令或选项。 菜单弹出框显示一个可以包含菜单项和子菜单的单一顶级菜单。 要在水平行中显示一组多个顶级菜单，请使用菜单栏（通常位于应用窗口顶部）。

典型上下文菜单的示例

这是正确的控制吗？

请参阅菜单和上下文菜单以帮助识别菜单与上下文菜单的场景，以及关于何时使用菜单悬浮窗与命令栏悬浮窗的指南。

菜单弹出窗口可以用作普通菜单和上下文菜单，以组织命令。 要显示任意内容（如通知或请求确认），则使用对话框或弹出项目。

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

创建菜单弹出框

打开 WinUI 3 Gallery 应用并查看 MenuFlyout 的运行

WinUI 3 示例集图标 WinUI 3 示例库应用包含 WinUI 控件和功能的交互式示例。 从 Microsoft Store 或浏览 GitHub 上的源代码获取应用。

要创建菜单弹出项目，请使用 MenuFlyout 类。 通过将 MenuFlyoutItem、MenuFlyoutSubItem、ToggleMenuFlyoutItem、RadioMenuFlyoutItem 和 MenuFlyoutSeparator 对象添加到 MenuFlyout 来定义菜单的内容。

这些对象用于：

此示例将创建 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;
    }
}

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 像素。

轻触取消

轻型消除控件（如菜单、上下文菜单和其他弹出项目）会捕获瞬态 UI 内的键盘焦点和游戏板焦点，直到消除为止。 若要为此行为提供视觉提示，Xbox 上的“轻量消除”控件将绘制一个覆盖层，使范围外的 UI 的可见性变暗。 可以使用 LightDismissOverlayMode 属性来修改此行为。 默认情况下，暂时性 UI 在 Xbox（Auto）上会绘制光消除覆盖，而在其他设备系列上则不会。 你可以选择强制叠加层始终为“打开”或始终为“关闭”。

<MenuFlyout LightDismissOverlayMode="Off" />

创建菜单栏

打开 WinUI 3 库应用，查看 MenuBar 的运行情况

WinUI 3 示例集图标 WinUI 3 示例库应用包含 WinUI 控件和功能的交互式示例。 从 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>
  • Last updated on