Alıştırma - Görünüm modeli kullanarak seçimi yönetme

  • 10 dakika

Alıştırmamızda, insan kaynakları uygulamasının örneğini kısaca geride bırakacağız. Bunun yerine filmleri listeleyen bir uygulamayla çalışacağız. Uygulamanın zaten bazı temel bağlamaları olan birkaç sayfası ve görünüm modeli vardır. İki sayfa bir liste sayfası ve ayrıntı sayfasıdır. ve ayrıntı sayfasının aynı viewmodel özelliğini kullanması için seçim mantığını ListView değiştireceğiz.

Örneği indirme ve çalıştırma

Not

Windows'tan Android'de .NET MAUI uygulamalarınızı çalıştırmayı ve hatalarını ayıklamayı planlıyorsanız, derleme tarafından oluşturulan dosyaların yol uzunluğunun üst sınırını aşmasını önlemek için en iyisi alıştırma içeriğini kopyalayıp C:\dev\ gibi kısa bir klasör yoluna indirmektir.

Bu alıştırma modülünü başlatmak için Film Listesi Örneği projesini indirin. Bu projede film listesi görüntülenir. Bir filme tıklanması, film hakkında daha fazla bilgi içeren bir ayrıntı sayfasına gider.

  1. Film Listesi Örneği projesini indirip geçici bir klasöre ayıklayın.
  2. part4-exercise1 klasörüne gidin ve MovieCatalog.sln çözümünü açın.
  3. Çalıştığından emin olmak için projeyi derleyin ve çalıştırın. Görüntülenen ekranda bir film listesi görürsünüz. Listelenen filmlerden birini seçtiğinizde uygulama bir ayrıntı sayfasına gider.

Kodu inceleme

Görünüm modellerinin ve görünümlerin nasıl yapılandırıldığını incelemek için birkaç dakika bekleyin. XAML ve veri bağlama hakkında bilgi sahibiyseniz, bunların tümü tanıdık görünmelidir, ancak MVVM deseni kullanılarak yapılandırılmıştır.

Uygulamanın genel görünüm modeli ve için MoviesListPagegörünüm modeli olarak çift görev sunan bir MovieListViewModel vardır. Bu görünüm modeli, modelden yüklenen filmlerin listesini içerir. Bu, projeye dahil edilen bir json dosyasıdır. Diğer görünüm modeli ise ve MovieViewModeltek bir filmi temsil eder. Ayrıca çift görev de sunar: liste sayfasındaki satırlar için ve için MovieDetailPageolarak BindingContext veri sağlar.

Seçim desteği ekleme

MoviesListPage, uygulama çalıştırıldığında ilk kez gösterilen sayfadır. ListView Sayfadaki, genel görünüm modeli MovieListViewModeltarafından sağlanan örnek koleksiyonuna MovieViewModel bağlıdır. Görünümdeki filmlerden birini seçtiğinizde, ItemTapped olay öğesine gider MovieDetailPageve bir film olan öğenin öğesini görünümün oluşturucusunda geçirir BindingContext . , MovieDetailPage sayfa olarak geçirilen görünüm modelini BindingContext ayarlar.

Bunun yerine, uygulamanın genel görünüm modelinden seçilen filmi okuyacak MovieDetailPage şekilde uygulamayı güncelleştirelim.

  1. Çözüm Gezgini penceresinde ViewModels\MovieListViewModel.cs dosyasını açın.

  2. Sınıfına MovieListViewModel aşağıdaki kodu ekleyin:

    private MovieViewModel _selectedMovie;

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

  3. Ardından Views\MoviesListPage.xaml dosyasını açın.

  4. ListView öğesini bulun ve özniteliğini SelectedItem ekleyin:

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

    Bu öznitelik, listenin seçili öğesini görünüm modelindeki yeni özelliğe bağlar.

  5. Views\MoviesListPage.xaml.cs görünümü için arka planda kod dosyasını açın.

  6. Olay işleyici kodunu ListView_ItemTapped aşağıdaki kodla değiştirin:

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

    artık MovieDetailPage oluşturucuda filmi kabul etmediğinden, yeni oluşturucu uygulamanın ana görünüm modelini okur.

  7. Views\MovieDetailPage.xaml.cs dosyasını açın ve oluşturucuyu aşağıdaki kodla değiştirin:

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

    Bu kod, görünümün bağlama bağlamını seçili filme ayarlar.

  8. Uygulamayı çalıştırın ve kodun amaçlandığı gibi çalıştığını doğrulayın.