Mostrar elementos de menú

La clase MenuItem de .NET Multi-platform App UI (.NET MAUI) se puede usar para definir elementos de menú para menús como menús contextuales de elementos ListView y menús flotantes de aplicaciones Shell.

Las capturas de pantalla siguientes muestran objetos MenuItem en un menú contextual ListView en Android:

La clase MenuItem define las propiedades siguientes:

• Command, de tipo ICommand, permite enlazar acciones de usuario, como pulsaciones de dedo o clics, a los comandos definidos en un modelo de vista.
• CommandParameter, de tipo object, especifica el parámetro que se debe pasar a Command.
• IconImageSource, de tipo ImageSource, define el icono del elemento de menú.
• IsDestructive, de tipo bool, indica si MenuItem quita su elemento de interfaz de usuario asociado de la lista.
• IsEnabled, de tipo bool, indica si el elemento de menú responde a la entrada de usuario.
• Text, de tipo string, especifica el texto del elemento de menú.

Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos.

Crear un MenuItem

Para crear un elemento de menú, por ejemplo, como un menú contextual en los elementos de un objeto ListView, crea un objeto MenuItem dentro de un objeto ViewCell que se use como el objeto DataTemplate para ItemTemplate de ListView. Cuando el objeto ListView se rellena, creará cada elemento mediante DataTemplate exponiendo las opciones MenuItem cuando se active el menú contextual para un elemento.

En el ejemplo siguiente se muestra cómo crear MenuItem dentro del 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>

En este ejemplo se producirá un objeto MenuItem que tenga texto. Sin embargo, la apariencia de MenuItem varía en todas las plataformas.

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

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

    // Return the custom ViewCell to the DataTemplate constructor
    return viewCell;
});

ListView listView = new ListView
{
    ...
    ItemTemplate = dataTemplate
};

Un menú contextual de ListView se activa y se muestra de forma diferente en cada plataforma. En Android, el menú contextual se activa presionando largamente en un elemento de lista. El menú contextual reemplaza el área de título y barra de navegación y las opciones MenuItem se muestran como botones horizontales. En iOS, el menú contextual se activa deslizando en un elemento de lista. El menú contextual se muestra en el elemento de lista y MenuItems se muestran como botones horizontales. En Windows, 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.

Definir el comportamiento de MenuItem

La clase MenuItem define un evento Clicked. Un controlador de eventos se puede adjuntar a este evento para reaccionar ante pulsaciones o clics en objetos MenuItem:

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

Un controlador de eventos también se puede adjuntar en el código:

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

Estos ejemplos hacen referencia a un controlador de eventos OnItemClicked, que se muestra en el ejemplo siguiente:

void OnItemClicked(object sender, EventArgs e)
{
    MenuItem menuItem = sender as MenuItem;

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

    // Do something with the contextItem here
}

Definición de la apariencia de MenuItem

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

Los objetos MenuItem solo muestran iconos en Android. En otras plataformas, solo se mostrará el texto especificado por la propiedad Text.

Nota:

Las imágenes se pueden almacenar en una sola ubicación en el proyecto de aplicación. Para obtener más información, consulta Adición de imágenes a un proyecto de .NET MAUI.

Habilitar o deshabilitar un MenuItem en tiempo de ejecución

Para habilitar o deshabilitar MenuItem en tiempo de ejecución, enlaza su propiedad Command a una implementación ICommand y asegúrate de que un delegado canExecute habilita y deshabilita ICommand según corresponda.

Importante

No enlaces la propiedad IsEnabled a otra propiedad al usar la propiedad Command para habilitar o deshabilitar MenuItem.