新增 AppBar 與工具列 (HTML)

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App,請參閱 最新文件 ]

使用 AppBar 可顯示與使用者內容 (通常為目前的頁面或目前的選取範圍) 相關的命令。 AppBar 代表的命令介面會在使用者點選 AppBar 上的省略符號時進入開啟狀態,顯示圖示按鈕與功能表項目 (如果已啟用) 的標籤。 AppBarCommand 可以是 "primary" 或 "secondary"。Primary 命令在 AppBar 的動作區域中是可見的按鈕命令,而 secondary 命令在溢位區域中一律是隱藏的功能表命令。 AppBar 限制在應用程式顯示畫面的頂端或底部,永遠會覆蓋住畫布。

應用程式列範例

工具列是一種特殊形式的 AppBar,是一種可處理命令延展性的簡單控制項。這個控制項有一個可立即取得命令的動作區域,以及一個會隱藏命令並在使用者要求時才顯示命令的溢位區域。此控制項允許在空間有限時將命令從主要區域動態移至次要區域,藉以支援調適性行為。 ToolBar 不侷限在應用程式中的某一個位置,其可以位在多個不同位置 (例如 AppBar、Flyout) 以及畫布上。

您可以嘗試在試用 WinJS 網站上使用 AppBar、工具列以及適用於 JavaScript 的 Windows Library (WinJS) 的其他重要功能。

要記住的重點是 AppBar 和工具列只有一些地方不同:

  • AppBar 是一個淺色可解除的覆疊,表示它永遠會覆蓋在畫面的某個部分。
  • AppBar 就像所有淺色可解除的覆疊一樣,必須永遠是 <body> 元素的直接子項。
  • 工具列在關閉時不能覆疊,表示它必須像任何其他元件一樣有它自己的配置空間。
  • 工具列在開啟時就像覆疊一樣,當它垂直延伸時會覆蓋相鄰的內容。

在這個章節中

主題 說明

新增包含命令的工具列 (HTML)

ToolBar 是一個可解決命令延展性的簡單控制項。它具備其中命令可立即使用的 action area,以及其中命令已經隱藏但可在使用者要求時顯示的 overflow area。控制項可透過允許命令在空間有限時從主要區域動態移動至次要區域來支援調適性行為ToolBar並不一定要在應用程式中的單一位置,而是可以在多個不同位置 (例如 SplitviewFlyoutcanvas 上) 找到。

新增包含命令的 AppBar (HTML)

本文說明如何使用 JavaScript 將 AppBar 新增到 Windows 執行階段 app。

新增含自訂內容的 AppBar (HTML)

您可以將含有自訂內容的 AppBar 新增到使用 JavaScript 的 Windows 市集應用程式。

如何讓應用程式列與 ListView 搭配使用

這篇作法說明 ListView 與 AppBar 在遵循 AppBar 最佳做法來支援這些案例時,彼此之間的互動。

設計 AppBar 與工具列 (HTML) 的樣式

提供如何設定 AppBar 或工具列的樣式及其控制項的範例。