Xamarin.Forms Menuitem

  • Artykuł

Download Sample Pobieranie przykładu

Klasa Xamarin.FormsMenuItem definiuje elementy menu dla menu, takich jak ListView menu kontekstowe elementów i menu wysuwane aplikacji powłoki.

Poniższe zrzuty ekranu pokazują MenuItem obiekty w menu kontekstowym ListView w systemach iOS i Android:

Klasa MenuItem definiuje następujące właściwości:

  • Command to element ICommand , który umożliwia tworzenie powiązań akcji użytkownika, takich jak naciśnięcia palca lub kliknięcia, do poleceń zdefiniowanych w modelu widoków.
  • CommandParameterjest parametremobject, który określa parametr, który powinien zostać przekazany do .Command
  • IconImageSource jest wartością definiującą ImageSource ikonę wyświetlania.
  • IsDestructive jest wartością wskazującą bool , czy MenuItem element skojarzonego interfejsu użytkownika zostanie usunięty z listy.
  • IsEnabled jest wartością wskazującą bool , czy ten obiekt odpowiada na dane wejściowe użytkownika.
  • Text to wartość określająca string tekst wyświetlany.

Te właściwości są wspierane przez BindableProperty obiekty, dzięki czemu MenuItem wystąpienie może być obiektem docelowym powiązań danych.

Tworzenie elementu MenuItem

MenuItem obiekty mogą być używane w menu kontekstowym ListView w elementach obiektu. Najczęstszym wzorcem jest utworzenie MenuItem obiektów w ramach wystąpienia, które jest używane jako DataTemplate obiekt dla ListViewobiektu s ItemTemplate.ViewCell ListView Gdy obiekt zostanie wypełniony, utworzy każdy element przy użyciu DataTemplateelementu , uwidaczniając MenuItem opcje po aktywowaniu menu kontekstowego dla elementu.

W poniższym przykładzie pokazano MenuItem tworzenie wystąpienia w kontekście ListView obiektu:

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

Element MenuItem można również utworzyć w kodzie:

// 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
};

Definiowanie zachowania menuItem ze zdarzeniami

Klasa MenuItem uwidacznia Clicked zdarzenie. Program obsługi zdarzeń można dołączyć do tego zdarzenia w celu reagowania na naciśnięcia MenuItem lub kliknięcia wystąpienia w języku XAML:

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

Program obsługi zdarzeń można również dołączyć w kodzie:

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

Poprzednie przykłady odwołyły się do procedury obsługi zdarzeń OnItemClicked . Poniższy kod przedstawia przykładową implementację:

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
}

Definiowanie zachowania menuItem za pomocą maszyny MVVM

Klasa MenuItem obsługuje wzorzec Model-View-ViewModel (MVVM) za pośrednictwem BindableProperty obiektów i interfejsu ICommand . Poniższy kod XAML przedstawia MenuItem wystąpienia powiązane z poleceniami zdefiniowanymi w modelu viewmodel:

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

W poprzednim przykładzie dwa MenuItem obiekty są definiowane z ich Command właściwościami i CommandParameter powiązanymi z poleceniami w modelu widoków. Model widoku zawiera polecenia, do których odwołuje się kod 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}";
    });
}

Przykładowa aplikacja zawiera klasę używaną DataService do pobierania listy elementów do wypełniania ListView obiektów. Model widoku jest tworzone wystąpienie, z elementami z DataService klasy i ustawiany jako BindingContext w kodzie:

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

Ostrzeżenie

MenuItem obiekty wyświetlają tylko ikony w systemie Android. Na innych platformach zostanie wyświetlony tylko tekst określony przez Text właściwość.

Ikony są określane przy użyciu IconImageSource właściwości . Jeśli zostanie określona ikona, tekst określony przez Text właściwość nie będzie wyświetlany. Poniższy zrzut ekranu przedstawia MenuItem ikonę w systemie Android:

Aby uzyskać więcej informacji na temat używania obrazów w programie Xamarin.Forms, zobacz Obrazy w programie Xamarin.Forms.

Włączanie lub wyłączanie elementu MenuItem w czasie wykonywania

Aby włączyć wyłączenie obiektu w czasie wykonywania, powiąż MenuItem jego Command właściwość z implementacją ICommand i upewnij się, że canExecute delegat włącza i wyłącza ICommand go odpowiednio.

Ważne

Nie należy powiązać IsEnabled właściwości z inną właściwością w Command celu włączenia MenuItemlub wyłączenia właściwości .

W poniższym przykładzie przedstawiono MenuItem właściwość, której Command właściwość wiąże się z nazwaną wartością ICommandMyCommand:

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

Implementacja wymaga delegatacanExecute, który zwraca wartość bool właściwości, aby włączyć i wyłączyć polecenie MenuItem:ICommand

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);
    }
}

W tym przykładzie właściwość MenuItem jest wyłączona do momentu IsMenuItemEnabled ustawienia właściwości . W takim przypadku metoda jest wywoływana, Command.ChangeCanExecute co powoduje ponowne obliczenie delegata canExecuteMyCommand .

Zachowanie menu kontekstowego dla wielu platform

Dostęp do menu kontekstowych jest wyświetlany w inny sposób na każdej platformie.

W systemie Android menu kontekstowe jest aktywowane przez długie naciśnięcie elementu listy. Menu kontekstowe zastępuje obszar tytułu i paska nawigacyjnego, a MenuItem opcje są wyświetlane jako przyciski poziome.

W systemie iOS menu kontekstowe jest aktywowane przez przesunięcie na elemencie listy. Menu kontekstowe jest wyświetlane w elemencie listy i MenuItems są wyświetlane jako przyciski poziome.

W systemie UWP menu kontekstowe jest aktywowane przez kliknięcie prawym przyciskiem myszy elementu listy. Menu kontekstowe jest wyświetlane w pobliżu kursora jako pionowej listy.