菜单浮出控件和菜单栏

项目
05/18/2022

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

Example of a typical context menu

获取 Windows UI 库

MenuBar 控件作为 Windows UI 库的一部分提供，该库是一个 Nuget 包，其中包含用于 Windows 应用的新控件和 UI 功能。有关详细信息（包括安装说明），请参阅 Windows UI 库概述。

Windows UI 库 API：MenuBar 类

平台 API：MenuFlyout 类、MenuBar 类、ContextFlyout 属性、FlyoutBase.AttachedFlyout 属性

这是正确的控件吗？

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

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

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

示例

WinUI 2 库
	如果已安装 WinUI 2 库应用，请单击此处打开该应用并查看 MenuFlyout。获取 WinUI 2 库应用 (Microsoft Store) 获取源代码 (GitHub)

WinUI 2 库

如果已安装 WinUI 2 库应用，请单击此处打开该应用并查看 MenuFlyout。

若要创建菜单浮出控件，请使用 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;
    }
}

图标

请考虑提供菜单项图标：

最常使用的项。
图标为标准或知名的菜单项。
图标可明确说明命令功能的菜单项。

对于没有标准可视化的命令可不必提供图标。加密图标没有帮助，需创建可视的待筛选邮件，并阻止用户关注重要菜单项。

Example context menu with 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（“自动”）上绘制轻型消除覆盖层，但不会绘制其他设备系列。你可选择强制覆盖始终为“On”或始终为“Off” 。

<MenuFlyout LightDismissOverlayMode="Off" />

重要

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

可以使用相同的元素在菜单栏中创建菜单，就像在菜单浮出控件中一样。但是，不是在 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 2 库示例 - 以交互式格式查看所有 XAML 控件。
XAML 上下文菜单示例

此页面有帮助吗?

这是正确的控件吗？

示例

创建菜单浮出控件

图标

轻型消除

创建菜单栏

获取示例代码

相关文章