Condividi tramite


Visualizzare le voci di menu

La classe .NET Multipiattaforma App UI (.NET MAUI) MenuItem può essere usata per definire voci di menu per menu come ListView menu di scelta rapida degli elementi e menu a comparsa dell'app Shell.

Gli screenshot seguenti mostrano MenuItem gli oggetti in un ListView menu di scelta rapida in Android:

Screenshot of menu items in a ListView context menu on Android.

La MenuItem classe definisce le proprietà seguenti:

  • Command, di tipo ICommand, consente l'associazione di azioni utente, ad esempio tocco di dito o clic, ai comandi definiti in un modello di visualizzazione.
  • CommandParameter, di tipo object, specifica il parametro che deve essere passato a Command.
  • IconImageSource, di tipo ImageSource, definisce l'icona della voce di menu.
  • IsDestructive, di tipo bool, indica se l'oggetto rimuove l'elemento MenuItem dell'interfaccia utente associato dall'elenco.
  • IsEnabled, di tipo bool, indica se la voce di menu risponde all'input dell'utente.
  • Text, di tipo string, specifica il testo della voce di menu.

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

Creare un oggetto MenuItem

Per creare una voce di menu, ad esempio come menu di scelta rapida nelle voci di un ListView oggetto, creare un MenuItem oggetto all'interno di un ViewCell oggetto utilizzato come DataTemplate oggetto per l'oggetto ListView.ItemTemplate Quando l'oggetto ListView viene popolato, verrà creato ogni elemento usando DataTemplate, esponendo le MenuItem scelte quando il menu di scelta rapida viene attivato per un elemento.

Nell'esempio seguente viene illustrato come creare un MenuItem oggetto all'interno del contesto di un ListView oggetto :

<ListView>
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <ViewCell.ContextActions>
                    <MenuItem Text="Context menu option" />
                </ViewCell.ContextActions>
                <Label Text="{Binding .}" />
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

In questo esempio verrà generato un MenuItem oggetto con testo. Tuttavia, l'aspetto di un MenuItem oggetto varia a seconda delle piattaforme.

È anche possibile creare un oggetto MenuItem nel codice:

// Return a ViewCell instance that is used as the template for each list item
DataTemplate dataTemplate = new DataTemplate(() =>
{
    // A Label displays the list item text
    Label label = new Label();
    label.SetBinding(Label.TextProperty, ".");

    // A ViewCell serves as the DataTemplate
    ViewCell viewCell = new ViewCell
    {
        View = label
    };

    // Add a MenuItem to the ContextActions
    MenuItem menuItem = new MenuItem
    {
        Text = "Context Menu Option"
    };
    viewCell.ContextActions.Add(menuItem);

    // Return the custom ViewCell to the DataTemplate constructor
    return viewCell;
});

ListView listView = new ListView
{
    ...
    ItemTemplate = dataTemplate
};

Un menu di scelta rapida in un ListView oggetto viene attivato e visualizzato in modo diverso in ogni piattaforma. In Android, il menu di scelta rapida viene attivato dalla pressione prolungata su una voce di elenco. Il menu di scelta rapida sostituisce l'area del titolo e della barra di spostamento e MenuItem le opzioni vengono visualizzate come pulsanti orizzontali. In iOS il menu di scelta rapida viene attivato scorrendo rapidamente su una voce di elenco. Il menu di scelta rapida viene visualizzato nella voce di elenco e MenuItems viene visualizzato come pulsanti orizzontali. In Windows il menu di scelta rapida viene attivato facendo clic con il pulsante destro del mouse su una voce di elenco. Il menu di scelta rapida viene visualizzato vicino al cursore come elenco verticale.

Definire il comportamento di MenuItem

La MenuItem classe definisce un Clicked evento. Un gestore eventi può essere associato a questo evento per reagire ai tocco o ai clic sugli MenuItem oggetti:

<MenuItem ...
          Clicked="OnItemClicked" />

Un gestore eventi può essere collegato anche nel codice:

MenuItem item = new MenuItem { ... };
item.Clicked += OnItemClicked;

Questi esempi fanno riferimento a un OnItemClicked gestore eventi, illustrato nell'esempio seguente:

void OnItemClicked(object sender, EventArgs e)
{
    MenuItem menuItem = sender as MenuItem;

    // Access the list item through the BindingContext
    var contextItem = menuItem.BindingContext;

    // Do something with the contextItem here
}

Definire l'aspetto di un oggetto MenuItem

Le icone vengono specificate utilizzando la IconImageSource proprietà . Se si specifica un'icona, il testo specificato dalla Text proprietà non verrà visualizzato. Lo screenshot seguente mostra un MenuItem oggetto con un'icona in Android:

Screenshot of menu items, with an icon, in a ListView context menu on Android.

MenuItem gli oggetti visualizzano solo icone in Android. In altre piattaforme verrà visualizzato solo il testo specificato dalla Text proprietà .

Nota

Le immagini possono essere archiviate in un'unica posizione nel progetto dell'app. Per altre informazioni, vedere Aggiungere immagini a un progetto MAUI .NET.

Abilitare o disabilitare un oggetto MenuItem in fase di esecuzione

Per abilitare o disabilitare un oggetto MenuItem in fase di esecuzione, associarne la Command proprietà a un'implementazione ICommand e assicurarsi che un canExecute delegato abiliti e disabiliti l'oggetto in base alle ICommand esigenze.

Importante

Non associare la IsEnabled proprietà a un'altra proprietà quando si usa la Command proprietà per abilitare o disabilitare .MenuItem