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

  • 10 minutes

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

Remarque

Si vous envisagez d’exécuter et de déboguer vos applications .NET MAUI sur Android à partir de Windows, il est préférable de cloner ou de télécharger le contenu de l’exercice sur un chemin de dossier court, comme C:\dev\, pour que les fichiers générés par la build ne dépassent pas la longueur maximale de chemin.

Pour démarrer ce module d’exercice, téléchargez le projet Échantillon de Liste de Films. 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. Télécharger et extraire le projet Échantillon de Liste de Films vers un dossier temporaire.
  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. 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.

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

  5. Mettez à jour le MenuItem pour lier le paramètre Command au DeleteMovieCommand. Transmettez le contexte de liaison actuel en tant que CommandParameter.

    <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é du MenuItem.

    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 du MenuItem reste le film, et il est passé à la 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 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.