快顯功能表和功能表列

功能表快顯視窗用於功能表和內容功能表情境，以在使用者要求時顯示一系列命令或選項的清單。選單快顯會顯示可包含選單項目和子選單的單一最上層內嵌選單。若要在水平列中顯示一組最上層的多個功能表，請使用功能表列 (通常位於應用程式視窗頂端)。

典型內容選單的範例

這是正確的控制嗎？

如需識別功能表與捷徑功能表的案例說明，請參閱功能表和捷徑功能表，以及何時使用功能表快顯視窗和命令列快顯功能表的指導。

功能表展開視窗可用作功能表及內容功能表，以組織命令。若要顯示任意內容 (如通知或確認要求)，請使用對話方塊或飛出視窗。

如果經常使用特定命令，而且您有可用的空間，請參閱集合命令，以取得將命令直接放在其本身元素中的範例，讓使用者不必瀏覽功能表來取得命令。

重要 API：MenuFlyout 類別、 ContextFlyout 屬性、 FlyoutBase.AttachedFlyout 屬性

開啟 WinUI 3 資源庫應用程式，並查看 MenuFlyout 運作情形

WinUI 3 圖庫應用程式包含互動式的 WinUI 控制項與功能範例。你可以從 Microsoft Store下載 App，或在 GitHub 瀏覽原始碼。

若要創建彈出式功能表，您可以使用 MenuFlyout 類別。你可以透過在 MenuFlyout 物件中新增 MenuFlyoutItem、 MenuFlyoutSubItem、 SplitMenuFlyoutItem、 ToggleMenuFlyoutItem、 RadioMenuFlyoutItem 和 MenuFlyoutSeparator 物件來定義選單的內容。

這些物件用於：

MenuFlyoutItem - 執行立即動作。
MenuFlyoutSubItem - 包含功能表項的串聯清單。
SplitMenuFlyoutItem——執行預設動作，相關動作則以階層式清單呈現。更多資訊請參見新增分割選單項目。
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 == Microsoft.UI.Colors.Red)
    {
        rectangleFill.Color = Microsoft.UI.Colors.Blue;
    }
    else
    {
        rectangleFill.Color = Microsoft.UI.Colors.Red;
    }
}

下一個範例幾乎完全相同，但不是使用 ContextFlyout 屬性將 MenuFlyout 類別顯示為作功能表，而是使用 FlyoutBase.ShowAttachedFlyout 屬性將它顯示為功能表。

<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 == Microsoft.UI.Colors.Red)
    {
        rectangleFill.Color = Microsoft.UI.Colors.Blue;
    }
    else
    {
        rectangleFill.Color = Microsoft.UI.Colors.Red;
    }
}

重要 API：SplitMenuFlyoutItem 類別、 Items 屬性

打開 WinUI 3 圖庫應用程式，看看 SplitMenuFlyoutItem 的運作

WinUI 3 圖庫應用程式包含互動式的 WinUI 控制項與功能範例。你可以從 Microsoft Store下載 App，或在 GitHub 瀏覽原始碼。

SplitMenuFlyoutItem 在快顯功能表中提供分割按鈕式體驗。它分為兩個部分：

主要部分執行預設動作，類似 MenuFlyoutItem。要在使用者選擇時回應，請處理點擊事件或設定 Command 屬性。
次要部分會開啟一個相關選項的子選單，例如 MenuFlyoutSubItem。

當指令有常見的預設動作和一些變化時，例如儲存不同格式的檔案，請使用分割選單項目。這樣菜單會比把每個變體單獨列出時短。

備註

SplitMenuFlyoutItem 需要 Windows 應用程式 SDK 1.8.6 或更新版本。

這個來自 WinUI 3 圖庫應用程式的範例，將兩個分割選單項目加入 MenuFlyout。子選單項目在 Items 屬性中。因為 Items 是 SplitMenuFlyoutItem 的 XAML 內容屬性，你可以直接在 SplitMenuFlyoutItem 元素中加入子選單項目。

<StackPanel Orientation="Horizontal" Spacing="12">
    <Button Content="File Options">
        <Button.Flyout>
            <MenuFlyout>
                <SplitMenuFlyoutItem Text="Save" Click="SplitMenuFlyoutItem_Click">
                    <SplitMenuFlyoutItem.Icon>
                        <FontIcon Glyph="&#xE74E;" />
                    </SplitMenuFlyoutItem.Icon>
                    <MenuFlyoutItem Text="Save as .docx" Click="SplitMenuFlyoutItem_Click" />
                    <MenuFlyoutItem Text="Save as .pdf" Click="SplitMenuFlyoutItem_Click" />
                    <MenuFlyoutItem Text="Save as .txt" Click="SplitMenuFlyoutItem_Click" />
                </SplitMenuFlyoutItem>
                <SplitMenuFlyoutItem Text="Share" Icon="Share" Click="SplitMenuFlyoutItem_Click">
                    <MenuFlyoutItem Text="Share via email" Click="SplitMenuFlyoutItem_Click" />
                    <MenuFlyoutItem Text="Share via link" Click="SplitMenuFlyoutItem_Click" />
                </SplitMenuFlyoutItem>
            </MenuFlyout>
        </Button.Flyout>
    </Button>
    <TextBlock x:Name="SelectedCommandText" VerticalAlignment="Center" />
