Oefening: selectie beheren met behulp van een viewmodel

Voltooid

Voor onze oefening laten we het voorbeeld van de human resources-app kort achter. In plaats daarvan werken we met een toepassing waarin films worden vermeld. De app heeft al een aantal pagina's en viewmodels met enkele basisbindingen. De twee pagina's zijn een lijstpagina en een detailpagina. We wijzigen de selectielogica zodat de ListView en de detailpagina dezelfde viewmodel-eigenschap gebruiken.

In deze module wordt de .NET 9.0 SDK gebruikt. Zorg ervoor dat .NET 9.0 is geïnstalleerd door de volgende opdracht uit te voeren in de opdrachtterminal van uw voorkeur:

dotnet --list-sdks

Uitvoer die vergelijkbaar is met het volgende voorbeeld wordt weergegeven:

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

Zorg ervoor dat er een versie wordt vermeld die begint met 9 . Als er geen wordt vermeld of de opdracht niet wordt gevonden, installeert u de meest recente .NET 9.0 SDK.

Open de startersoplossing

1. Kloon of download de oefeningsopslagplaats.
2. Download het voorbeeldproject Filmlijst en pak het uit in een tijdelijke map.
3. Navigeer naar de map part4-exercise1 en open de MovieCatalog.sln-oplossing .
4. Bouw het project en voer het uit om ervoor te zorgen dat het werkt. U ziet nu een lijst met films die op het scherm worden weergegeven. Selecteer een van de films in de lijst en de app gaat naar een detailpagina.

De code controleren

Neem enkele minuten de tijd om te onderzoeken hoe de viewmodels en weergaven zijn gestructureerd. Als u bekend bent met Extensible Application Markup Language (XAML) en gegevensbinding, moet deze er allemaal bekend uitzien, maar de structuur maakt gebruik van het MVVM-patroon (Model-View-ViewModel).

Er is een MovieListViewModel die dubbele plicht dient als het algemene viewmodel van de app en als het viewmodel voor het MoviesListPage. Dit viewmodel bevat een lijst met films die zijn geladen vanuit het model. Dit is een json-bestand dat in het project is opgenomen. Het andere viewmodel is MovieViewModel, en vertegenwoordigt één film. Het biedt ook dubbele rechten: geef gegevens op voor de rijen op de lijstpagina en als de BindingContext voor de MovieDetailPage.

Ondersteuning voor selectie toevoegen

Dit MoviesListPage is de eerste pagina die wordt weergegeven wanneer de app wordt uitgevoerd. De ListView pagina is gebonden aan de verzameling exemplaren die MovieViewModel worden geleverd door het algemene viewmodel. MovieListViewModel Wanneer u een van de films in de weergave selecteert, navigeert de ItemTapped gebeurtenis naar het MovieDetailPageitem, dat een film is, doorgegeven BindingContext aan de constructor van de weergave. Hiermee MovieDetailPage stelt u het viewmodel in dat is doorgegeven als de BindingContext pagina.

In plaats daarvan gaan we de app bijwerken zodat de MovieDetailPage geselecteerde film kan worden gelezen uit het viewmodel van de algehele app.

1. Open in het venster Solution Explorer het bestand ViewModels\MovieListViewModel.cs .

2. Voeg de volgende code toe aan de klasse MovieListViewModel:

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

3. Open vervolgens het bestand Views\MoviesListPage.xaml .

4. Zoek het ListView element en voeg het SelectedItem kenmerk toe:

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

   Met dit kenmerk wordt het geselecteerde item van de lijst gekoppeld aan de nieuwe eigenschap in het viewmodel.

5. Open het code-behind-bestand voor de weergave, Views\MoviesListPage.xaml.cs.

6. Vervang de code van de ListView_ItemTapped gebeurtenis-handler door de volgende code:

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

   De MovieDetailPage nieuwe constructor accepteert de film niet meer in de constructor, maar leest het hoofdweergavemodel van de app voor.

7. Open het bestand Views\MovieDetailPage.xaml.cs en wijzig de constructor in de volgende code:

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

   Met deze code wordt de bindingscontext van de weergave ingesteld op de geselecteerde film.

8. Voer de app uit en controleer of de code werkt zoals bedoeld.