Ejercicio: Conversión de un controlador de eventos en un comando

En este ejercicio, vuelva a cambiar a la aplicación "lista de películas" con la que ha trabajado en el ejercicio anterior. Esta vez, convertirá el controlador de eventos de la acción de deslizar para Eliminar en un comando.

Descarga y ejecución del ejemplo

Este proyecto muestra una lista de películas. Al hacer clic en una película, se desplaza a una página de detalles con más información sobre la película.

1. Clone o descargue el repositorio del ejercicio.
2. Vaya a la carpeta part6-exercise2 y abra la solución MovieCatalog.sln.
3. Compile y ejecute el proyecto para asegurarse de que funciona. Cuando se muestre la pantalla, debería ver una lista de películas. Desliza el dedo hacia la izquierda en una de las películas enumeradas para mostrar la acción de eliminación.

Examen del código

Abra la solución MovieCatalog y abra el archivo Views\MovieListPage.xaml. CollectionView presenta un elemento para cada película de la colección enlazada Movies. Cada elemento usa un SwipeView con una acción para eliminar.

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

Cuando se hace clic en el elemento deslizable, se invoca el MenuItem_Clicked método y se quita la película. El contexto de enlace del elemento deslizable es la película actual, la MovieViewModel clase. Pero el código para quitar una película está en el modelo de vista principal MovieListViewModel de la aplicación. El controlador de eventos tiene en cuenta este hecho al obtener el contexto de enlace del elemento desplazable y enviarlo al método del modelo de vista DeleteMovie.

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

Adición de un comando

El primer paso para convertir el controlador de eventos en un comando es agregar el comando al modelo de vista. Este comando acepta una película y la quita de la colección.

1. En la ventana Explorador de soluciones, abra el archivo ViewModels\MovieListViewModel.cs.

2. Agregue la siguiente propiedad a la clase MovieListViewModel:

   public ICommand DeleteMovieCommand { get; private set; }
   

3. A continuación, busque el constructor MovieListViewModel y cree una instancia del comando:

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

   El método DeleteMovie ya existe y acepta un parámetro MovieViewModel. El comando ajusta ese método y lo expone en el modelo de vista.

4. Abra el archivo Views\MoviesListPage.xaml .

5. Actualice el SwipeItem para enlazar el parámetro Command con el DeleteMovieCommand. Pase el contexto de enlace actual como CommandParameter.

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

   Observe que el controlador de eventos Clicked se quitó de SwipeItem.

   El Source del contexto de enlace se establece en el modelo de vista principal de la aplicación, al igual que la propia página. El contexto de enlace de SwipeItem permanece en la película y se pasa a CommandParameter.

6. Abra el archivo de código subyacente para la vista, Views\MoviesListPage.xaml.cs y quite el código MenuItem_Clicked.

7. Ejecute la aplicación y deslice el dedo hacia la izquierda en una de las películas. Seleccione Eliminar en la acción de deslizar el dedo. La película se elimina de la lista.