Latihan - Mengelola pilihan dengan menggunakan model tampilan

  • 10 menit

Untuk latihan ini, kita akan meninggalkan sebentar contoh aplikasi sumber daya manusia. Sebagai gantinya, kita akan bekerja dengan aplikasi yang mencantumkan film. Aplikasi ini sudah memiliki beberapa halaman dan model tampilan yang memiliki beberapa pengikatan dasar. Dua halaman tersebut adalah halaman daftar dan halaman detail. Kita akan mengubah logika pemilihan sehingga ListView dan halaman detail menggunakan properti model tampilan yang sama.

Unduh dan jalankan sampel

Catatan

Jika Anda berencana untuk menjalankan dan men-debug aplikasi .NET MAUI Anda di Android dari Windows, yang terbaik adalah mengkloning atau mengunduh konten latihan ke jalur folder singkat, seperti C:\dev\, untuk menghindari file yang dihasilkan build melebihi panjang jalur maksimum.

Untuk memulai modul latihan ini, unduh proyek Sampel Daftar Film. Proyek ini menampilkan daftar film. Mengklik film menavigasi ke halaman detail dengan informasi selengkapnya tentang film.

  1. Unduh dan ekstrak proyek Sampel Daftar Film ke folder sementara.
  2. Navigasikan ke folder part4-exercise1 dan buka solusi MovieCatalog.sln .
  3. Buat dan jalankan proyek untuk memastikan proyek berfungsi. Pada layar yang ditampilkan, Anda akan melihat daftar film. Pilih salah satu film yang tercantum dan aplikasi menavigasi ke halaman detail.

Memeriksa kode

Luangkan beberapa menit untuk memeriksa bagaimana viewmodel dan tampilan terstruktur. Jika Anda terbiasa dengan XAML dan pengikatan data, semuanya harus terlihat akrab, tetapi disusun menggunakan pola MVVM.

Ada MovieListViewModel yang melayani tugas ganda sebagai model tampilan keseluruhan aplikasi dan sebagai model tampilan untuk MoviesListPage. Viewmodel ini berisi daftar film yang dimuat dari model, yang merupakan file json yang disertakan dalam proyek. Viewmodel lainnya adalah MovieViewModel, dan mewakili satu film. Ini juga melayani tugas ganda: menyediakan data untuk baris di halaman daftar dan sebagai BindingContext untuk MovieDetailPage.

Menambahkan dukungan pilihan

MoviesListPage adalah halaman yang pertama kali ditampilkan saat aplikasi berjalan. Pada ListView halaman terikat dengan kumpulan MovieViewModel instans yang disediakan oleh viewmodel keseluruhan, MovieListViewModel. Saat Anda memilih salah satu film dalam tampilan, ItemTapped peristiwa menavigasi ke MovieDetailPage, meneruskan BindingContext item, yang merupakan film, ke konstruktor tampilan. Mengatur MovieDetailPage viewmodel yang diteruskan sebagai BindingContext halaman.

Sebagai gantinya, mari kita perbarui aplikasi agar MovieDetailPage membaca film yang dipilih dari viewmodel aplikasi secara keseluruhan.

  1. Di jendela Penjelajah Solusi, buka file ViewModels\MovieListViewModel.cs.

  2. Tambahkan kode berikut ke kelas MovieListViewModel:

    private MovieViewModel _selectedMovie;

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

  3. Selanjutnya, buka file Views\MoviesListPage.xaml .

  4. ListView Temukan elemen , dan tambahkan SelectedItem atribut :

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

    Atribut ini mengikat item yang dipilih dari daftar ke properti baru di viewmodel.

  5. Buka file code-behind untuk tampilan, Views\MoviesListPage.xaml.cs.

  6. ListView_ItemTapped Ganti kode penanganan aktivitas dengan kode berikut:

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

    Sebaliknya MovieDetailPage , konstruktor baru tidak lagi menerima film di konstruktor membaca viewmodel utama aplikasi.

  7. Buka file Views\MovieDetailPage.xaml.cs dan ubah konstruktor ke kode berikut:

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

    Kode ini mengatur konteks pengikatan tampilan ke film yang dipilih.

  8. Jalankan aplikasi dan verifikasi bahwa kode berfungsi seperti yang dimaksudkan.