Xamarin.Forms Menuitem

  • Articolo

Download Sample Scaricare l'esempio

La Xamarin.FormsMenuItem classe definisce le voci di menu per i menu, ad ListView esempio i menu di scelta rapida degli elementi e i menu a comparsa dell'applicazione Shell.

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

La MenuItem classe definisce le proprietà seguenti:

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

Queste proprietà sono supportate da BindableProperty oggetti in modo che l'istanza MenuItem possa essere la destinazione dei data binding.

Creare un oggetto MenuItem

MenuItem gli oggetti possono essere utilizzati all'interno di un menu di scelta rapida sugli elementi di un ListView oggetto. Il modello più comune consiste nel creare MenuItem oggetti all'interno di un'istanza ViewCell di , che viene usato 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 illustrata MenuItem l'istanza 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>

È anche possibile creare un oggetto MenuItem nel codice:

// A function returns 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 instance to the ContextActions
    MenuItem menuItem = new MenuItem
    {
        Text = "Context Menu Option"
    };
    viewCell.ContextActions.Add(menuItem);

    // The function returns the custom ViewCell
    // to the DataTemplate constructor
    return viewCell;
});

// Finally, the dataTemplate is provided to
// the ListView object
ListView listView = new ListView
{
    ...
    ItemTemplate = dataTemplate
};

Definire il comportamento di MenuItem con gli eventi

La classe MenuItem espone un evento Clicked. Un gestore eventi può essere associato a questo evento per reagire ai tocco o ai clic sull'istanza MenuItem in XAML:

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

Un gestore eventi può essere collegato anche nel codice:

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

Gli esempi precedenti hanno fatto riferimento a un OnItemClicked gestore eventi. Il codice seguente illustra un'implementazione di esempio:

void OnItemClicked(object sender, EventArgs e)
{
    // The sender is the menuItem
    MenuItem menuItem = sender as MenuItem;

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

    // Do something with the contextItem here
}

Definire il comportamento di MenuItem con MVVM

La MenuItem classe supporta il modello Model-View-ViewModel (MVVM) tramite BindableProperty oggetti e l'interfaccia ICommand . Il codice XAML seguente mostra MenuItem le istanze associate ai comandi definiti in un modello di visualizzazione:

<ContentPage.BindingContext>
    <viewmodels:ListPageViewModel />
</ContentPage.BindingContext>

<StackLayout>
    <Label Text="{Binding Message}" ... />
    <ListView ItemsSource="{Binding Items}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <ViewCell.ContextActions>
                        <MenuItem Text="Edit"
                                    IconImageSource="icon.png"
                                    Command="{Binding Source={x:Reference contentPage}, Path=BindingContext.EditCommand}"
                                    CommandParameter="{Binding .}"/>
                        <MenuItem Text="Delete"
                                    Command="{Binding Source={x:Reference contentPage}, Path=BindingContext.DeleteCommand}"
                                    CommandParameter="{Binding .}"/>
                    </ViewCell.ContextActions>
                    <Label Text="{Binding .}" />
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

Nell'esempio precedente vengono definiti due MenuItem oggetti con le relative Command proprietà e CommandParameter associate ai comandi nel modello di visualizzazione. Il modello di visualizzazione contiene i comandi a cui si fa riferimento nel codice XAML:

public class ListPageViewModel : INotifyPropertyChanged
{
    ...

    public ICommand EditCommand => new Command<string>((string item) =>
    {
        Message = $"Edit command was called on: {item}";
    });

    public ICommand DeleteCommand => new Command<string>((string item) =>
    {
        Message = $"Delete command was called on: {item}";
    });
}

L'applicazione di esempio include una DataService classe usata per ottenere un elenco di elementi per popolare gli ListView oggetti. Viene creata un'istanza di un modello di visualizzazione, con elementi della DataService classe e impostata come BindingContext nel code-behind:

public MenuItemXamlMvvmPage()
{
    InitializeComponent();
    BindingContext = new ListPageViewModel(DataService.GetListItems());
}

Avviso

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

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

Per altre informazioni sull'uso delle immagini in Xamarin.Forms, vedere Immagini in Xamarin.Forms.

Abilitare o disabilitare un oggetto MenuItem in fase di esecuzione

Per abilitare la disabilitazione di 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

L'esempio seguente mostra un oggetto MenuItem la cui Command proprietà è associata a un ICommand oggetto denominato MyCommand:

<MenuItem Text="My menu item"
          Command="{Binding MyCommand}" />

L'implementazione ICommand richiede un canExecute delegato che restituisce il valore di una bool proprietà per abilitare e disabilitare MenuItem:

public class MyViewModel : INotifyPropertyChanged
{
    bool isMenuItemEnabled = false;
    public bool IsMenuItemEnabled
    {
        get { return isMenuItemEnabled; }
        set
        {
            isMenuItemEnabled = value;
            MyCommand.ChangeCanExecute();
        }
    }

    public Command MyCommand { get; private set; }

    public MyViewModel()
    {
        MyCommand = new Command(() =>
        {
            // Execute logic here
        },
        () => IsMenuItemEnabled);
    }
}

In questo esempio, l'oggetto MenuItem viene disabilitato fino a quando non viene impostata la IsMenuItemEnabled proprietà . In questo caso, viene chiamato il Command.ChangeCanExecute metodo che determina la rivalutazione del canExecute delegato MyCommand .

Comportamento del menu di scelta rapida multipiattaforma

I menu di scelta rapida sono accessibili e visualizzati 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 UWP 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.