Übung: Verwalten der Auswahl mit einem ViewModel

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 CollectionView und die Detailseite dieselbe ViewModel-Eigenschaft verwenden.

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

dotnet --list-sdks

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

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

Stellen Sie sicher, dass eine Version aufgeführt wird, die mit 10 beginnt. Wenn keine aufgeführt ist oder der Befehl nicht gefunden wird, installieren Sie das neueste .NET 10.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 CollectionView 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 SelectionChanged 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 CollectionView Element, und fügen Sie das SelectedItem Attribut hinzu. Stellen Sie außerdem sicher, dass SelectionMode auf Single eingestellt ist.

   <CollectionView ItemsSource="{Binding Movies}" 
                   SelectedItem="{Binding SelectedMovie, Mode=OneWayToSource}" 
                   Margin="10" 
                   SelectionMode="Single"
                   SelectionChanged="CollectionView_SelectionChanged">
   

   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. Suchen Sie den CollectionView_SelectionChanged Ereignishandler. Ersetzen Sie sie durch den folgenden Code:

   private async void CollectionView_SelectionChanged(object sender, SelectionChangedEventArgs e)
   {
       if (e.CurrentSelection.Count == 0)
           return;
   
       await Navigation.PushAsync(new Views.MovieDetailPage());
   
       // Deselect
       ((CollectionView)sender).SelectedItem = null;
   }
   

   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.