Anzeige einer Menüleiste in einer .NET MAUI-Desktop-App

Eine .NET Multi-platform App UI (.NET MAUI) Menüleiste ist ein Container, der eine Reihe von Menüs in einer horizontalen Reihe am oberen Rand einer App auf Mac Catalyst und Windows darstellt.

Jedes Menü der obersten Ebene in der Menüleiste, ein so genannter Menüleisteneintrag, wird durch ein MenuBarItem-Objekt dargestellt. MenuBarItem definiert die folgenden Eigenschaften:

• Text, vom Typ string, definiert den Menütext.
• IsEnabled, vom Typ boolean, gibt an, ob das Menü aktiviert ist. Der Standardwert dieser Eigenschaft ist true.

Diese Eigenschaften werden von BindableProperty-Objekten unterstützt, was bedeutet, dass sie Ziele von Datenbindungen sein können und formatiert werden können.

Ein MenuBarItem kann aus den folgenden untergeordneten Elementen bestehen:

• MenuFlyoutItem, der ein Menüelement darstellt, der angeklickt werden kann.
• MenuFlyoutSubItem, das ein Untermenüelement darstellt, der angeklickt werden kann.
• MenuFlyoutSeparator, eine horizontale Linie, die die einzelnen Menüelemente voneinander trennt.

MenuFlyoutSubItem wird von MenuFlyoutItem abgeleitet, was wiederum von MenuItem abgeleitet wird. MenuItem definiert mehrere Eigenschaften, mit denen das Aussehen und das Verhalten eines Menüeintrags festgelegt werden können. Das Aussehen eines Menüelements oder Unterpunkts kann durch die Einstellung der Eigenschaften Text und IconImageSource definiert werden. Die Reaktion auf das Anklicken eines Menüelements oder Unterpunkts kann durch Einstellen der Eigenschaften Clicked, Command und CommandParameter definiert werden. Weitere Informationen zu den Menüelementen finden Sie unter Menüelemente anzeigen.

Menüleisteneinträge erstellen

MenuBarItem-Objekte können der MenuBarItems-Sammlung vom Typ IList<MenuBarItem> auf einem ContentPage hinzugefügt werden. .NET MAUI-Desktopanwendungen zeigen eine Menüleiste mit Menüelementen an, wenn sie zu einer ContentPage-App hinzugefügt werden, die in einer NavigationPage- oder Shell-App gehostet wird.

Das folgende Beispiel zeigt einen ContentPage, der Menüleistenelemente definiert:

<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>

In diesem Beispiel werden drei Menüs der obersten Ebene definiert. Jedes Top-Level-Menü hat Menüelemente, und das zweite Top-Level-Menü hat ein Untermenü und ein Trennzeichen:

Hinweis

Auf Mac Catalyst werden der Systemmenüleiste Menüelemente hinzugefügt.

In diesem Beispiel definiert jedes MenuFlyoutItem ein Menüelement, der bei Auswahl ein ICommand ausführt.

Tastaturkürzel können zu Menüelementen in einer Menüleiste hinzugefügt werden, sodass ein Menüelement über ein Tastenkürzel aufgerufen werden kann. Weitere Informationen finden Sie unter Tastaturkürzel.

Anzeigen von Symbolen in Menüelementen

MenuFlyoutItem und MenuFlyoutSubItem erben die Eigenschaft IconImageSource von MenuItem, die es ermöglicht, ein kleines Symbol neben dem Text für ein Menüelement anzuzeigen. Dieses Symbol kann entweder ein Bild oder ein Schriftsymbol sein.

Warnung

Mac Catalyst unterstützt die Anzeige von Symbolen in Menüelementen nicht.

Das folgende Beispiel zeigt einen Menüleisteneintrag, bei dem die Symbole für die Menüeinträge mithilfe von Schriftsymbolen definiert werden:

<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>

In diesem Beispiel definiert der Menüleisteneintrag drei Menüeinträge, die ein Symbol und Text auf Windows anzeigen.

Weitere Informationen zur Anzeige von Schriftsymbolen finden Sie unter Schriftsymbole anzeigen. Informationen zum Hinzufügen von Bildern zu .NET MAUI-Projekten finden Sie unter Hinzufügen von Bildern zu einem .NET MAUI-App-Projekt.