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 allez convertir le gestionnaire d’événements Supprimer en commande.
Télécharger et exécuter l’exemple
- Accédez au dossier part6-exercise2 et ouvrez la solution MovieCatalog.sln dans Visual Studio ou le dossier de Visual Studio Code.
- Générez et exécutez le projet pour vérifier qu’il fonctionne. Sur l’écran affiché, vous verrez une liste de films. Faites un clique-droit sur l’un des films répertoriés et l’application navigue vers une page détaillée.
Examiner le code
Ouvrez la solution MovieCatalog et ouvrez le fichier Views\MovieListPage.xaml. Le ListView
présente un élément pour chaque film dans la collection Movies
liée. Chaque élément définit un menu contextuel pour supprimer un film :
<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>
Lorsque l’élément de menu est cliqué, le MenuItem_Clicked
est appelé et le film est supprimé. Le contexte de liaison de l’élément de menu 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 cela vu qu’il obtient le contexte de liaison de l’élément de menu et l’envoie à la méthode DeleteMovie
du mode d’affichage :
private void MenuItem_Clicked(object sender, EventArgs e)
{
MenuItem menuItem = (MenuItem)sender;
ViewModels.MovieViewModel movie = (ViewModels.MovieViewModel)menuItem.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.
Dans la fenêtre Explorateur de solutions, ouvrez le fichier ViewModels\MovieListViewModel.cs.
Ajoutez la propriété suivante à la classe
MovieListViewModel
:public ICommand DeleteMovieCommand { get; private set; }
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ètreMovieViewModel
. La commande encapsule cette méthode et l’expose sur le mode d’affichage.Ouvrez le fichier ViewModels\MoviesListPage.xaml.
Mettez à jour le
MenuItem
pour lier le paramètreCommand
auDeleteMovieCommand
. Transmettez le contexte de liaison actuel en tant queCommandParameter
.<MenuItem Text="Delete" IsDestructive="True" Command="{Binding DeleteMovieCommand, Source={x:Static local:App.MainViewModel}}" CommandParameter="{Binding}" />
Notez que le gestionnaire d’événements
Clicked
a été supprimé duMenuItem
.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 duMenuItem
reste le film, et il est passé à laCommandParameter
.Ouvrez le fichier code-behind de l’affichage, Views\MoviesListPage.xaml.cs et supprimer le code
MenuItem_Clicked
.Exécutez l’application et cliquez avec le bouton droit ou appuyez longuement sur l’un des films, sélectionnez Supprimer dans le menu contextuel. Le film est supprimé de la liste.