Xamarin.Forms Menuitem

Descarga del ejemplo

La Xamarin.FormsMenuItem clase define elementos de menú para menús como ListView menús contextuales de elementos y menús de menús desplegables de aplicaciones de Shell.

En las capturas de pantalla siguientes MenuItem se muestran objetos en un menú contextual en ListView iOS y Android:

on (MenuItems en iOS y Android)

La clase MenuItem define las propiedades siguientes:

• Xamarin_Forms _MenuItem_Command" data-linktype="absolute-path">es un que permite enlazar acciones de usuario, como pulsaciones de dedo o CommandICommand clics, a comandos definidos en un modelo de vista.
• Xamarin_Forms _MenuItem_CommandParameter" data-linktype="absolute-path">CommandParameter es object un valor de tipo que especifica el parámetro que se debe pasar a Command .
• Xamarin_Forms _MenuItem_IconImageSource" data-linktype="absolute-path">es un valor IconImageSource que ImageSource define el icono de presentación.
• Xamarin_Forms _MenuItem_IsDestructive" data-linktype="absolute-path">es un valor que indica si quita su elemento de interfaz de usuario IsDestructive asociado de la boolMenuItem lista.
• Xamarin_Forms _MenuItem_IsEnabled" data-linktype="absolute-path">es un valor que indica si este objeto responde a la entrada IsEnabledbool del usuario.
• Xamarin_Forms _MenuItem_Text" data-linktype="absolute-path">es un valor Text que string especifica el texto para mostrar.

Estas propiedades están copiadas por BindableProperty objetos , por lo que la instancia puede ser el destino de los enlaces de MenuItem datos.

Creación de un elemento MenuItem

MenuItem Los objetos se pueden usar dentro de un menú contextual en los ListView elementos de un objeto. El patrón más común es crear MenuItem objetos dentro de una instancia de , que se usa como objeto para ViewCellDataTemplateListView . ItemTemplate Cuando se rellena el objeto, se crea cada elemento mediante , exponiendo las opciones cuando se activa el menú ListViewDataTemplate contextual para un MenuItem elemento.

En el ejemplo siguiente se MenuItem muestra la creación de instancias en el contexto de un objeto ListView :

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

También MenuItem se puede crear un en el código:

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

Definición del comportamiento de MenuItem con eventos

La clase MenuItem expone un evento Clicked. Se puede adjuntar un controlador de eventos a este evento para reaccionar a pulsaciones o clics en MenuItem la instancia en XAML:

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

También se puede adjuntar un controlador de eventos en el código:

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

En los ejemplos anteriores se hace referencia a OnItemClicked un controlador de eventos. El código siguiente muestra una implementación de ejemplo:

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
}

Definición del comportamiento de MenuItem con MVVM

La MenuItem clase admite el patrón Model-View-ViewModel (MVVM) a través de objetos y la interfaz BindablePropertyICommand . El código XAML siguiente muestra las instancias enlazadas a MenuItem comandos definidos en un modelo de vista:

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

En el ejemplo anterior, se definen dos objetos con sus propiedades y enlazadas a MenuItem comandos en el modelo de CommandCommandParameter vista. El modelo de vista contiene los comandos a los que se hace referencia en 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}";
    });
}

La aplicación de ejemplo incluye una DataService clase que se usa para obtener una lista de elementos para rellenar los ListView objetos. Se crea una instancia de un modelo de vista, con elementos de la clase y se establece DataService como en el código BindingContext subyacente:

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

Iconos de MenuItem

Los iconos se especifican mediante la IconImageSource propiedad . Si se especifica un icono, no se mostrará el texto especificado por Text la propiedad . En la captura de pantalla siguiente se MenuItem muestra un elemento con un icono en Android:

Para obtener más información sobre el uso de imágenes Xamarin.Forms en , vea Images in Xamarin.Forms .

Habilitación o deshabilitación de un elemento MenuItem en tiempo de ejecución

Para habilitar la deshabilitación de en tiempo de ejecución, enlace su propiedad a una implementación y asegúrese de que un delegado habilita y MenuItemCommand deshabilita según ICommandcanExecuteICommand corresponda.

En el ejemplo siguiente se muestra MenuItem una cuya propiedad se enlaza a un denominado CommandICommandMyCommand :

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

La ICommand implementación requiere un delegado que devuelva el valor de una propiedad para habilitar y deshabilitar canExecuteboolMenuItem :

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

En este ejemplo, se MenuItem deshabilita hasta que se establece la propiedad IsMenuItemEnabled . Cuando esto sucede, se llama al método , lo que hace que se vuelva a Command.ChangeCanExecute evaluar el delegado para canExecuteMyCommand .

Comportamiento del menú contextual multiplataforma

Se accede a los menús contextuales y se muestran de forma diferente en cada plataforma.

En Android, el menú contextual se activa al presionar largamente en un elemento de lista. El menú contextual reemplaza el título y el área de la barra de navegación y las opciones MenuItem se muestran como botones horizontales.

de pantalla del menú contextual en

En iOS, el menú contextual se activa deslizando el dedo en un elemento de lista. El menú contextual se muestra en el elemento de lista y MenuItems se muestra como botones horizontales.

En UWP, el menú contextual se activa haciendo clic con el botón derecho en un elemento de lista. El menú contextual se muestra cerca del cursor como una lista vertical.

Vínculos relacionados

• Demostraciones de MenuItem
• Images in Xamarin.Forms