Visualizzare una barra dei menu in un'app desktop MAUI .NET

Una barra dei menu dell'interfaccia utente dell'app multipiattaforma .NET (.NET MAUI) è un contenitore che presenta un set di menu in una riga orizzontale, nella parte superiore di un'app in Mac Catalyst e Windows.

Ogni menu di primo livello nella barra dei menu, noto come voce della barra dei menu, è rappresentato da un MenuBarItem oggetto . MenuBarItem definisce le proprietà seguenti:

• Text, di tipo string, definisce il testo del menu.
• IsEnabled, di tipo boolean, specifica se il menu è abilitato. Il valore predefinito di questa proprietà è true.

Queste proprietà sono supportate da BindableProperty oggetti, il che significa che possono essere destinazioni di data binding e stili.

Un MenuBarItem può essere costituito dai seguenti elementi figlio:

• MenuFlyoutItem, che rappresenta una voce di menu su cui è possibile fare clic.
• MenuFlyoutSubItem, che rappresenta una voce di menu secondaria su cui è possibile fare clic.
• MenuFlyoutSeparator, ovvero una linea orizzontale che separa le voci nel menu.

MenuFlyoutSubItem deriva da MenuFlyoutItem, che a sua volta deriva da MenuItem. MenuItem definisce più proprietà che consentono di specificare l'aspetto e il comportamento di una voce di menu. L'aspetto di una voce di menu o di una voce secondaria può essere definito impostando le Textproprietà e IconImageSource . La risposta a una voce di menu o a una voce secondaria, fare clic può essere definita impostando le Clickedproprietà , Commande CommandParameter . Per altre informazioni sulle voci di menu, vedere Visualizzare le voci di menu.

Crea voci della barra dei menu

MenuBarItem È possibile aggiungere oggetti all'insieme MenuBarItems , di tipo IList<MenuBarItem>, in un oggetto ContentPage. Le app desktop MAUI .NET visualizzeranno una barra dei menu contenente voci di menu, quando vengono aggiunte a qualsiasi ContentPage app ospitata in un'app NavigationPage shell o .

L'esempio seguente mostra un oggetto ContentPage che definisce le voci della barra dei menu:

<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 questo esempio vengono definiti tre menu di primo livello. Ogni menu di primo livello include voci di menu e il secondo menu di primo livello ha un sottomenu e un separatore:

Nota

In Mac Catalyst, le voci di menu vengono aggiunte alla barra dei menu di sistema.

In questo esempio, ognuno MenuFlyoutItem definisce una voce di menu che esegue un oggetto ICommand quando selezionato.

I tasti di scelta rapida possono essere aggiunti alle voci di menu in una barra dei menu, in modo che una voce di menu possa essere richiamata tramite una scelta rapida da tastiera. Per altre informazioni, vedere Acceleratori di tastiera.

Visualizzare le icone nelle voci di menu

MenuFlyoutItem e MenuFlyoutSubItem ereditano la IconImageSource proprietà da MenuItem, che consente di visualizzare un'icona piccola accanto al testo per una voce di menu. Questa icona può essere un'immagine o un'icona del tipo di carattere.

Avviso

Mac Catalyst non supporta la visualizzazione delle icone nelle voci di menu.

L'esempio seguente mostra una voce della barra dei menu, in cui le icone per le voci di menu vengono definite usando le icone dei tipi di carattere:

<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 questo esempio, la voce della barra dei menu definisce tre voci di menu che visualizzano un'icona e un testo in Windows.

Per altre informazioni sulla visualizzazione delle icone dei tipi di carattere, vedere Visualizzare le icone dei tipi di carattere. Per informazioni sull'aggiunta di immagini ai progetti MAUI .NET, vedere Aggiungere immagini a un progetto di app MAUI .NET.