Introducción
En las aplicaciones móviles la pantalla táctil permite una
interacción profunda del usuario con la misma. Gracias a la pantalla
táctil el usuario puede interactuar utilizando gran variedad de gestos.
Tocar, un toque prolongado, deslizar, pinzamientos y asi cubriendo una
gran variedad de gestos con uno o varios dedos.
En aplicaciones Windows Phone 8.1 Silverlight asi como en
aplicaciones Universales WinRT tenemos a nuestra disposición un conjunto
de eventos de manipulación que nos permiten gestionar la actividad dada
en la pantalla táctil con uno o más dedos. Podemos determinar toques,
toques prolongados, deslizamientos, etc. Sin embargo, la gestión es
mediante eventos, ¿que ocurre si deseamos una gestión igual de sencilla
pero manteniendo nuestra arquitectura sólida basada en MVVM?
En este artículo vamos a ver como crear un Behavior que nos permita capturar un tipo de gestos e invocar un comando de nuestra ViewModel.
¿Te apuntas?
Crear el Behavior
Comenzamos creando un nuevo proyecto:
Nueva Aplicación Universal
Añadimos las carpetas Views, ViewModels y Services además de las clases base necesarias para implementar el patrón MVVM de la misma forma que vimos en este artículo.
Nuestro objetivo sera muy sencillo. Nuestra aplicación de ejemplo tendra un Behavior
asociado al Grid principal que capturará los gestos de tipo Swipe
lanzando un comando de la ViewModel pasando como parámetro la dirección
del gesto.
NOTA: El Behavior se podrá asociar a cualquier elemento derivado de UIElement.
Los Behaviors nos permiten añadir lógica a nuestro XAML para realizar
acciones sencillas (pero increíblemente útiles). Entre el conjunto
variado de acciones que nos permiten ejecutar, podemos lanzar
animaciones, cambiar el estado de un VisualState, realizar la
navegación de páginas o invocar un comando. En líneas generales suelen
permitir realizar tareas habituales sin necesidad de escribir código en
el code-behind de la vista lo que hace posible que mantengamos una
arquitectura sólida sin código auxiliar repartido en distintas partes.
Añadir extensión Behaviors
Con la llegada del SDK de Windows 8.1 recibimos también la incorporación del Behavior SDK. Disponible en una librería aparte del Core de .NET, podemos utilizarlo facilmente añadiendo la referencia a la misma.
NOTA: Con la llegada de Windows Phone 8.1 recibimos acceso a la misma extensión.
Si para nuestros objetivos, ninguno de los Behaviors que tenemos disponible nos cubre, podemos crear Behaviors nuevos totalmente personalizados.
A diferencia de la implementación que teníamos en WPF por ejemplo, no contamos con clases del tipo Behavior<T> de las que derivar, sino que contamos con interfaces, IBehavior. Disponible en el namespace Microsoft.Xaml.Interactivity.
public abstract class Behavior<T> : DependencyObject, IBehavior where T : DependencyObject{ public T AssociatedObject { get; set; } protected virtual void OnAttached() { } protected virtual void OnDetaching() { } public void Attach(DependencyObject associatedObject) { if (associatedObject == this.AssociatedObject || DesignMode.DesignModeEnabled) { return; } this.AssociatedObject = (T)associatedObject; OnAttached(); } public void Detach() { if (!DesignMode.DesignModeEnabled) { OnDetaching(); } } DependencyObject IBehavior.AssociatedObject { get { return this.AssociatedObject; } }}La clase superior implementa la interfaz IBehavior de modo que facilmente podemos sobreescribir la propiedad AssociatedObject. Creamos un nuevo Behavior para los elementos que deriven de UIElement:
public class SwipeBehavior : Behavior<UIElement>{}Implementamos la interfaz:
protected override void OnAttached(){ base.OnAttached(); this.AssociatedObject.ManipulationMode = this.AssociatedObject.ManipulationMode | ManipulationModes.TranslateX | ManipulationModes.TranslateY; this.AssociatedObject.ManipulationCompleted += OnManipulationCompleted;}protected override void OnDetaching(){ base.OnDetaching(); this.AssociatedObject.ManipulationCompleted -= OnManipulationCompleted;}private void OnManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e){}SwipeBehavior hereda de la clase Behavior<T>. En el evento sobreescrito OnAttached nos suscribimos al evento ManipulationCompleted gestionando los modos de trasladación en el eje X e Y (Swipes). En el método OnDetaching realizamos la dessuscripción del evento ManipulationCompleted.
public ICommand SwipeCommand{ get { return (ICommand)GetValue(SwipeCommandProperty); } set { SetValue(SwipeCommandProperty, value); }}public static readonly DependencyProperty SwipeCommandProperty = DependencyProperty.Register("SwipeCommand", typeof(ICommand), typeof(SwipeBehavior), new PropertyMetadata(null));public static ICommand GetSwipeCommand(DependencyObject d){ return (ICommand)d.GetValue(SwipeCommandProperty);}Creamos una DependencyProperty de tipo ICommand. De esta forma, permitimos bindear un comando a ejecutar pasándole como parámetro la dirección del gesto.
Gestión de gestos
Verificaremos valores recibidos de ManipulationCompletedRoutedEventArgs.
Concretamente haremos varias verificaciones tanto en el eje X como en
el Y para determinar la dirección del gesto. Creamos dos sencillas
constantes para simplificar los cálculos:
private const double Min = 0.5;private const double Max = 100;En el evento ManipulationCompleted:
bool right = e.Velocities.Linear.X.CompareTo(Min) >= 0 && e.Velocities.Linear.X.CompareTo(Max) <= 0;bool left = e.Velocities.Linear.X.CompareTo(-Max) >= 0 && e.Velocities.Linear.X.CompareTo(-Min) <= 0;bool up = e.Velocities.Linear.Y.CompareTo(-Max) >= 0 && e.Velocities.Linear.Y.CompareTo(-Min) <= 0;bool down = e.Velocities.Linear.Y.CompareTo(Min) >= 0 && e.Velocities.Linear.Y.CompareTo(Max) <= 0;var swipeCommand = GetSwipeCommand(this);if (swipeCommand != null){ if (right && !(up || down)) swipeCommand.Execute(SwipeDirection.Right); if (left && !(up || down)) swipeCommand.Execute(SwipeDirection.Left); if (up && !(right || left)) swipeCommand.Execute(SwipeDirection.Up); if (down && !(right || left)) swipeCommand.Execute(SwipeDirection.Down);}El argumento de tipo ManipulationCompletedRoutedEventArgs,
cuenta con toda la información relacionada con la manipulación
realizada (gesto). Entre el conjunto de propiedades disponibles contamos
con Velocities.Linear.X y Velocities.Linear.Y
que nos permiten determinar la dirección del gesto. Dependiendo de la
dirección del gesto, ejecutaremos el comando bindeado en la propiedad SwipeCommand pasándole como parámetro la dirección.
En nuestra interfaz, detectaremos el gesto de tipo Swipe y segun la
orientación del gesto, mostrando un texto de información indicándola.
En nuestra ViewModel, definiremos la propiedad que mostrará en pantalla la orientación del gesto:
private string _info;public string Info{ get { return _info; } set { _info = value; RaisePropertyChanged(); }}Al lanzar un gesto de tipo Swipe lanzaremos un comando:
private ICommand _swipeCommand;public ICommand SwipeCommand{ get { return _swipeCommand = _swipeCommand ?? new DelegateCommand<SwipeDirection>(SwipeCommandExecute); }}private void SwipeCommandExecute(SwipeDirection direction){ switch (direction) { case SwipeDirection.Up: Info = "Arriba"; break; case SwipeDirection.Down: Info = "Abajo"; break; case SwipeDirection.Left: Info = "Izquierda"; break; case SwipeDirection.Right: Info = "Derecha"; break; }}Recibimos como parámetro el tipo del Swipe de modo que podemos ejecutar en consecuencia.
En la interfaz de usuario, ante cualquier elemento visual derivado de UIElement:
<interactivity:Interaction.Behaviors> <behaviors:SwipeBehavior SwipeCommand="{Binding SwipeCommand}" /></interactivity:Interaction.Behaviors>Sencillo, ¿verdad?
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.