Compartilhar via


Exibir itens de menu

A classe .NET Multi-platform App UI (.NET MAUI) MenuItem pode ser usada para definir itens de menu para menus como ListView menus de contexto de item e menus de submenu do aplicativo Shell.

As capturas de tela a seguir mostram MenuItem objetos em um menu de ListView contexto no Android:

Screenshot of menu items in a ListView context menu on Android.

A MenuItem classe define as seguintes propriedades:

  • Command, do tipo ICommand, permite vincular ações do usuário, como toques ou cliques com o dedo, a comandos definidos em um ViewModel.
  • CommandParameter, do tipo object, especifica o parâmetro que deve ser passado para o Command.
  • IconImageSource, do tipo ImageSource, define o ícone do item de menu.
  • IsDestructive, do tipo bool, indica se o MenuItem remove seu elemento de interface do usuário associado da lista.
  • IsEnabled, do tipo bool, indica se o item de menu responde à entrada do usuário.
  • Text, do tipo string, especifica o texto do item de menu.

Essas propriedades são apoiadas por BindableProperty objetos, o que significa que eles podem ser alvos de associações de dados.

Criar um MenuItem

Para criar um item de menu, por exemplo, como um menu de contexto nos itens de um objeto, crie um objeto dentro de um ListView MenuItem ViewCell objeto que seja usado como o DataTemplate objeto para o ListViews .ItemTemplate Quando o objeto for preenchido, ele criará cada item usando o , expondo as MenuItem opções quando o ListView DataTemplatemenu de contexto for ativado para um item.

O exemplo a seguir mostra como criar um dentro do contexto de um MenuItem ListView objeto:

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

Este exemplo resultará em um MenuItem objeto que tenha texto. No entanto, a aparência de um MenuItem varia entre as plataformas.

A MenuItem também pode ser criado em 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
};

Um menu de contexto em um ListView é ativado e exibido de forma diferente em cada plataforma. No Android, o menu de contexto é ativado pressionando longamente em um item de lista. O menu de contexto substitui o título e a área da barra de navegação e MenuItem as opções são exibidas como botões horizontais. No iOS, o menu de contexto é ativado ao passar o dedo em um item de lista. O menu de contexto é exibido no item de lista e MenuItems são exibidos como botões horizontais. No Windows, o menu de contexto é ativado clicando com o botão direito do mouse em um item de lista. O menu de contexto é exibido perto do cursor como uma lista vertical.

Definir o comportamento de MenuItem

A MenuItem classe define um Clicked evento. Um manipulador de eventos pode ser anexado a esse evento para reagir a toques ou cliques em MenuItem objetos:

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

Um manipulador de eventos também pode ser anexado no código:

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

Esses exemplos fazem referência a um manipulador de eventos, que é mostrado no exemplo a OnItemClicked seguir:

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
}

Definir a aparência do MenuItem

Os ícones são especificados usando a IconImageSource propriedade. Se um ícone for especificado, o Text texto especificado pela propriedade não será exibido. A captura de tela a seguir mostra um com um MenuItem ícone no Android:

Screenshot of menu items, with an icon, in a ListView context menu on Android.

MenuItem objetos só exibem ícones no Android. Em outras plataformas, somente o Text texto especificado pela propriedade será exibido.

Observação

As imagens podem ser armazenadas em um único local em seu projeto de aplicativo. Para obter mais informações, consulte Adicionar imagens a um projeto MAUI do .NET.

Habilitar ou desabilitar um MenuItem em tempo de execução

Para habilitar ou desabilitar um em tempo de execução, vincule sua Command propriedade a uma ICommand implementação e certifique-se de que um MenuItem canExecute delegado habilite e desabilite o ICommand conforme apropriado.

Importante

Não vincule a propriedade a outra propriedade ao usar a IsEnabled Command propriedade para habilitar ou desabilitar o MenuItem.