[Tips and Tricks] Universal Apps. Evento ItemClick a Comando

El problema

Los controles ListView y GridView son
una pieza angular muy importante en la mayoría de aplicaciones Windows
Store y Windows Phone. En su uso necesitaremos determinar cuando el
usuario selecciona un elemento. Trabajando con el patrón MVVM nos encontramos con un problema. Para determinar el elemento seleccionado tenemos dos opciones:

Utilizar la propiedad SelectedItem. Podemos bindear una propiedad de nuestra ViewModel a la propiedad SelectedItem
del control. Es una opción válida pero en ciertas situaciones puede no
ser completa. Por ejemplo, si al establecer la propiedad realizamos una
navegación, al volver atrás si volvemos a intentar navegar al mismo
elemento no ocurrira nada. Esto es asi, porque la propiedad SelectedItem esta ya establecida y no cambia. Debemos establecer a nulo la propiedad utilizando los eventos de navegación.
Utilizar el evento ItemClick que nos facilita un argumento de tipo ItemClickEventArgs
con la información del elemento seleccionado. Forma idónea pero con un
gran problema, no expone una propiedad Command para bindear y utilizar
nuestra ViewModel.

¿Qué podemos hacer?

En este artículo crearemos una sencilla clase que exponga una propiedad de dependencia adjunta a utilizar.

ItemClick utilizando un Comando

Añadiremos un GridView con su propiedad ItemsSource bindeada a una propiedad de la ViewModel:

<GridView
     ItemsSource="{Binding Items}"
     SelectionMode="None"
     IsSwipeEnabled="false"
     IsItemClickEnabled="True" />

Deshabilitamos los modos de selección y habilitamos el evento ItemClick. En la ViewModel tendremos definida la propiedad:

private ObservableCollection<string> _items;
 
public ObservableCollection<string> Items
{
     get
     {
          if (_items == null)
             LoadData();
         return _items;
     }
     set { _items = value; }
}
La propiedad la instanciará un método LoadData que rellenará la colección de sencillos datos para poder probar:
private void LoadData()
{
     _items = new ObservableCollection<string>();
     for (int i = 0; i < 100; i++)
     {
          _items.Add((i + 1).ToString());
     }
}
Llega el momento clave. Vamos a crear una clase donde definiremos una propiedad de dependencia adjunta (Attached DependencyProperty) de tipo ICommand:
public static class ItemClickCommandBehavior
{
     public static readonly DependencyProperty ItemClickCommandProperty =
            DependencyProperty.RegisterAttached("ItemClickCommand", typeof(ICommand),
            typeof(ItemClickCommandBehavior), new PropertyMetadata(null, OnItemClickCommandPropertyChanged));
 
     public static void SetItemClickCommand(DependencyObject d, ICommand value)
     {
         d.SetValue(ItemClickCommandProperty, value);
     }
 
     public static ICommand GetItemClickCommand(DependencyObject d)
     {
         return (ICommand)d.GetValue(ItemClickCommandProperty);
     }
 
     private static void OnItemClickCommandPropertyChanged(DependencyObject d,
         DependencyPropertyChangedEventArgs e)
     {
         var control = d as ListViewBase;
         if (control != null)
             control.ItemClick += OnItemClick;
     }
 
     private static void OnItemClick(object sender, ItemClickEventArgs e)
     {
         var control = sender as ListViewBase;
         var itemClickCommand = GetItemClickCommand(control);
 
         if itemClickCommand != null && command.CanExecute(e.ClickedItem))
             itemClickCommand.Execute(e.ClickedItem);
     }
}
Cuando se ejecute el evento ItemClick, se tomará el Comando definido en la propiedad, se le pasará el argumento ClickedItem y se ejecutará.
NOTA: Importante resaltar que en la clase utilizamos ListViewBase, por lo que podremos adjuntar la propiedad tanto en controles GridView como ListView.
Ya podremos adjuntar la propiedad en nuestro GridView. Debemos definir el comando a ejecutar en la ViewModel:
private ICommand _clickCommand;
 
public ICommand ClickCommand
{
     get { return _clickCommand = _clickCommand ?? new DelegateCommandAsync<string>(ClickCommandExecute); }
}
 
private async Task ClickCommandExecute(string parameter)
{
     await _dialogService.ShowAsync(parameter);
}
El comando es sencillo. En el método Execute del mismo

recibimos el objeto que contiene al elemento seleleccionado como

parámetro. En nuestro ejemplo, utilizamos un sencillo servicio de

dialogo para mostrar un mensaje con la información del elemento

seleccionado.
Todo listo!. Solo nos queda añadir la propiedad adjunta. Añadimos en la vista el namespace donde hemos definido nuestra clase ItemClickCommandBehavior:
xmlns:behaviors="using:ItemClickCommandBehavior.Behaviors"
Y en el GridView:
De esta forma, tendremos nuestro GridView:
Al pulsar sobre cualquier elemento, nuestra clase dispará el evento ItemClick donde se tomará el comando adjunto y se ejecutará:
Podéis descargar el sencillo ejemplo realizado a continuación:
También podéis acceder al código fuente directamente en GitHub:
Recordar que cualquier tipo de duda o sugerencia la podéis dejar en los comentarios de la entrada.
Más informaciónWindows Dev Center: ListViewBase.ItemClick Event
MSDN: Attached Properties Overview

El problema

¿Qué podemos hacer?

ItemClick utilizando un Comando

Más información

Deja un comentario Cancelar respuesta