Упражнение. Преобразование обработчика событий в команду

• 10 мин

В этом упражнении переключите обратно на приложение "список фильмов", с которым вы работали в предыдущем упражнении. На этот раз вы преобразуете обработчик событий меню Delete в команду.

Скачивание и запуск примера приложения

Чтобы запустить этот модуль упражнений, скачайте пример проекта списка фильмов. В этом проекте отображается список фильмов. Щелкнув фильм, перейдите на страницу сведений с дополнительными сведениями о фильме.

1. Скачайте и извлеките пример проекта списка фильмов в временную папку.
2. Перейдите в папку part6-exercise2 и откройте решение MovieCatalog.sln .
3. Выполните сборку и запуск проекта, чтобы убедиться, что он работает. На экране отображается список фильмов. Щелкните правой кнопкой мыши один из фильмов, перечисленных, и приложение переходит на страницу сведений.

Изучение кода

Откройте решение MovieCatalog и откройте файл Views\MovieListPage.xaml. Представляет ListView элемент для каждого фильма в связанной Movies коллекции. Каждый элемент определяет контекстное меню для удаления фильма:

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

Когда элемент меню щелкается, MenuItem_Clicked вызывается и фильм удаляется. Контекст привязки элемента меню — текущий фильм, MovieViewModel класс. Но код для удаления фильма находится в главном режиме MovieListViewModelпредставления приложения. Обработчик событий считает это так, как он получает контекст привязки элемента меню и отправляет его в метод 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);
}

Добавление команды

Первым шагом при преобразовании обработчика событий в команду является добавление команды в модель представления. Эта команда принимает фильм и удаляет его из коллекции.

1. В окне Обозреватель решений откройте файл ViewModels\MovieListViewModel.cs.

2. Добавьте в класс MovieListViewModel следующее свойство:

   public ICommand DeleteMovieCommand { get; private set; }
   

3. Затем найдите MovieListViewModel конструктор и создайте экземпляр команды:

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

   Метод DeleteMovie уже существует и принимает MovieViewModel параметр. Команда упаковывает этот метод и предоставляет его в режиме просмотра.

4. Откройте файл ViewModels\MoviesListPage.xaml.

5. Обновите для привязки MenuItem Command параметра к параметру DeleteMovieCommand. Передайте текущий контекст привязки CommandParameterв качестве .

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

   Обратите внимание, что Clicked обработчик событий был удален из него MenuItem.

   Контекст Source привязки устанавливается в основной режим представления приложения, как и сама страница. Контекст привязки MenuItem остается фильмом и передается в .CommandParameter

6. Откройте файл программной части представления, Views\MoviesListPage.xaml.cs и удалите MenuItem_Clicked код.

7. Запустите приложение и щелкните правой кнопкой мыши или нажмете один из фильмов, выберите "Удалить " в контекстном меню. Фильм удаляется из списка.