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

Concluído

Neste exercício, volte para o 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.

Transferir e executar o exemplo

1. Navegue até a pasta part6-exercise2 e abra a solução MovieCatalog.sln no Visual Studio ou a pasta no Visual Studio Code..
2. Crie e execute o projeto para garantir que ele funcione. 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 navega para uma página de detalhes.

Examinar o código

Abra a solução MovieCatalog e abra o arquivo Views\MovieListPage.xaml . O ListView apresenta um item para cada filme da coleção encadernada Movies . 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 é clicado, o MenuItem_Clicked é invocado e o filme é removido. O contexto de vinculação do item de menu é o filme atual, a MovieViewModel classe. Mas o código para remover um filme está no modelo MovieListViewModelde visualização principal do aplicativo. O manipulador de eventos considera isso quando obtém o contexto de vinculação do item de menu e o envia para o método viewmodel DeleteMovie :

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. 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 ViewModels\MoviesListPage.xaml .

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

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

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

   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 MenuItem permanece o filme, e isso é 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. Execute o aplicativo e clique com o botão direito do mouse ou pressione longamente um dos filmes, selecione Excluir no menu de contexto. O filme é excluído da lista.