Ćwiczenie — zarządzanie wyborem przy użyciu modelu viewmodel

W naszym ćwiczeniu krótko pozostawimy przykład aplikacji kadr. Zamiast tego pracujemy z aplikacją, która wyświetla listę filmów. Aplikacja ma już kilka stron i modelów widoków, które mają pewne podstawowe powiązania. Dwie strony to strona listy i strona szczegółów. Zmodyfikujemy logikę wyboru, tak aby CollectionView strona i strona szczegółów korzystała z tej samej właściwości viewmodel.

W tym module jest używany zestaw .NET 10.0 SDK. Upewnij się, że masz zainstalowany program .NET 10.0, uruchamiając następujące polecenie w preferowanym terminalu poleceń:

dotnet --list-sdks

Zostanie wyświetlone dane wyjściowe podobne do następującego przykładu:

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

Upewnij się, że na liście znajduje się wersja rozpoczynająca się od 10 . Jeśli nic nie jest wymienione lub polecenie nie zostanie znalezione, zainstaluj najnowszy zestaw SDK platformy .NET 10.0.

Otwieranie rozwiązania startowego

1. Sklonuj lub pobierz repozytorium ćwiczenia.
2. Przejdź do folderu part4-exercise1 i otwórz rozwiązanie MovieCatalog.sln .
3. Skompiluj i uruchom projekt, aby upewnić się, że działa. Powinna zostać wyświetlona lista filmów wyświetlanych na ekranie. Wybierz jeden z filmów na liście, a aplikacja przechodzi do strony szczegółów.

Analizowanie kodu

Poślij kilka minut, aby sprawdzić, jak są ustrukturyzowane modele widoków i widoki. Jeśli znasz język XAML (Extensible Application Markup Language) i powiązanie danych, to wszystko powinno wyglądać znajomo, ale struktura używa wzorca Model-View-ViewModel (MVVM).

Istnieje element MovieListViewModel , który obsługuje podwójne obowiązki jako ogólny model widoków aplikacji i jako model widoku dla elementu MoviesListPage. Ten model widoku zawiera listę filmów załadowanych z modelu, który jest plikiem json zawartym w projekcie. Drugi model widoku to MovieViewModel, i reprezentuje pojedynczy film. Obsługuje on również podwójne obowiązki: podaj dane dla wierszy na stronie listy i jako BindingContext wartość dla elementu MovieDetailPage.

Dodawanie obsługi zaznaczenia

Jest MoviesListPage to pierwsza strona wyświetlana po uruchomieniu aplikacji. Element CollectionView na stronie jest powiązany z kolekcją MovieViewModel wystąpień udostępnianych przez ogólny model widoku. MovieListViewModel Po wybraniu jednego z filmów w widoku SelectionChanged zdarzenie przechodzi do MovieDetailPageelementu , przekazując BindingContext element, który jest filmem, do konstruktora widoku. Ustawia MovieDetailPage model widoku, który został przekazany jako BindingContext strona.

Zamiast tego zaktualizujmy aplikację, aby MovieDetailPage odczytać wybrany film z modelu viewmodel ogólnej aplikacji.

1. W oknie Eksplorator rozwiązań otwórz plik ViewModels\MovieListViewModel.cs.

2. Dodaj następujący kod do MovieListViewModel klasy:

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

3. Następnie otwórz plik Views\MoviesListPage.xaml .

4. CollectionView Znajdź element i dodaj SelectedItem atrybut . Upewnij się również, że SelectionMode jest ustawione na Single.

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

   Ten atrybut wiąże wybrany element listy z nową właściwością w modelu viewmodel.

5. Otwórz plik za kodem dla widoku Views\MoviesListPage.xaml.cs.

6. Znajdź procedurę obsługi zdarzeń CollectionView_SelectionChanged . Zastąp go następującym kodem:

   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;
   }
   

   Element MovieDetailPage nie akceptuje już filmu w konstruktorze, zamiast tego nowy konstruktor odczytuje główny model widoku aplikacji.

7. Otwórz plik Views\MovieDetailPage.xaml.cs i zmień konstruktor na następujący kod:

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

   Ten kod ustawia kontekst powiązania widoku na wybrany film.

8. Uruchom aplikację i sprawdź, czy kod działa zgodnie z oczekiwaniami.