添加应用栏和工具栏 (HTML)

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发,请参阅 最新文档 ]

使用应用栏显示与用户上下文(通常是当前页面或当前选定的内容)相关的命令。 应用栏表示在用户点击应用栏上的省略号后转为打开状态的命令图面,可显示图标按钮和菜单项(如果已启用)的标签。 AppBarCommand 既可以是“主要”命令,也可以是“辅助”命令。主要命令作为按钮命令在应用栏操作区域中可见,而在溢出区域中,辅助命令作为菜单命令始终处于隐藏状态。 应用栏限制为在应用程序屏幕的顶部或底部,并始终覆盖画布。

应用栏示例

工具栏是应用栏的一种特殊形式,并且是一个用于解决命令扩展问题的简单控件。此控件具有一个操作区域,其中的命令可以立即使用;还具有一个溢出区域,其中的命令处于隐藏状态,但可以根据最终用户发出的请求进行显示。该控件通过在空间受限时,允许命令以动态方式从主要区域移动到辅助区域,从而支持自适应行为。 工具栏不限于某个应用中的单个位置,而可以位于如应用栏、浮出控件等多个位置中以及画布上。

可以在尝试 WinJS 网站上尝试使用应用栏、工具栏和其他关键的 Windows JavaScript 库 (WinJS) 功能。

需要记住的重要一点是,应用栏和工具栏仅在以下某些方面不同:

  • 应用栏是光解除该操作的叠加项,这表示它将始终覆盖屏幕的某些部分。
  • 像所有光解除该操作的叠加项一样,应用栏必须始终是 <body> 元素的直接子项。
  • 关闭时,工具栏不是叠加项,这意味着它必须像任何其他组件一样具有自己的布局空间。
  • 打开时,工具栏因其以垂直方式展开,将像叠加项一样覆盖临近内容。

本部分内容

主题 描述

添加带有命令的工具栏 (HTML)

ToolBar 是一个简单的控件,用于解决命令扩展问题。它具有一个 action area,其中的命令可以立即使用;还具有一个 overflow area,其中的命令处于隐藏状态,但可以根据最终用户发出的请求进行显示。该控件通过在空间受限时,允许命令以动态方式从主要区域移动到辅助区域,从而支持自适应行为ToolBar 不限于某个应用中的单个位置,而可以位于如 SplitviewFlyout 等多个位置中以及 canvas 上。

添加带有命令的应用栏 (HTML)

本文章介绍如何向使用 JavaScript 的 Windows 运行时应用添加应用栏。

添加带有自定义内容的应用栏 (HTML)

可将带有自定义内容的应用栏添加到使用 JavaScript 的 Windows 应用商店应用。

如何协同使用应用栏和 ListView

此操作指南解释如何在遵循应用栏最佳实践的同时,通过 ListView 与应用栏之间的交互支持以下这些方案。

设置应用栏和工具栏的样式 (HTML)

提供了有关如何设置应用栏或工具栏及其控件的样式示例。