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

Neste exercício, volte para o aplicativo "lista de filmes" com o qual você trabalhou no exercício anterior. Desta vez, convertes o manipulador de eventos da ação de deslizar Delete em comando.

Transferir e executar o exemplo

Este projeto exibe uma lista de filmes. Clicar em um filme navega para uma página de detalhes com mais informações sobre o filme.

1. Clone ou baixe o repositório de exercícios.
2. Navegue até a pasta part6-exercise2 e abra a solução MovieCatalog.sln .
3. Crie e execute o projeto para garantir que ele funcione. Quando a tela é exibida, você verá uma lista de filmes. Desliza para a esquerda num dos filmes listados para revelar a ação de eliminar.

Examinar o código

Abra a solução MovieCatalog e abra o arquivo Views\MovieListPage.xaml . O CollectionView apresenta um item para cada filme da coleção encadernada Movies . Cada item usa uma SwipeView com uma ação de eliminaçã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 swipe é clicado, o método MenuItem_Clicked é invocado e o filme é removido. O contexto de ligação do item de swipe é o filme atual da classe MovieViewModel. Mas o código para remover um filme está no modelo MovieListViewModelde visualização principal do aplicativo. O manipulador de eventos considera este facto ao obter o contexto de vinculação do item de deslizamento e enviá-lo para o método do viewmodel DeleteMovie.

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. Este comando aceita um filme e remove-o 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 MovieListViewModel construtor e instancie o comando:

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

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

4. Abra o arquivo Views\MoviesListPage.xaml .

5. Atualize o SwipeItem para ligar o Command parâmetro ao DeleteMovieCommand. Passe o contexto de vinculação atual como o CommandParameter.

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

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

   O Source contexto de vinculação é definido como o modelo de exibição principal do aplicativo, assim como a própria página. O contexto vinculativo do SwipeItem permanece o filme, e é passado para o CommandParameter.

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

7. Abre a aplicação e desliza para a esquerda num dos filmes. Selecione Apagar na ação de deslize. O filme é excluído da lista.