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

Ukończone

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 ListView strona i strona szczegółów korzystała z tej samej właściwości viewmodel.

W tym module jest używany zestaw .NET 9.0 SDK. Upewnij się, że masz zainstalowany program .NET 9.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:

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

Upewnij się, że na liście znajduje się wersja rozpoczynająca się od 9 . Jeśli na liście nie ma żadnej listy lub polecenie nie zostanie znalezione, zainstaluj najnowszy zestaw SDK platformy .NET 9.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 ListView 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 ItemTapped 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. ListView Znajdź element i dodaj SelectedItem atrybut:

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

   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. Zastąp ListView_ItemTapped kod programu obsługi zdarzeń następującym kodem:

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

   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.