Exercice : Convertir un gestionnaire d’événements en commande

Dans cet exercice, revenez à l’application « liste de films » avec laquelle vous avez travaillé dans l’exercice précédent. Cette fois, vous convertissez le gestionnaire d’événements de l’action Supprimer en commande.

Télécharger et exécuter l’exemple

Ce projet affiche une liste de films. Cliquer sur un film navigue vers une page détaillée incluant plus d’informations sur le film.

1. Clonez ou téléchargez le dépôt des exercices.
2. Accédez au dossier partie6-exercise2 et ouvrez la solution MovieCatalog.sln .
3. Générez et exécutez le projet pour vérifier qu’il fonctionne. Lorsque l’écran s’affiche, vous devez voir une liste de films. Balayez vers la gauche sur l’un des films répertoriés pour afficher l’action de suppression.

Examiner le code

Ouvrez la solution MovieCatalog et ouvrez le fichier Views\MovieListPage.xaml. Le CollectionView présente un élément pour chaque film dans la collection Movies liée. Chaque élément utilise un SwipeView avec une action de suppression :

<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>

Lorsque l’élément de balayage est cliqué, la MenuItem_Clicked méthode est appelée et le film est supprimé. Le contexte de liaison de l’élément de balayage est le film actuel, la classe MovieViewModel. Mais le code de suppression d’un film se trouve sur le mode d’affichage principal de l’application MovieListViewModel. Le gestionnaire d’événements considère ce fait lorsqu'il obtient le contexte de liaison de l'élément de glissement et l'envoie à la méthode DeleteMovie du viewmodel :

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

Ajouter une commande

La première étape de la conversion du gestionnaire d’événements en commande consiste à ajouter la commande au mode d’affichage. Cette commande accepte un film et le supprime de la collection.

1. Dans la fenêtre Explorateur de solutions, ouvrez le fichier ViewModels\MovieListViewModel.cs.

2. Ajoutez la propriété suivante à la classe MovieListViewModel :

   public ICommand DeleteMovieCommand { get; private set; }
   

3. Ensuite, recherchez le constructeur MovieListViewModel et instanciez la commande :

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

   La méthode DeleteMovie existe déjà et accepte un paramètre MovieViewModel. La commande encapsule cette méthode et l’expose sur le mode d’affichage.

4. Ouvrez le fichier Views\MoviesListPage.xaml .

5. Mettez à jour le SwipeItem paramètre pour lier le Command paramètre à l’objet DeleteMovieCommand. Transmettez le contexte de liaison actuel en tant que CommandParameter.

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

   Notez que le gestionnaire d’événements Clicked a été supprimé du SwipeItem.

   La Source du contexte de liaison est définie sur le mode d’affichage principal de l’application, tout comme la page elle-même. Le contexte de liaison de SwipeItem reste le film et est passé à CommandParameter.

6. Ouvrez le fichier code-behind de l’affichage, Views\MoviesListPage.xaml.cs et supprimer le code MenuItem_Clicked.

7. Exécutez l’application et balayez vers la gauche sur l’un des films. Sélectionnez Supprimer dans l’action de balayage. Le film est supprimé de la liste.