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

  • 10 dakika

Bu alıştırmada, önceki alıştırmada birlikte çalıştığınız "film listesi" uygulamasına geri dönün. Bu kez Sil menüsünün olay işleyicisini bir komuta dönüştüreceksiniz.

Ö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. 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. Görüntülenen ekranda bir film listesi görürsünüz. Listelenen filmlerden birine sağ tıklarsanız uygulama bir ayrıntı sayfasına gider.

Kodu inceleme

MovieCatalog çözümünü açın ve Views\MovieListPage.xaml dosyasını açın. , ListView ilişkili Movies koleksiyondaki her film için bir öğe sunar. Her öğe, bir filmi silmek için bir bağlam menüsü tanımlar:

<ListView.ItemTemplate>
    <DataTemplate>
        <TextCell Text="{Binding Title}" x:DataType="vm:MovieViewModel">
            <TextCell.ContextActions>
                <MenuItem Text="Delete" IsDestructive="True" Clicked="MenuItem_Clicked" />
            </TextCell.ContextActions>
        </TextCell>
    </DataTemplate>
</ListView.ItemTemplate>

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

private void MenuItem_Clicked(object sender, EventArgs e)
{
    MenuItem menuItem = (MenuItem)sender;
    ViewModels.MovieViewModel movie = (ViewModels.MovieViewModel)menuItem.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. ViewModels\MoviesListPage.xaml dosyasını açın.

  5. parametresini MenuItem öğesine bağacak Command şekilde güncelleştirin DeleteMovieCommand. Geçerli bağlama bağlamını olarak geçirin CommandParameter.

    <MenuItem Text="Delete"
          IsDestructive="True"
          Command="{Binding DeleteMovieCommand, Source={x:Static local:App.MainViewModel}}"
          CommandParameter="{Binding}" />

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

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

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

  7. Uygulamayı çalıştırın ve filmlerden birine sağ tıklayın veya uzun basın, bağlam menüsünden Sil'i seçin. Film listeden silinir.