Ćwiczenie — konwertowanie programu obsługi zdarzeń na polecenie

W tym ćwiczeniu wróć do aplikacji "lista filmów", z którą pracowaliśmy w poprzednim ćwiczeniu. Tym razem przekonwertujesz procedurę obsługi zdarzeń akcji przesunięcia Usuń na polecenie.

Pobieranie i uruchamianie aplikacji przykładowej

Ten projekt wyświetla listę filmów. Kliknięcie filmu powoduje przejście do strony szczegółów zawierającej więcej informacji o filmie.

1. Sklonuj lub pobierz repozytorium ćwiczenia.
2. Przejdź do folderu part6-exercise2 i otwórz rozwiązanie MovieCatalog.sln .
3. Skompiluj i uruchom projekt, aby upewnić się, że działa. Po wyświetleniu ekranu powinna zostać wyświetlona lista filmów. Przesuń palcem w lewo na jednym z wymienionych filmów, aby wyświetlić akcję usuwania.

Analizowanie kodu

Otwórz rozwiązanie MovieCatalog i otwórz plik Views\MovieListPage.xaml . Element CollectionView przedstawia element dla każdego filmu w powiązanej Movies kolekcji. Każdy element używa SwipeView z akcją usuwania.

<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>

Po kliknięciu elementu przewijanego, wywoływana jest metoda MenuItem_Clicked, a film zostaje usunięty. Kontekst powiązania elementu przesunięcia to bieżący film, klasa MovieViewModel. Jednak kod usuwania filmu znajduje się na głównym modelu MovieListViewModelwidoków aplikacji . Procedura obsługi zdarzeń uwzględnia to, pobierając kontekst powiązania elementu przesunięcia i przekazując go do metody w ViewModelu DeleteMovie.

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

Dodawanie polecenia

Pierwszym krokiem konwertowania programu obsługi zdarzeń na polecenie jest dodanie polecenia do modelu viewmodel. To polecenie akceptuje film i usuwa go z kolekcji.

1. W oknie Eksplorator rozwiązań otwórz plik ViewModels\MovieListViewModel.cs .

2. Dodaj następującą właściwość do klasy MovieListViewModel:

   public ICommand DeleteMovieCommand { get; private set; }
   

3. Następnie znajdź MovieListViewModel konstruktor i utwórz wystąpienie polecenia:

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

   Metoda DeleteMovie już istnieje i akceptuje MovieViewModel parametr. Polecenie opakowuje tę metodę i uwidacznia ją na modelu viewmodel.

4. Otwórz plik Views\MoviesListPage.xaml .

5. Zaktualizuj parametr SwipeItem , aby powiązać Command parametr z parametrem DeleteMovieCommand. Przekaż bieżący kontekst powiązania jako CommandParameter.

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

   Zwróć uwagę, że Clicked program obsługi zdarzeń został usunięty z programu SwipeItem.

   Kontekst Source powiązania jest ustawiony na główny model widoku aplikacji, podobnie jak sama strona. Kontekst SwipeItem powiązania pozostaje filmem i jest przekazywany do obiektu CommandParameter.

6. Otwórz plik z kodem dla widoku, Views\MoviesListPage.xaml.cs, i usuń kod MenuItem_Clicked.

7. Uruchom aplikację i przesuń palcem w lewo na jednym z filmów. Wybierz Usuń z akcji przesunięcia. Film zostanie usunięty z listy.