Cvičení – správa výběru pomocí modelu zobrazení

Dokončeno

V našem cvičení stručně ponecháme příklad aplikace pro lidské zdroje. Místo toho pracujeme s aplikací, která uvádí filmy. Aplikace už má několik stránek a modelů zobrazení, které mají některé základní vazby. Dvě stránky jsou stránka seznamu a stránka podrobností. Logiku výběru upravíme tak, aby ListView stránka podrobností používala stejnou vlastnost viewmodel.

Tento modul používá sadu .NET 9.0 SDK. Spuštěním následujícího příkazu v upřednostňovaném příkazovém terminálu se ujistěte, že máte nainstalované rozhraní .NET 9.0:

dotnet --list-sdks

Zobrazí se výstup podobný následujícímu příkladu:

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

Ujistěte se, že je uvedená verze, na 9 které začíná. Pokud žádný není uvedený nebo příkaz nebyl nalezen, nainstalujte nejnovější sadu .NET 9.0 SDK.

Otevření úvodního řešení

1. Naklonujte nebo stáhněte úložiště cvičení.
2. Přejděte do složky part4-exercise1 a otevřete řešení MovieCatalog.sln .
3. Sestavte a spusťte projekt, abyste měli jistotu, že funguje. Měl by se zobrazit seznam filmů zobrazených na obrazovce. Vyberte jeden z filmů v seznamu a aplikace přejde na stránku podrobností.

Kontrola kódu

Než se podíváme, jak jsou modely zobrazení a zobrazení strukturované, udělejte několik minut. Pokud znáte jazyk XAML (Extensible Application Markup Language) a datovou vazbu, měla by vypadat dobře, ale struktura používá model Model-View-ViewModel (MVVM).

MovieListViewModel Jako celkový model zobrazení aplikace a jako model viewmodelu pro model MoviesListPagezobrazení existuje dvojí povinnost . Tento model zobrazení obsahuje seznam filmů načtených z modelu, což je soubor JSON zahrnutý v projektu. Druhý model viewmodel je MovieViewModela představuje jeden film. Slouží také dvojím povinnostem: poskytují údaje pro řádky na stránce seznamu a jako BindingContext údaje pro MovieDetailPagestránku seznamu .

Přidání podpory výběru

První MoviesListPage stránka se zobrazí při spuštění aplikace. Na ListView stránce je vázána na kolekci MovieViewModel instancí poskytovaných celkovým modelem zobrazení, MovieListViewModel. Když vyberete jeden z filmů v zobrazení, ItemTapped událost přejde na MovieDetailPagepoložku , předání BindingContext položky, což je film, konstruktoru zobrazení. Nastaví MovieDetailPage model zobrazení, který byl předán jako BindingContext stránka.

Místo toho aplikaci aktualizujeme tak, aby MovieDetailPage si přečetla vybraný film z celkového modelu zobrazení aplikace.

1. V okně Průzkumník řešení otevřete soubor ViewModels\MovieListViewModel.cs.

2. Do třídy přidejte následující kód MovieListViewModel :

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

3. Dále otevřete soubor Views\MoviesListPage.xaml .

4. ListView Vyhledejte element a přidejte SelectedItem atribut:

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

   Tento atribut vytvoří vazbu vybrané položky seznamu na novou vlastnost v modelu viewmodel.

5. Otevřete soubor kódu pro zobrazení Views\MoviesListPage.xaml.cs.

6. ListView_ItemTapped Nahraďte kód obslužné rutiny události následujícím kódem:

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

   Film MovieDetailPage už v konstruktoru nepřijímá, ale nový konstruktor přečte hlavní model zobrazení aplikace.

7. Otevřete soubor Views\MovieDetailPage.xaml.cs a změňte konstruktor na následující kód:

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

   Tento kód nastaví kontext vazby zobrazení na vybraný film.

8. Spusťte aplikaci a ověřte, že kód funguje podle očekávání.