在 .NET MAUI 桌面应用中显示菜单栏

.NET Multi-platform App UI (.NET MAUI) 菜单栏是一个容器,可在 Mac Catalyst 和 Windows 上应用顶部的水平行中显示一组菜单。

菜单栏中的每个顶级菜单(称为菜单栏项)由 MenuBarItem 对象表示。 MenuBarItem 定义以下属性:

  • Text,类型为 string,用于定义菜单文本。
  • IsEnabled,类型为 boolean,用于指定是否启用菜单。 此属性的默认值为 true

这些属性由 BindableProperty 对象提供支持,表示它们可以是数据绑定的目标,并可以设置样式。

MenuBarItem 可以包含以下子级:

MenuFlyoutSubItem 派生自 MenuFlyoutItem,而后者又从 MenuItem 派生。 MenuItem 定义多个属性,它们可以指定菜单项的外观和行为。 菜单项或子项的外观可以通过设置 TextIconImageSource 的属性定义。 可通过设置 ClickedCommandCommandParameter 的属性定义对单击菜单项或子项的响应。 有关菜单项的详细信息,请参阅显示菜单项

创建菜单栏项

MenuBarItem 对象可以添加到 ContentPage 上类型为 IList<MenuBarItem>MenuBarItems 集合中。 将 .NET MAUI 桌面应用添加到托管在 NavigationPage 或 Shell 应用中的任何 ContentPage 时,此类应用将显示一个包含菜单项的菜单栏。

以下示例显示了用于定义菜单栏项的一个 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 的菜单项。

可以将键盘快捷键添加到菜单栏中的菜单项,以便能够通过键盘快捷方式调用菜单项。 有关详细信息,请参阅键盘快捷键

在菜单项上显示图标

MenuFlyoutItemMenuFlyoutSubItem 继承了 MenuItem 中的 IconImageSource 属性,此属性支持在菜单项的文本旁边显示一个小图标。 此图标可以是图像,也可以是字体图标。

警告

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 应用项目添加图像