Exercice - Gérer la sélection à l’aide d’un modèle-vue

Effectué

Pour les besoins de notre exercice, nous allons brièvement laisser derrière nous l’exemple d’application de ressources humaines. Nous utilisons plutôt une application qui liste des films. L’application comporte déjà deux pages et des modèles-vues disposant de liaisons de base. Les deux pages sont une page de liste et une page de détails. Nous allons modifier la logique de sélection afin que la ListView et la page de détails utilisent la même propriété de modèle-vue.

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 partie4-exercise1 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. Sélectionnez l’un des films répertoriés et l’application navigue vers une page détaillée.

Examiner le code

Prenez quelques minutes pour examiner la structure des modes d’affichage et des vues. Si vous connaissez bien le langage XAML et la liaison de données, tout doit vous sembler familier, si ce n’est que la structure utilise le modèle MVVM.

Il existe un MovieListViewModel qui sert à la fois de modèle-vue global de l’application et de modèle-vue pour MoviesListPage. Ce mode d’affichage contient une liste de films chargés à partir du modèle, qui est un fichier json inclus dans le projet. L’autre mode d’affichage est MovieViewModel et représente un film unique. Il remplit aussi deux rôles : fournir des données aux lignes de la page de liste et servir de BindingContext à MovieDetailPage.

Ajouter la prise en charge de la sélection

La MoviesListPage est la page qui s’affiche lorsque l’application s’exécute pour la première fois. Le ListView de la page est lié à la collection d’instances MovieViewModel fournies par le mode d’affichage global, MovieListViewModel. Lorsque vous sélectionnez l’un des films dans l’affichage, l’événement ItemTapped accède au MovieDetailPage, en passant le BindingContext de l’élément, qui est un film, au constructeur de la vue. Le MovieDetailPage définit le mode d’affichage qui a été passé en tant que BindingContext de la page.

Au lieu de cela, nous allons mettre à jour l’application pour que la MovieDetailPage lise le film sélectionné à partir du mode d’affichage de l’application globale.

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

2. Ajoutez le code suivant à la classe MovieListViewModel :

   private MovieViewModel _selectedMovie;
   
   public MovieViewModel SelectedMovie
   {
       get => _selectedMovie;
       set => SetProperty(ref _selectedMovie, value);
   }
   

3. Ensuite, ouvrez le fichier Views\MoviesListPage.xaml.

4. Localisez l'élément ListView et ajoutez l'attribut SelectedItem :

   <ListView ItemsSource="{Binding Movies}" SelectedItem="{Binding SelectedMovie, Mode=OneWayToSource}" Margin ... >
   

   Cet attribut lie l’élément sélectionné de la liste à la nouvelle propriété dans le mode d’affichage.

5. Ouvrez le fichier code-behind de l’affichage, Views\MoviesListPage.xaml.cs.

6. Remplacez le code du gestionnaire d’événements ListView_ItemTapped par le code suivant :

   private async void ListView_ItemTapped(object sender, ItemTappedEventArgs e)
   {
       await Navigation.PushAsync(new Views.MovieDetailPage());
   }
   

   Le MovieDetailPage n’accepte plus le film dans le constructeur, au lieu de cela, le nouveau constructeur lit le mode d’affichage principal de l’application.

7. Ouvrez le fichier Views\MovieDetailPage.xaml.cs et remplacez le constructeur par le code suivant :

   public MovieDetailPage()
   {
   	BindingContext = App.MainViewModel.SelectedMovie;
   	InitializeComponent();
   }
   

   Ce code définit le contexte de liaison de la vue au film sélectionné.

8. Exécutez l’application et vérifiez que le code fonctionne comme prévu.