菜单和上下文菜单

菜单和上下文菜单在外观和可以包含的内容方面类似。 它们都显示命令或选项的组织列表,并通过隐藏命令或选项来节省空间,直到用户需要它们。 不过,它们之间有一些差异,如应该使用什么来创建它们,以及用户如何访问它们。

典型上下文菜单的示例

这是正确的控件吗?

菜单和上下文菜单用于组织命令并通过隐藏这些命令来节省空间,直到用户需要它们。 要显示任意内容(如通知或请求确认),则使用对话框或弹出项目

如果需要经常使用某一特定命令并希望有可用的空间,请考虑将该命令直接置于其自己的元素中,以便用户无需遍历菜单即可访问它。

何时使用菜单或上下文菜单?

  • 如果主机元素是一个按钮或其他一些命令元素(其主要作用是显示其他命令),则使用菜单。
  • 如果主机元素是具有其他主要用途的其他类型元素(如显示文本或图像),则可以使用上下文菜单。

如果要将命令(如剪切、复制和粘贴)添加到某个文本或图像元素,请使用上下文菜单而不是菜单。 在此方案中,文本元素的主要作用是显示和编辑文本;其他命令(如剪切、复制和粘贴)是辅助命令,属于上下文菜单。

照片库中的上下文菜单示例

上下文菜单

上下文菜单具有以下特征:

  • 附加到单个元素并显示辅助命令。
  • 通过右键单击(或等效操作,例如用手指按住)进行调用。
  • 通过 ContextFlyout 属性与元素关联。

如果上下文菜单包含常见命令(如复制、剪切、粘贴、删除、共享或文本选择命令),请使用命令栏弹出项目,并将这些常见命令作为主要命令组合在一起,以使它们在上下文菜单中显示为单个水平行。

如果上下文菜单不包含常用命令,则可以使用命令栏弹出项目菜单弹出项目来显示上下文菜单。 建议使用 CommandBarFlyout,因为它提供的功能比 MenuFlyout 多,并且如果需要,只使用辅助命令即可实现相同的行为和外观。

菜单具有以下特性:

  • 设置一个始终显示的单一入口点(例如屏幕顶部的“文件”菜单)。
  • 通常附加到按钮或父菜单项。
  • 通过左键单击(或等效操作,例如手指轻敲)进行调用。
  • 通过 FlyoutFlyoutBase.AttachedFlyout 属性与元素相关联,或在应用窗口顶部的菜单栏中进行分组。

当用户调用主要角色是显示其他命令的命令元素(例如按钮)时,请使用菜单弹出项目来承载单个顶级菜单,并将其以内联方式显示为附加到画布 UI 元素的弹出项目。 每个 MenuFlyout 都可以托管菜单项和子菜单。 对于可能需要更多组织或分组的应用,可以使用菜单栏来快速快捷地显示水平行中的多个顶层菜单集。

UWP 和 WinUI 2

重要

本文中的信息和示例是针对使用 Windows App SDKWinUI 3 的应用优化的,但通常适用于使用 WinUI 2 的 UWP 应用。 有关特定于平台的信息和示例,请查看 UWP API 参考。

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

用于 UWP 应用的 CommandBarFlyout 和 MenuBar 控件是 WinUI 2 的一部分。 有关详细信息(包括安装说明),请参阅 WinUI 2。 这些控件的 API 同时存在于 Windows.UI.Xaml.ControlsMicrosoft.UI.Xaml.Controls 命名空间中。

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

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

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

<muxc:CommandBarFlyout />
<muxc:MenuBar />