Xamarin.Forms Menuitem

  • Článek

Download Sample Stažení ukázky

Třída Xamarin.FormsMenuItem definuje položky nabídky pro nabídky, jako ListView jsou místní nabídky položek a kontextové nabídky aplikace Shell.

Následující snímky obrazovky znázorňují MenuItem objekty v místní nabídce v ListView iOSu a Androidu:

Třída MenuItem definuje následující vlastnosti:

  • Command je akce ICommand uživatele, jako jsou klepnutí prstem nebo kliknutí, k příkazům definovaným v modelu viewmodel.
  • CommandParameter je parametr object , který má být předán do objektu Command.
  • IconImageSourceImageSource je hodnota, která definuje ikonu zobrazení.
  • IsDestructivebool je hodnota, která označuje, zda MenuItem odebere jeho přidružený prvek uživatelského rozhraní ze seznamu.
  • IsEnabledbool je hodnota, která označuje, zda tento objekt reaguje na vstup uživatele.
  • Textstring je hodnota, která určuje zobrazovaný text.

Tyto vlastnosti jsou podporovány BindableProperty objekty, takže MenuItem instance může být cílem datových vazeb.

Vytvoření položky MenuItem

MenuItem objekty lze použít v místní nabídce položek objektu ListView . Nejběžnějším vzorem je vytvoření MenuItem objektů v instanci, která se používá jako DataTemplate objekt pro ListViewobjekt s ItemTemplate.ViewCell ListView Když je objekt naplněn, vytvoří každou položku pomocí DataTemplate, zobrazí MenuItem volby při aktivaci místní nabídky pro položku.

Následující příklad ukazuje MenuItem vytvoření instance v kontextu objektu ListView :

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

V kódu lze také vytvořit A MenuItem :

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

Definování chování MenuItem s událostmi

Třída MenuItem zveřejňuje Clicked událost. Obslužná rutina události může být připojena k této události, aby reagovala na klepnutí nebo kliknutí na MenuItem instanci v XAML:

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

Obslužnou rutinu události lze připojit také v kódu:

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

Předchozí příklady odkazovaly na obslužnou rutinu OnItemClicked události. Následující kód ukazuje ukázkovou implementaci:

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
}

Definování chování MenuItem pomocí MVVM

Třída MenuItem podporuje model Model-View-ViewModel (MVVM) prostřednictvím BindableProperty objektů a ICommand rozhraní. Následující XAML ukazuje MenuItem instance vázané na příkazy definované v 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>

V předchozím příkladu jsou definovány dva MenuItem objekty s jejich Command vlastnostmi vázanými CommandParameter na příkazy v modelu viewmodel. Model viewmodel obsahuje příkazy odkazované v 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}";
    });
}

Ukázková aplikace obsahuje DataService třídu, která slouží k získání seznamu položek pro naplnění ListView objektů. Objekt viewmodel se vytvoří instance s položkami ze DataService třídy a nastaví se jako BindingContext objekt v kódu za kódem:

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

Upozorňující

MenuItem objekty zobrazují jenom ikony v Androidu. Na jiných platformách se zobrazí pouze text určený Text vlastností.

Ikony se zadají pomocí IconImageSource vlastnosti. Pokud je zadána ikona, text určený Text vlastností se nezobrazí. Následující snímek obrazovky ukazuje ikonu s ikonou MenuItem v Androidu:

Další informace o použití obrázků naleznete v Xamarin.Formstématu Obrázky v Xamarin.Forms.

Povolení nebo zakázání MenuItem za běhu

Chcete-li povolit zakázání MenuItem za běhu, vytvořte vazbu jeho Command vlastnosti na ICommand implementaci a ujistěte se, že canExecute delegát povolí a zakáže ICommand podle potřeby.

Důležité

Při použití Command vlastnosti k povolení nebo zakázání vlastnosti nevážete IsEnabled vlastnost na jinou MenuItemvlastnost .

Následující příklad ukazuje, jehož MenuItemCommand vlastnost vytvoří vazbu na pojmenovaný ICommandMyCommand:

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

Implementace ICommand vyžaduje delegáta canExecute , který vrátí hodnotu bool vlastnosti, aby bylo možné povolit a zakázat 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);
    }
}

V tomto příkladu je zakázaná MenuItem , dokud není nastavena IsMenuItemEnabled vlastnost. Pokud k tomu dojde, volá se metoda, která způsobí opětovné Command.ChangeCanExecute vyhodnocení delegáta canExecuteMyCommand .

Chování místní nabídky pro různé platformy

Místní nabídky se na jednotlivých platformách zobrazují odlišně.

V Androidu je místní nabídka aktivovaná dlouhým stisknutím položky seznamu. Místní nabídka nahradí oblast a oblast navigačního panelu a MenuItem možnosti jako vodorovná tlačítka.

V iOSu je místní nabídka aktivována potažením prstu na položce seznamu. V položce seznamu se zobrazí místní nabídka a MenuItems zobrazí se jako vodorovná tlačítka.

V UPW je místní nabídka aktivována kliknutím pravým tlačítkem myši na položku seznamu. Místní nabídka se zobrazí poblíž kurzoru jako svislý seznam.