Esercizio: Gestire la selezione usando un modello di visualizzazione

Completato

Per questo esercizio si lascia momentaneamente da parte l'esempio dell'app delle Risorse umane. Si usa invece un'applicazione che elenca i filmati. L'app contiene già un paio di pagine e modelli di visualizzazione con alcune associazioni di base. Le due pagine sono una pagina elenco e una pagina dei dettagli. Si modifia la logica di selezione in modo che ListView e la pagina dei dettagli usino la stessa proprietà del modello di visualizzazione.

Questo modulo usa .NET 9.0 SDK. Assicurarsi di avere installato .NET 9.0 eseguendo il comando seguente nel terminale dei comandi preferito:

dotnet --list-sdks

Verrà visualizzato un output simile all'esempio seguente:

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

Assicurarsi che sia elencata una versione che inizia con 9. Se il comando non è presente nell'elenco o non viene trovato, installare la versione più recente di .NET 9.0 SDK.

Aprire la soluzione iniziale

1. Clonare o scaricare il repository dell'esercizio.
2. Passare alla cartella part4-exercise1 e aprire la soluzione MovieCatalog.sln.
3. Compilare ed eseguire il progetto per assicurarsi che funzioni. Verrà visualizzato un elenco di filmati sullo schermo. Selezionare uno dei filmati dall'elenco e l'app passa a una pagina di dettaglio.

Esaminare il codice

Esaminare il modo in cui i modelli di visualizzazione e le visualizzazioni sono strutturati. Se si ha familiarità con Extensible Application Markup Language (XAML) e il data binding, tutto ciò dovrebbe avere un aspetto familiare, ma la struttura usa lo schema Model-View-ViewModel (MVVM).

MovieListViewModel svolge una doppia funzione come modello di visualizzazione generale dell'app e come modello di visualizzazione per MoviesListPage. Questo modello di visualizzazione contiene un elenco di film caricati dal modello, ovvero un file JSON incluso nel progetto. L'altro modello di visualizzazione è MovieViewModel, e rappresenta un singolo film. Anche questo modello svolge una doppia funzione: rende disponibili i dati per le righe della pagina elenco e funge da BindingContext per MovieDetailPage.

Aggiungere il supporto per la selezione

MoviesListPage è la prima pagina visualizzata durante l'esecuzione dell'app. Il ListView nella pagina è associato alla raccolta di istanze di MovieViewModel fornite dal modello di visualizzazione complessivo, MovieListViewModel. Quando si seleziona uno dei film nella visualizzazione, l'evento ItemTapped passa a MovieDetailPage, passando l'oggetto BindingContext dell'elemento, ovvero un filmato, al costruttore della visualizzazione. Il MovieDetailPage imposta il modello di visualizzazione passato come BindingContext della pagina.

Aggiorniamo invece l'app in modo che MovieDetailPage legga il filmato selezionato dal modello di visualizzazione dell'app complessiva.

1. Nella finestra Esplora soluzioni aprire il file ViewModels\MovieListViewModel.cs.

2. Aggiungere il codice seguente alla classe MovieListViewModel:

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

3. Aprire quindi il file Views\MoviesListPage.xaml.

4. Individuare l'elemento ListView e aggiungere l'attributo SelectedItem:

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

   Questo attributo associa l'elemento selezionato dell'elenco alla nuova proprietà nel modello di visualizzazione.

5. Aprire il file code-behind per la visualizzazione, Views\MoviesListPage.xaml.cs.

6. Sostituire il codice del gestore eventi ListView_ItemTapped con il codice seguente:

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

   MovieDetailPage non accetta più il filmato nel costruttore, ma il nuovo costruttore legge il modello di visualizzazione principale dell'app.

7. Aprire il file Views\MovieDetailPage.xaml.cs e modificare il costruttore nel codice seguente:

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

   Questo codice imposta il contesto di associazione della visualizzazione sul filmato selezionato.

8. Eseguire l'app e verificare che il codice funzioni come previsto.