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

  • 10 min

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

Pobieranie i uruchamianie aplikacji przykładowej

  1. Przejdź do folderu part6-exercise2 i otwórz rozwiązanie MovieCatalog.sln w programie Visual Studio lub folderze w programie Visual Studio Code.
  2. Skompiluj i uruchom projekt, aby upewnić się, że działa. Na wyświetlonym ekranie zostanie wyświetlona lista filmów. Kliknij prawym przyciskiem myszy jeden z filmów wymienionych, a aplikacja przechodzi do strony szczegółów.

Analizowanie kodu

Otwórz rozwiązanie MovieCatalog i otwórz plik Views\MovieListPage.xaml. Element ListView przedstawia element dla każdego filmu w powiązanej Movies kolekcji. Każdy element definiuje menu kontekstowe umożliwiające usunięcie filmu:

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

Po kliknięciu elementu menu element jest wywoływany, MenuItem_Clicked a film zostanie usunięty. Kontekst powiązania elementu menu to bieżący film, MovieViewModel klasa . Jednak kod usuwania filmu znajduje się na głównym modelu MovieListViewModelwidoków aplikacji . Procedura obsługi zdarzeń traktuje to, ponieważ pobiera kontekst powiązania elementu menu i wysyła go do metody modelu viewmodel DeleteMovie :

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

  5. Zaktualizuj parametr w MenuItem celu powiązania parametru Command z parametrem DeleteMovieCommand. Przekaż bieżący kontekst powiązania jako CommandParameter.

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

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

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

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

  7. Uruchom aplikację i kliknij prawym przyciskiem myszy lub naciśnij długo jeden z filmów, wybierz polecenie Usuń z menu kontekstowego. Film zostanie usunięty z listy.