Alıştırma - Olay işleyicisini komuta dönüştürme

Tamamlandı

Bu alıştırmada, önceki alıştırmada birlikte çalıştığınız "film listesi" uygulamasına geri dönün. Bu kez, Silme kaydırması eyleminin olay işleyicisini bir komuta dönüştürüyorsunuz.

Ö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 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. Alıştırma depoyu kopyalayın veya indirin.
2. part6-exercise2 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. Ekran görüntülendiğinde bir film listesi görmeniz gerekir. Silme eylemini göstermek için listelenen filmlerden birinde sola doğru çekin.

Kodu inceleme

MovieCatalog çözümünü açın ve Views\MovieListPage.xaml dosyasını açın. , CollectionView ilişkili Movies koleksiyondaki her film için bir öğe sunar. Her öğe, silme eylemiyle birlikte bir SwipeView kullanır.

<CollectionView.ItemTemplate>
    <DataTemplate x:DataType="vm:MovieViewModel">
        <SwipeView>
            <SwipeView.RightItems>
                <SwipeItems>
                    <SwipeItem Text="Delete"
                              BackgroundColor="Red"
                              Clicked="MenuItem_Clicked" />
                </SwipeItems>
            </SwipeView.RightItems>
            <VerticalStackLayout Padding="10">
                <Label Text="{Binding Title}" 
                       FontSize="16" />
            </VerticalStackLayout>
        </SwipeView>
    </DataTemplate>
</CollectionView.ItemTemplate>

Çekme öğesine tıklandığında MenuItem_Clicked yöntemi çağrılır ve film kaldırılır. Kaydırma öğesinin bağlama bağlamı, mevcut film olan MovieViewModel sınıfıdır. Ancak bir filmi kaldırma kodu uygulamanın ana görünüm modelindedir MovieListViewModel. Olay işleyicisi, çekme öğesinin bağlama bağlamını aldığından ve viewmodelin DeleteMovie yöntemine gönderdiğinden bu olguyu dikkate alır:

private void MenuItem_Clicked(object sender, EventArgs e)
{
    SwipeItem swipeItem = (SwipeItem)sender;
    ViewModels.MovieViewModel movie = (ViewModels.MovieViewModel)swipeItem.BindingContext;
    App.MainViewModel.DeleteMovie(movie);
}

Komut ekleme

Olay işleyicisini komuta dönüştürmenin ilk adımı, komutu görünüm modeline eklemektir. Bu komut bir filmi kabul eder ve koleksiyondan kaldırır.

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

2. MovieListViewModel sınıfına aşağıdaki özelliği ekleyin:

   public ICommand DeleteMovieCommand { get; private set; }
   

3. Ardından oluşturucuyu MovieListViewModel bulun ve komutun örneğini başlatın:

   public MovieListViewModel()
   {
       Movies = [];
       DeleteMovieCommand = new Command<MovieViewModel>(DeleteMovie);
   }
   

   DeleteMovie yöntemi zaten var ve bir MovieViewModel parametre kabul ediyor. komutu bu yöntemi sarmalar ve görünüm modelinde kullanıma sunar.

4. Views\MoviesListPage.xaml dosyasını açın.

5. Command parametresini DeleteMovieCommand öğesine bağlamak için SwipeItem öğesini güncelleyin. Geçerli bağlama bağlamını olarak geçirin CommandParameter.

   <SwipeItem Text="Delete"
              BackgroundColor="Red"
              Command="{Binding DeleteMovieCommand, Source={x:Static local:App.MainViewModel}}"
              CommandParameter="{Binding}" />
   

   Olay işleyicisinin Clicked öğesinden kaldırıldığına SwipeItemdikkat edin.

   Source Bağlama bağlamı, sayfanın kendisi gibi uygulamanın ana görünüm modeline ayarlanır. bağlama bağlamı SwipeItem film olarak kalır ve öğesine CommandParametergeçirilir.

6. Görünümler\MoviesListPage.xaml.cs için arka planda kod dosyasını açın ve kodu kaldırınMenuItem_Clicked.

7. Uygulamayı çalıştırın ve filmlerden birinde sola doğru çekin. Çekme eyleminden Sil'i seçin. Film listeden silinir.