Exercício – Converter um manipulador de eventos em um comando

  • 10 minutos

Neste exercício, volte ao aplicativo “lista de filmes” com o qual você trabalhou no exercício anterior. Desta vez, você converterá o manipulador de eventos do menu Excluir em um comando.

Baixar e executar o exemplo

Observação

Se você estiver planejando executar e depurar seus aplicativos .NET MAUI no Android do Windows, será melhor clonar ou baixar o conteúdo do exercício em um caminho de pasta curto, como C:\dev\, para evitar arquivos gerados por build que excedam o comprimento máximo do caminho.

Para iniciar este módulo de exercício, baixe o projeto de Exemplo de Lista de Filmes. Este projeto exibe uma lista de filmes. Clicar em um filme navega até uma página de detalhes com mais informações sobre o filme.

  1. Baixe e extraia o projeto Amostra de Lista de Filmes em uma pasta temporária.
  2. Navegue até a pasta part6-exercise2 e abra a solução MovieCatalog.sln.
  3. Compile e execute o projeto para verificar se ele funciona. Na tela exibida, você verá uma lista de filmes. Clique com o botão direito do mouse em um dos filmes listados e o aplicativo navegará até uma página de detalhes.

Examinar o código

Abra a solução MovieCatalog e o arquivo Views\MovieListPage.xaml. A ListView apresenta um item para cada filme da coleção Movies associada. Cada item define um menu de contexto para excluir um filme:

<ListView.ItemTemplate>
    <DataTemplate>
        <TextCell Text="{Binding Title}" x:DataType="vm:MovieViewModel">
            <TextCell.ContextActions>
                <MenuItem Text="Delete" IsDestructive="True" Clicked="MenuItem_Clicked" />
            </TextCell.ContextActions>
        </TextCell>
    </DataTemplate>
</ListView.ItemTemplate>

Quando o item de menu recebe um clique, o MenuItem_Clicked é invocado e o filme é removido. O contexto de associação do item de menu é o filme atual, a classe MovieViewModel. Porém, o código para remover um filme está no viewmodel MovieListViewModel principal do aplicativo. O manipulador de eventos considera isso quando obtém o contexto de associação do item de menu e o envia ao método DeleteMovie do viewmodel:

private void MenuItem_Clicked(object sender, EventArgs e)
{
    MenuItem menuItem = (MenuItem)sender;
    ViewModels.MovieViewModel movie = (ViewModels.MovieViewModel)menuItem.BindingContext;
    App.MainViewModel.DeleteMovie(movie);
}

Adicionar um comando

A primeira etapa na conversão do manipulador de eventos em um comando é adicionar o comando ao viewmodel. Esse comando aceita um filme e o remove da coleção.

  1. Na janela Gerenciador de Soluções, abra o arquivo ViewModels\MovieListViewModel.cs.

  2. Adicione a seguinte propriedade à classe MovieListViewModel:

    public ICommand DeleteMovieCommand { get; private set; }

  3. Em seguida, localize o construtor MovieListViewModel e crie uma instância do comando:

    public MovieListViewModel()
{
    Movies = [];
    DeleteMovieCommand = new Command<MovieViewModel>(DeleteMovie);
}

    O método DeleteMovie já existe e aceita um parâmetro MovieViewModel. O comando encapsula esse método e o expõe no viewmodel.

  4. Abra o arquivo ViewModels\MoviesListPage.xaml.

  5. Atualize o MenuItem para associar o parâmetro Command ao DeleteMovieCommand. Transmita o contexto de associação atual como o CommandParameter.

    <MenuItem Text="Delete"
          IsDestructive="True"
          Command="{Binding DeleteMovieCommand, Source={x:Static local:App.MainViewModel}}"
          CommandParameter="{Binding}" />

    Observe que o manipulador de eventos Clicked foi removido do MenuItem.

    A Source do contexto de associação é definida como o viewmodel principal do aplicativo, assim como a própria página. O contexto de associação do MenuItem permanece o filme, e isso é transmitido para o CommandParameter.

  6. Abra o arquivo code-behind na exibição Views\MoviesListPage.xaml.cs e remova o código MenuItem_Clicked.

  7. Execute o aplicativo, clique com o botão direito do mouse ou pressione e segure um dos filmes e selecione Excluir no menu de contexto. O filme é excluído da lista.