Xamarin.Forms MenuItem
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 oggettoICommand
che consente l'associazione di azioni utente, ad esempio tocco di dito o clic, ai comandi definiti in un modello di visualizzazione.CommandParameter
è unobject
oggetto che specifica il parametro che deve essere passato aCommand
.IconImageSource
è unImageSource
valore che definisce l'icona di visualizzazione.IsDestructive
è unbool
valore che indica se l'oggetto rimuove l'elementoMenuItem
dell'interfaccia utente associato dall'elenco.IsEnabled
è unbool
valore che indica se questo oggetto risponde all'input dell'utente.Text
è unstring
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());
}
Icone MenuItem
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.