Share via

功能表和操作功能表

  • 發行項

功能表和操作功能表的外觀和可包含的內容皆非常相似。 它們都會顯示有組織的命令或選項清單，並藉由隱藏來節省空間，直到使用者需要它們為止。 但是它們之間有差異，例如：您應該使用什麼來建立它們，以及使用者如何存取它們。

Example of a typical context menu

這是正確的控制項嗎？

功能表和操作功能表藉由隱藏這些命令來組織命令並節省空間，直到使用者需要它們為止。 若要顯示任意內容 (如通知或確認要求)，請使用對話方塊或飛出視窗。

如果頻繁使用特定命令並且您有可用的空間，請考慮將它直接放在其自身元素中，讓使用者不必經由功能表即可取得它。

何時應該使用功能表或操作功能表？

  • 如果裝載元素為按鈕或一些其他命令元素，且其主要作用是呈現其他命令，請使用功能表。
  • 如果裝載元素是具有其他主要用途 (例如呈現文字或影像) 的一些其他類型的元素，請使用操作功能表。

如果您想要將命令 (例如：剪下、複製和貼上) 新增至文字或影像元素，請使用操作功能表而非功能表。 在此案例中，文字元素的主要作用是呈現和編輯文字；其他命令 (例如：剪下、複製和貼上) 是次要命令，且屬於操作功能表。

Example of context menu in photo gallery

操作功能表

操作功能表具有下列特性：

  • 連結至單一元素，並會顯示次要命令。
  • 透過以滑鼠右鍵按一下 (或是對等動作，例如使用手指長按) 來叫用。
  • 透過元素的 ContextFlyout 屬性與元素相關聯。

如果操作功能表包含常用命令 (例如複製、剪下、貼上、刪除、共用或文字選擇命令)，請使用命令列飛出視窗，將這些常用命令分組為主要命令，使它們將在操作功能表中顯示為單一水平列。

如果操作功能表不包含常用命令，則可以使用命令列飛出視窗或功能表飛出視窗來顯示操作功能表。 我們建議使用 CommandBarFlyout，因為它提供了比 MenuFlyout 更多的功能，而且如有需要，可以只使用次要命令來達到與 MenuFlyout 相同的行為和外觀。

功能表具有下列特性：

  • 有一個隨時顯示的進入點 (例如：畫面頂端的 [檔案] 功能表)。
  • 通常附加至按鈕或父功能表項。
  • 透過以滑鼠左鍵按一下 (或是等效動作，例如使用手指點選) 來叫用。
  • 透過其 Flyout \(英文\) 或 FlyoutBase.AttachedFlyout \(英文\) 屬性來與元素產生關聯，或是分組在應用程式視窗頂端的功能表列中。

當使用者叫用一個主要作用是顯示其他命令的命令元素 (例如：按鈕) 時，請使用功能表飛出視窗來裝載單一最上層功能表，以內嵌方式顯示為附加至畫布上 UI 元素的飛出視窗。 每個 MenuFlyout 都可以裝載功能表項目和子功能表。 對於可能需要更多組織或分組的應用程式，可以使用 功能表列做為快速且簡單的方法，在水平列中顯示一組最上層的多個功能表。

UWP 和 WinUI 2

重要

本文中的資訊和範例針對使用 Windows App SDK 和 WinUI 3 的應用程式進行了最佳化，但通常適用於使用 WinUI 2 的 UWP 應用程式。 如需平台特定資訊和範例，請參閱 UWP API 參考。

本節包含您在 UWP 或 WinUI 2 應用程式中使用控制項所需的資訊。

UWP 應用的 CommandBarFlyout 和 MenuBar 控制項是作為 Windows UI 函式庫 2 的一部分包含在內。 如需詳細資訊 (包括安裝指示)，請參閱 Windows UI 程式庫。 此控制項的 API 同時位於 Windows.UI.Xaml.Controls 和 Microsoft.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 />