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

Neste exercício, volte ao aplicativo “lista de filmes” com o qual você trabalhou no exercício anterior. Desta vez, você converte o manipulador de eventos da ação Delete swipe em um comando.

Baixar e executar o exemplo

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. Clone ou baixe o repositório do exercício.
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. Quando a tela é exibida, você deve ver uma lista de filmes. Deslize o dedo para a esquerda em um dos filmes listados para revelar a ação de exclusão.

Examinar o código

Abra a solução MovieCatalog e o arquivo Views\MovieListPage.xaml. A CollectionView apresenta um item para cada filme da coleção Movies associada. Cada item usa um SwipeView com uma ação de exclusão:

<CollectionView.ItemTemplate>
    <DataTemplate x:DataType="vm:MovieViewModel">
        <SwipeView>
            <SwipeView.RightItems>
                <SwipeItems>
                    <SwipeItem Text="Delete"
                              BackgroundColor="Red"
                              Clicked="MenuItem_Clicked" />
                </SwipeItems>
            </SwipeView.RightItems>
            <VerticalStackLayout Padding="10">
                <Label Text="{Binding Title}" 
                       FontSize="16" />
            </VerticalStackLayout>
        </SwipeView>
    </DataTemplate>
</CollectionView.ItemTemplate>

Quando o item de passar o dedo é clicado, o MenuItem_Clicked método é invocado e o filme é removido. O contexto de associação do item de passar o dedo é o filme atual, a MovieViewModel classe. Porém, o código para remover um filme está no viewmodel MovieListViewModel principal do aplicativo. O manipulador de eventos considera esse fato à medida que obtém o contexto de associação do item de deslizamento e o envia para o método DeleteMovie do ViewModel.

private void MenuItem_Clicked(object sender, EventArgs e)
{
    SwipeItem swipeItem = (SwipeItem)sender;
    ViewModels.MovieViewModel movie = (ViewModels.MovieViewModel)swipeItem.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 Views\MoviesListPage.xaml .

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

   <SwipeItem Text="Delete"
              BackgroundColor="Red"
              Command="{Binding DeleteMovieCommand, Source={x:Static local:App.MainViewModel}}"
              CommandParameter="{Binding}" />
   

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

   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 SwipeItem 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. Abra o aplicativo e deslize para a esquerda em um dos filmes. Selecione Excluir da ação de passar o dedo. O filme é excluído da lista.