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

Pour les besoins de notre exercice, nous allons brièvement laisser de côté l’exemple d’application de ressources humaines. Nous allons plutôt utiliser une application qui répertorie 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 CollectionView et la page de détails utilisent la même propriété viewmodel.

Ce module utilise le Kit de développement logiciel (SDK) .NET 10.0. Vérifiez que .NET 10.0 est installé en exécutant la commande suivante dans votre terminal de commande préféré :

dotnet --list-sdks

Une sortie semblable à l’exemple suivant s’affiche :

9.0.100 [C:\Program Files\dotnet\sdk]
10.0.100 [C:\Program Files\dotnet\sdk]

Vérifiez que la liste comporte une version commençant par 10. Si aucune liste n’est répertoriée ou que la commande n’est pas trouvée, installez le kit SDK .NET 10.0 le plus récent.

Ouvrir la solution de démarrage

1. Clonez ou téléchargez le dépôt des exercices.
2. Accédez au dossier part4-exercise1 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 devriez voir apparaitre 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 le langage XAML (Extensible Application Markup Language) et la liaison de données, cela devrait vous rappeler quelque chose, mais la structure utilise le modèle MVVM (Model-View-ViewModel).

Il existe un MovieListViewModel qui sert à la fois de modèle-vue global de l’application et de modèle-vue pour MoviesListPage. Ce viewmodel 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

MoviesListPage est la première page affichée lors de l’exécution de l’application. Le CollectionView 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 SelectionChanged 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. Recherchez l’élément CollectionView et ajoutez l’attribut SelectedItem . Vérifiez également que SelectionMode est défini sur Single:

   <CollectionView ItemsSource="{Binding Movies}" 
                   SelectedItem="{Binding SelectedMovie, Mode=OneWayToSource}" 
                   Margin="10" 
                   SelectionMode="Single"
                   SelectionChanged="CollectionView_SelectionChanged">
   

   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 pour l’affichage, Views\MoviesListPage.xaml.cs.

6. Recherchez le gestionnaire d’événements CollectionView_SelectionChanged . Remplacez-le par le code suivant :

   private async void CollectionView_SelectionChanged(object sender, SelectionChangedEventArgs e)
   {
       if (e.CurrentSelection.Count == 0)
           return;
   
       await Navigation.PushAsync(new Views.MovieDetailPage());
   
       // Deselect
       ((CollectionView)sender).SelectedItem = null;
   }
   

   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.