Übung: Verwalten der Auswahl mit einem ViewModel

Abgeschlossen

Für unsere Übung stellen wir das Beispiel der Personalinformationssystem-App (HRIS) kurz zurück. Stattdessen arbeiten wir mit einer Anwendung, die Filme enthält. Die App umfasst bereits einige Seiten und ViewModels mit einigen grundlegenden Bindungen. Die zwei Seiten sind eine Listenseite und eine Detailseite. Die Auswahllogik wird so überarbeitet, dass die ListView und die Detailseite dieselbe ViewModel-Eigenschaft verwenden.

In diesem Modul wird das .NET 9.0 SDK verwendet. Stellen Sie sicher, dass .NET 9.0 installiert ist, indem Sie in Ihrem bevorzugten Befehlsterminal den folgenden Befehl ausführen:

dotnet --list-sdks

Die daraufhin angezeigte Ausgabe sieht in etwa wie im folgenden Beispiel aus:

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

Stellen Sie sicher, dass eine Version aufgeführt wird, die mit 9 beginnt. Wenn nichts aufgeführt ist oder der Befehl nicht gefunden wurde, installieren Sie das neueste .NET 9.0 SDK.

Öffnen der Startprojektmappe

1. Klonen Sie das Übungsrepository, oder laden Sie es herunter.

   Hinweis

   Es empfiehlt sich, den Übungsinhalt in einen kurzen Ordnerpfad wie z. B. „_C:\dev“ zu klonen oder herunterzuladen. So vermeiden Sie, dass vom Build generierte Dateien die maximale Pfadlänge überschreiten.

2. Navigieren Sie zum Ordner part4-exercise1, und öffnen Sie die Lösung MovieCatalog.sln in Visual Studio oder den Ordner in Visual Studio Code.

3. Erstellen Sie das Projekt, und führen Sie es aus, um sicherzustellen, dass es funktioniert. Auf dem angezeigten Bildschirm wird eine Liste der Filme angezeigt. Wählen Sie einen der aufgelisteten Filme aus, und die App navigiert zu einer Detailseite.

Untersuchen des Codes

Nehmen Sie sich ein paar Minuten Zeit, um zu untersuchen, wie die ViewModels und Ansichten strukturiert sind. Wenn Sie mit XAML und Datenbindungen vertraut sind, sollte Ihnen alles bekannt vorkommen. Die Strukturierung folgt jedoch dem MVVM-Muster.

Es gibt ein MovieListViewModel, das sowohl als ViewModel für die App insgesamt als auch als ViewModel für MoviesListPage fungiert. Dieses ViewModel enthält eine Liste der Filme, die aus dem Modell geladen wurden. Dabei handelt es sich um eine JSON-Datei, die im Projekt enthalten ist. Das andere ViewModel ist MovieViewModelund stellt einen einzelnen Film dar. Es erfüllt ebenfalls eine doppelte Aufgabe: Es liefert Daten für die Zeilen der Listenseite, und es dient als BindingContext für die MovieDetailPage.

Hinzufügen von Auswahlunterstützung

MoviesListPage ist die Seite, die beim Ausführen der App zuerst angezeigt wird. Die ListView Seite ist an die Sammlung von MovieViewModel Instanzen gebunden, die vom Gesamt-ViewModel, MovieListViewModel, bereitgestellt werden. Wenn Sie einen der Filme in der Ansicht auswählen, navigiert das ItemTapped Ereignis zu MovieDetailPage, und übergibt BindingContext des Elements, ein Film, an den Konstruktor der Ansicht. MovieDetailPage legt das ViewModel fest, das als BindingContext der Seite übergeben wurde.

Stattdessen aktualisieren wir die App so, dass MovieDetailPage den ausgewählten Film aus dem ViewModel der gesamten App liest.

1. Öffnen Sie im Projektmappen-Explorer-Fenster die Datei ViewModels\MovieListViewModel.cs.

2. Fügen Sie der MovieListViewModel-Klasse folgenden Code hinzu:

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

3. Öffnen Sie als Nächstes die Datei Views\MoviesListPage.xaml.

4. Suchen Sie das ListView Element, und fügen Sie das SelectedItem Attribut hinzu:

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

   Dieses Attribut bindet das ausgewählte Element der Liste an die neue Eigenschaft im ViewModel.

5. Öffnen Sie die CodeBehind-Datei für die Ansicht, Views\MoviesListPage.xaml.cs.

6. Ersetzen Sie den ListView_ItemTapped Ereignishandlercode durch den folgenden Code:

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

   MovieDetailPage akzeptiert den Film im Konstruktor nicht mehr, stattdessen liest der neue Konstruktor das Haupt-ViewModel der App.

7. Öffnen Sie die Datei Views\MovieDetailPage.xaml.cs, und ändern Sie den Konstruktor in den folgenden Code:

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

   Mit diesem Code wird der Bindungskontext der Ansicht auf den ausgewählten Film festgelegt.

8. Führen Sie die App aus, und stellen Sie sicher, dass der Code wie beabsichtigt funktioniert.