Übung: Verwalten der Auswahl mit einem ViewModel

Abgeschlossen

Für unsere Übung stellen wir das Beispiel der Personalmanagement-App kurz zurück. Stattdessen arbeiten wir mit einer Anwendung, die Filme auflistet. Die App umfasst bereits einige Seiten und ViewModels mit einigen grundlegenden Bindungen. Die zwei Seiten sind eine Listenseite und eine Detailseite. Wir bearbeiten die Auswahllogik so, dass 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 keine aufgeführt ist oder der Befehl nicht gefunden wird, installieren Sie das neueste .NET 9.0 SDK.

Öffnen der Startprojektmappe

1. Klonen oder Herunterladen des Übungs-Repositorys.
2. Navigieren Sie zum Ordner "part4-übung1 ", und öffnen Sie die MovieCatalog.sln Lösung.
3. Erstellen Sie das Projekt, und führen Sie es aus, um sicherzustellen, dass es funktioniert. Auf dem Bildschirm sollte eine Liste der Filme angezeigt werden. Wählen Sie einen der Filme in der Liste 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 (Extensible Application Markup Language) und Datenbindung vertraut sind, sollte Ihnen alles bekannt vorkommen, aber die Struktur verwendet das MVVM-Muster (Model-View-ViewModel).

Es gibt ein MovieListViewModel, das sowohl als ViewModel für die App insgesamt als auch als ViewModel für MoviesListPage fungiert. Dieses Ansichtsmodell 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 erste Seite, die beim Ausführen der App 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 "Lösungs-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 Code-Behind-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.