Share via

在 .NET MAUI 傳統型應用程式中顯示功能表欄

  • 發行項

.NET 多平臺應用程式 UI （.NET MAUI） 功能表欄是容器，可在 Mac Catalyst 和 Windows 上的應用程式頂端，以水平數據列呈現一組功能表。

功能表欄中的每個最上層功能表，稱為功能表欄專案，都是由 MenuBarItem 物件表示。 MenuBarItem 會定義下列屬性：

  • Text型 string別為 的 ，會定義功能表文字。
  • IsEnabled型 boolean別為 的 ，指定是否啟用功能表。 此屬性的預設值為 true。

這些屬性是由 BindableProperty 物件所支援，這表示這些屬性可以是數據系結的目標，並設定樣式。

MenuBarItem可以包含下列子系：

MenuFlyoutSubItem 衍生自 MenuFlyoutItem，而後者又衍生自 MenuItem。 MenuItem 定義多個屬性，讓功能表項的外觀和行為得以指定。 您可以藉由設定 Text、 和 IconImageSource 屬性來定義選單項或子項目的外觀。 您可以藉由設定 Clicked、 Command和 CommandParameter 屬性，來定義對功能表項或子項目的回應。 如需功能表項的詳細資訊，請參閱 顯示功能表項。

建立功能表欄專案

MenuBarItem 物件可以加入 集合， MenuBarItems 類型 IList<MenuBarItem>為 上的 ContentPage。 .NET MAUI 傳統型應用程式會在將功能表項新增至或殼層應用程式中裝載的任何ContentPageNavigationPage專案時，顯示功能表欄，其中包含功能表項。

下列範例顯示 ContentPage 定義選單列項目的 ：

<ContentPage ...>
    <ContentPage.MenuBarItems>
        <MenuBarItem Text="File">
            <MenuFlyoutItem Text="Exit"
                            Command="{Binding ExitCommand}" />
        </MenuBarItem>
        <MenuBarItem Text="Locations">
            <MenuFlyoutSubItem Text="Change Location">
                <MenuFlyoutItem Text="Redmond, USA"
                                Command="{Binding ChangeLocationCommand}"
                                CommandParameter="Redmond" />
                <MenuFlyoutItem Text="London, UK"
                                Command="{Binding ChangeLocationCommand}"
                                CommandParameter="London" />
                <MenuFlyoutItem Text="Berlin, DE"
                                Command="{Binding ChangeLocationCommand}"
                                CommandParameter="Berlin"/>
            </MenuFlyoutSubItem>
            <MenuFlyoutSeparator />            
            <MenuFlyoutItem Text="Add Location"
                            Command="{Binding AddLocationCommand}" />
            <MenuFlyoutItem Text="Edit Location"
                            Command="{Binding EditLocationCommand}" />
            <MenuFlyoutItem Text="Remove Location"
                            Command="{Binding RemoveLocationCommand}" />                            
        </MenuBarItem>
        <MenuBarItem Text="View">
            <MenuFlyoutItem Text="Refresh"
                            Command="{Binding RefreshCommand}" />
            <MenuFlyoutItem Text="Change Theme"
                            Command="{Binding ChangeThemeCommand}" />
        </MenuBarItem>
    </ContentPage.MenuBarItems>
</ContentPage>

此範例會定義三個最上層功能表。 每個最上層功能表都有功能表項，而第二個最上層功能表有子選單和分隔符：

功能表欄的螢幕快照。

注意

在 Mac Catalyst 上，功能表項會新增至系統功能表欄。

在此範例中，每個 MenuFlyoutItem 都會定義在選取時執行 ICommand 的功能表項。

鍵盤快捷方式可以新增至功能表欄中的功能表項，以便透過鍵盤快捷方式叫用功能表項。 如需詳細資訊，請參閱 鍵盤快捷方式。

在功能表項上顯示圖示

MenuFlyoutItem 和 MenuFlyoutSubItem 繼承 IconImageSource 的 MenuItem屬性，這可讓功能表項的文字旁邊顯示小型圖示。 此圖示可以是影像或字型圖示。

警告

Mac Catalyst 不支援在功能表項上顯示圖示。

下列範例顯示功能表列專案，其中功能表項的圖示是使用字型圖示來定義：

<ContentPage.MenuBarItems>
    <MenuBarItem Text="Media">
        <MenuFlyoutItem Text="Play">
            <MenuFlyoutItem.IconImageSource>
                <FontImageSource Glyph="&#x25B6;"
                                 FontFamily="Arial" />
            </MenuFlyoutItem.IconImageSource>
        </MenuFlyoutItem>
        <MenuFlyoutItem Text="Pause"
                        Clicked="OnPauseClicked">
            <MenuFlyoutItem.IconImageSource>
                <FontImageSource Glyph="&#x23F8;"
                                 FontFamily="Arial" />
            </MenuFlyoutItem.IconImageSource>
        </MenuFlyoutItem>
        <MenuFlyoutItem Text="Stop"
                        Clicked="OnStopClicked">
            <MenuFlyoutItem.IconImageSource>
                <FontImageSource Glyph="&#x23F9;"
                                 FontFamily="Arial" />
            </MenuFlyoutItem.IconImageSource>
        </MenuFlyoutItem>
    </MenuBarItem>
</ContentPage.MenuBarItems>

在此範例中，功能表欄專案會定義三個在 Windows 上顯示圖示和文字的功能表項。

如需顯示字型圖示的詳細資訊，請參閱 顯示字型圖示。 如需將映像新增至 .NET MAUI 專案的詳細資訊，請參閱 將映像新增至 .NET MAUI 應用程式專案。