</StackPanel>

private void SplitMenuFlyoutItem_Click(object sender, RoutedEventArgs e)
{
    // SplitMenuFlyoutItem derives from MenuFlyoutItem, so one handler works for both.
    if (sender is MenuFlyoutItem selectedItem)
    {
        SelectedCommandText.Text = "Clicked: " + selectedItem.Text;
    }
}

子選單也可以包含 MenuFlyoutSeparator 物件及其他 SplitMenuFlyoutItem 物件。若集合 Items 為空，次要部分會被停用。

要自訂子選單，請將 SubMenuPresenterStyle 設為子選單呈現者的樣式，並將 SubMenuItemStyle 設為子選單中項目的樣式。

使用者在使用鍵盤時會分別與這兩個部分互動：

當主要部分有焦點時，按 Enter 鍵或 Space 鍵執行預設動作，或按右箭頭鍵將焦點移到次要部分。
當次要部分有對焦時，按 Enter 鍵或向右方向鍵開啟子選單。
當子選單開啟時，按 Esc 鍵或向左方向鍵關閉子選單。

螢幕朗讀者也會分別宣布這兩個部分。次要部分會被宣告為按鈕，提供此選單項目的更多選項。

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 中的圖示大小為 16x16px。如果您使用 SymbolIcon、FontIcon 或 PathIcon，圖示會自動縮放成正確大小，但不會失去逼真度。如果您使用 BitmapIcon，請確定您的資產為 16x16px。

輕鬆關閉

輕按關閉控制項（例如功能表、快捷選單及其他彈出視窗）會將鍵盤和遊戲控制器的焦點限制在暫時性介面中，直到被關閉。為了提供這種行為的視覺提示，Xbox 上的光線關閉控制會繪製一個覆蓋層，讓超出範圍的使用者介面變得更暗。您可以使用 LightDismissOverlayMode 屬性來修改此行為。預設情況下，瞬態介面會在 Xbox（Auto）上繪製光線遮蓋，但不會在其他裝置系列上繪製。您可以選擇將重疊強制設為一律開啟或關閉。

<MenuFlyout LightDismissOverlayMode="Off" />

重要 API：MenuBar 類別。 MenuBarItem 類別

開啟 WinUI 3 資源庫應用程式，並查看 MenuBar 運作情形

WinUI 3 圖庫應用程式包含互動式的 WinUI 控制項與功能範例。你可以從 Microsoft Store下載 App，或在 GitHub 瀏覽原始碼。

您會使用與快顯功能表相同的元素來在功能表列中建立功能表。不過，與其將 MenuFlyoutItem 物件分組到 MenuFlyout 中，您會將它們分組到 MenuBarItem 元素中。每個 MenuBarItem 都會被新增至 MenuBar 中作為最上層功能表。

備註

此範例僅示範如何建立 UI 結構，但不會示範任何命令的實作。

<MenuBar>
    <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"/>
    </MenuBarItem>

    <MenuBarItem Title="Edit">
        <MenuFlyoutItem Text="Undo"/>
        <MenuFlyoutItem Text="Cut"/>
        <MenuFlyoutItem Text="Copy"/>
        <MenuFlyoutItem Text="Paste"/>
    </MenuBarItem>

    <MenuBarItem Title="View">
        <MenuFlyoutItem Text="Output"/>
        <MenuFlyoutSeparator/>
        <RadioMenuFlyoutItem Text="Landscape" GroupName="OrientationGroup"/>
        <RadioMenuFlyoutItem Text="Portrait" GroupName="OrientationGroup" IsChecked="True"/>
        <MenuFlyoutSeparator/>
        <RadioMenuFlyoutItem Text="Small icons" GroupName="SizeGroup"/>
        <RadioMenuFlyoutItem Text="Medium icons" IsChecked="True" GroupName="SizeGroup"/>
        <RadioMenuFlyoutItem Text="Large icons" GroupName="SizeGroup"/>
    </MenuBarItem>

    <MenuBarItem Title="Help">
        <MenuFlyoutItem Text="About"/>
    </MenuBarItem>
</MenuBar>

意見反應

此頁面對您有幫助嗎？

上次更新時間： 2026-10-16

這是正確的控制嗎？

建立功能表選單

新增分割選單項目

Icons

輕鬆關閉

建立功能表列

相關文章

意見反應

其他資源