Övning – Hantera markeringen med hjälp av en vymodell

Slutförd

I vår övning lämnar vi kort exemplet med personalappen bakom oss. I stället arbetar vi med ett program som listar filmer. Appen har redan ett par sidor och viewmodels som har vissa grundläggande bindningar. De två sidorna är en listsida och en detaljsida. Vi ändrar urvalslogik så att ListView sidan och detaljsidan använder samma viewmodel-egenskap.

I den här modulen används .NET 9.0 SDK. Kontrollera att du har .NET 9.0 installerat genom att köra följande kommando i önskad kommandoterminal:

dotnet --list-sdks

Utdata som liknar följande exempel visas:

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

Kontrollera att en version som börjar med 9 visas. Om inget visas eller om kommandot inte hittas installerar du den senaste .NET 9.0 SDK:t.

Öppna startlösningen

1. Klona eller ladda ned övningsrepo.
2. Gå till mappen part4-exercise1 och öppna lösningen MovieCatalog.sln .
3. Skapa och kör projektet för att se till att det fungerar. Du bör se en lista över filmer som visas på skärmen. Välj en av filmerna i listan och appen navigerar till en detaljsida.

Granska koden

Det tar några minuter att undersöka hur viewmodels och vyer är strukturerade. Om du är bekant med XAML (Extensible Application Markup Language) och databindning bör allt se bekant ut, men strukturen använder MVVM-mönstret (Model-View-ViewModel).

Det finns en MovieListViewModel som fungerar med dubbla plikter som appens övergripande viewmodel och som viewmodel för MoviesListPage. Den här vymodellen innehåller en lista över filmer som lästs in från modellen, vilket är en json-fil som ingår i projektet. Den andra viewmodel är MovieViewModel, och representerar en enda film. Den fungerar också med dubbla uppgifter: ange data för raderna på listsidan och som BindingContext för MovieDetailPage.

Lägg till markeringsstöd

MoviesListPage Är den första sidan som visas när appen körs. På ListView sidan är bunden till samlingen av MovieViewModel instanser som tillhandahålls av den övergripande viewmodel, MovieListViewModel. När du väljer på en av filmerna i vyn ItemTapped navigerar händelsen till MovieDetailPageoch skickar BindingContext objektet, som är en film, till konstruktorn i vyn. Anger MovieDetailPage den vymodell som skickades som sidans BindingContext .

I stället ska vi uppdatera appen så att den MovieDetailPage läser den valda filmen från den övergripande appens visningsmodell.

1. Öppna filen ViewModels\MovieListViewModel.cs i Solution Explorer-fönstret.

2. Lägg till följande kod i MovieListViewModel klassen:

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

3. Öppna sedan filen Views\MoviesListPage.xaml .

4. Leta upp elementet ListView och lägg till attributet SelectedItem :

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

   Det här attributet binder det markerade objektet i listan till den nya egenskapen i viewmodel.

5. Öppna filen code-behind för vyn Views \MoviesListPage.xaml.cs.

6. ListView_ItemTapped Ersätt händelsehanterarkoden med följande kod:

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

   Den MovieDetailPage nya konstruktorn accepterar inte längre filmen i konstruktorn. I stället läser den nya konstruktorn appens huvudvymodell.

7. Öppna filen Views\MovieDetailPage.xaml.cs och ändra konstruktorn till följande kod:

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

   Den här koden anger bindningskontexten för vyn till den valda filmen.

8. Kör appen och kontrollera att koden fungerar som den ska.