Entrada Táctil

Este artículo es una traducción del artículo original encontrado en: http://create.msdn.com/en-US/education/quickstarts/Touch_Input.

Los dispositivos Windows Phone 7 poseen pantallas multi táctiles que permiten a los usuarios utilizar simultáneamente varios dedos para producir diferentes gestos de entrada, tales como tapping (tocar), flicking (deslizar y levantar el dedo al final) y pinching (pellizcar).  Silverlight para Windows Phone posee diferentes mecanismos para el manejo de la entrada táctil. Este artículo cubre los conceptos básicos del uso de la entrada táctil de Silverlight para aplicaciones de Windows Phone.    

Este artículo incluye las siguientes secciones:

  • Introducción a la entrada táctil
  • Gestos
  • Usando eventos del Mouse
  • Usando eventos de manipulación
  • Toolkit de Silverlight para Windows Phone
  • Diseño de interfaz de usuario y entrada táctil

Introducción a la entrada táctil

Los dispositivos de Windows Phone usan el tacto para la mayoría de la entrada del usuario. Windows Phone es compatible con pantallas multi-touch que permite a los usuarios usar gestos naturales e interactuar con el dispositivo. Añadiendo soporte para entrada táctil gestos a tus aplicaciones puedes mejorar enormemente la experiencia del usuario. Hay diferentes formas en el que puedes manejar la entrada táctil en aplicaciones de Silverlight para Windows Phone. 

Los eventos en Silverlight para el Mouse se utilizan para detectar simples gestos de un dedo, como el toque y el doble toque. Los manejadores de eventos del mouse pueden ser rápidamente añadidos a su aplicación y son una manera fácil de obtener soporte para entrada táctil.

Los eventos de manipulación, como ManipulationStarted y ManipulationDelta, son utilizados para manejar gestos complejos, como gestos multi-táctil y gestos que utilizan la inercia y la velocidad de los datos.

La clase TouchPoint es otra forma de manejar la entrada táctil en Silverlight para Windows Phone.  TouchPoint  es un sistema de más bajo nivel que no será tratado en este artículo.

Una manera adicional para manejar el tacto y los gestos es a través de las clases GestureService y GestureListener disponibles en el Tookit de Silverlight para Windows Phone. El Toolkit es un proyecto de código abierto y no forma parte del núcleo de Silverlight para Windows Phone, pero algunas clases que primero aparecieron en el Toolkit fueron incorporadas eventualmente  en versiones posteriores de Silverlight.

Gestos

Los gestos son una forma de alto nivel de interpretar los datos de entrada táctil como tapping, flicking, o pinching. Algunos gestos comunes utilizados en Windows Phone son los siguientes: 

Gesto

Descripción

Toque (Tap)

Un dedo toca la pantalla y es soltado.

Doble toque (Double Tap)

Un dedo toca la pantalla dos veces.

Mantenga (Hold)

Un dedo toca la pantalla y se mantiene en su lugar.

Arrastre (Drag)

Un dedo toca la pantalla y se mueve en cualquier dirección.

Película (Flick)

Un dedo se arrastra por la pantalla y se levanta sin haber parado.

Sujetador (Pinch)

Dos dedos de presionan sobre la pantalla y se mueven alrededor.

Los eventos para el Mouse de Silverlight en Windows Phone, como MouseLeftButtonUp y MouseMove se pueden utilizar para soportar gestos simples con un solo dedo tales como el tapping.

Para los gestos Multi-Touch como pinching y gestos que utilizan datos de inercia y velocidad como flicking, se utilizan los eventos de manipulación. La información proporcionada por los eventos de manipulación no está en la forma en el que el gesto fue realizado, sino que son datos como la posición, delta de translación y velocidad.  Estos datos táctiles pueden ser utilizados para determinar el tipo de gesto que se llevó a cabo.  Es responsabilidad del desarrollador de Silverlight convertir esta información en el gesto equivalente.  Dicho esto, el Toolkit de Silverlight para Windows Phone brinda soporte para gestos a través de las clases GestureService y GestureListener.

Utilizando eventos del Mouse

La forma más sencilla para permitir la entrada táctil en su aplicación de Silverlight para Windows Phone es utilizando los eventos para el mouse. Estos se limitan a los gestos de un solo dedo como toque y doble toque, y no soportan los gestos basados ​​en velocidad. Cuando un dedo toca sobre  la pantalla se convierten en su equivalente evento del mouse en Silverlight, tal como el evento MouseLeftButtonDown utilizado cuando pones tu dedo sobre la pantalla, el MouseLeftButtonUp al levantar tu dedo, y MouseMove cuando arrastras tu dedo a través de la pantalla. Otros eventos utilizados por Silverlight para Windows Phone son MouseLeave y MouseEnter. Los argumentos para los eventos del mouse son MouseButtonEventArgs.

El evento Click en el botón, es otra manera fácil de proporcionar soporte para gestos en los botones.

El siguiente ejemplo muestra cómo utilizar los eventos MouseLeftButtonDown, MouseLeftButtonUp y MouseLeave para manejar un gesto de toque sobre un objeto rectángulo.  

En primer lugar, un rectángulo llamado TestRectangle se crea en el XAML y los manejadores de eventos son agregados para MouseLeftButtonDown, MouseLeftButtonUp y MouseLeave.  

XAML

 

<Rectangle Name="TestRectangle"

Height="100"

Width="200"

Fill="Blue"

MouseLeftButtonDown="Tap_LeftButtonDown"

MouseLeftButtonUp="Tap_LeftButtonUp"

MouseLeave="Tap_MouseLeave" />

 

A continuación, los manejadores de eventos  serán creados. El manejador del evento MouseLeftButtonDown aumenta el Height y el  Width del Rectangle. El manejador del evento MouseLeftButtonUp establece el Height y el  Width de vuelta a sus valores iniciales. Por último, el manejador del evento MouseLeave también establece Height y el  Width a sus valores iniciales.

 

C#

private void Tap_LeftButtonDown(object sender, MouseButtonEventArgs e)

  {

Rectangle rect = sender as Rectangle;

// Cambia el tamaño del rectángulo

if (null != rect)

{

rect.Width = 250;

rect.Height = 150;

}

}

 

private void Tap_LeftButtonUp(object sender, MouseButtonEventArgs e)

{

Rectangle rect = sender as Rectangle;

// Restablece las dimensiones del rectángulo.

if (null != rect)

{

rect.Width = 200;

rect.Height = 100;

}

}

 

private void Tap_MouseLeave(object sender, MouseEventArgs e)

{

Rectangle rect = sender as Rectangle;

/ / El dedo se mueve fuera del rectángulo antes que se produzca el evento.Restablecer las dimensiones del rectángulo.

if (null != rect)

{

rect.Width = 200;

rect.Height = 100;

}

}

 

El siguiente ejemplo muestra los eventos del mouse al realizar toquecitos. Para visualizar este ejemplo, haz clic en el rectángulo.

clip_image002

El siguiente ejemplo muestra el uso del evento Click de un Button para manejar los gestos de toque.

Primero, es creado un Button en el XAML y es agregado un manejador para el evento Click.

XAML

<Button Name="TestButton"

Content="Tap"

Height="100" Width="200"

Click="TestButton_Click" />

 

En el manejador del evento Click, el contenido del botón alterna entre "Tap" y "Tap Again!”.  El texto cambia cada vez que se toca el botón.

 

 

 

 

C#

 

private void TestButton_Click(object sender, RoutedEventArgs e)

{

Button button = sender as Button;

if (null != button)

{

//Alternar Button.Content entre "Tap" y "Tap Again!"

if (button.Content as string == "Tap")

{

   button.Content = "Tap Again!";

}

else

{

   button.Content = "Tap";

}

}

}

 

La siguiente imagen muestra el ejemplo.   Para visualizar su comportamiento haz clic en el botón.

clip_image004

 

Utilizando eventos de manipulación

Si necesitas soportar gestos con múltiples dedos en tu aplicación de Silverlight, o gestos que utilizan datos de velocidad, entonces necesitarás usar los eventos de manipulación. Puedes utilizar los eventos de manipulación para detectar gestos como flick, drag, pinch y hold.  En la siguiente tabla se muestran las clases de los eventos de manipulación en Silverlight para Windows Phone. 

Clase

Descripción

ManipulationStarted

Se produce cuando un dispositivo de entrada comienza una manipulación en un UIElement.

ManipulationDelta

Se produce cuando el dispositivo de entrada cambia de posición durante una manipulación.  

ManipulationCompleted

Se produce cuando la manipulación y la inercia en el UIElement se completan.

ManipulationStartedEventArgs

Proporciona datos para el evento ManipulationStarted.

ManipulationDeltaEventArgs

Proporciona datos para el evento ManipulationDelta.

ManipulationVelocities

Describe la velocidad a la que se producen las manipulaciones.

ManipulationCompletedEventArgs

Proporciona datos para el evento ManipulationCompleted.

Un evento de gesto en Silverlight para Windows Phone consiste en una serie de eventos de manipulación.  Cada gesto se inicia con un caso ManipulationStarted, por ejemplo cuando un usuario toca la pantalla.  A continuación, uno o más eventos ManipulationDelta son disparados.  Por ejemplo, si tocas la pantalla y luego arrastras el dedo por ella, una serie de eventos ManipulationDelta se disparan.  Por último, un evento ManipulationCompleted se produce cuando el gesto es finalizado.

Si estás utilizando el emulador de Windows Phone para probar el código de eventos y la manipulación no tiene un monitor de pantalla táctil, estarás limitado en todo lo que puedas probar.  El emulador no soporta multi-touch con el Mouse.  Sin embargo, puedes probar las translaciones tal y como lo muestra el siguiente ejemplo.

El siguiente ejemplo muestra cómo utilizar los eventos ManipulationDelta para manejar un gesto de arrastre. El ejemplo crea un rectángulo que se puede arrastrar por la pantalla.

En primer lugar, un rectángulo llamado TestRectangle es creado en el XAML con un Height y Width de 200.

XAML

<Rectangle Name="TestRectangle"

Width="200"

Height="200"

Fill="Blue" />

 

 

A continuación, un TranslateTransform global llamado dragTranslation es creado para trasladar el rectángulo.  Un manejador de evento es agregado al rectángulo para manejar el evento ManipulationDelta, y dragTranslation es añadido al RenderTransform del rectángulo.  Por último, en el manejador del evento ManipulationDelta, la posición del rectángulo se actualiza mediante el TranslateTransform en la propiedad DeltaManipulation.

 

C#

// Transformación global usada para cambiar la posición del rectángulo.

private TranslateTransform dragTranslation;

// Constructor

public MainPage()

{

InitializeComponent();

//Agregar un  controlador para el evento ManipulationDelta TestRectangle.ManipulationDelta +=

    new EventHandler<ManipulationDeltaEventArgs>(Drag_ManipulationDelta);

dragTranslation = new TranslateTransform();

TestRectangle.RenderTransform = this.dragTranslation;

}

void Drag_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)

{

// Mueve el rectángulo.

dragTranslation.X += e.DeltaManipulation.Translation.X;

dragTranslation.Y += e.DeltaManipulation.Translation.Y;

}

 

La siguiente imagen muestra el ejemplo al ejecutarse en el emulador de Windows Phone.

 

clip_image006

Toolkit de Silverlight para Windows Phone

El Toolkit de Silverlight para Windows Phone es un proyecto de código abierto en donde el equipo de Microsoft Silverlight comparte nuevos componentes y funcionalidades que no se encuentran presentes en el núcleo de Silverlight para Windows Phone.  El toolkit incluye un framework de gestos enriquecido que utiliza las clases GestureService y GestureListener para detectar gestos específicos.  Estas clases pueden simplificar enormemente el uso de gestos en tu aplicación de Silverlight.  

Para utilizar la API del Toolkit de Silverlight para Windows Phone necesitarás descargar e instalar el toolkit.  La página de versiones del Toolkit de Silverlight contiene las instrucciones para descargar la versión actual.

 

Diseño de interfaz de usuario y entrada táctil

El cómo diseñes tu interfaz de usuario puede influir en qué tan fácil tu aplicación puede ser utilizada con entrada táctil.  La Guía de Diseño de Experiencia de Usuario para Windows Phone tiene diferentes mejores prácticas para utilizar la entrada táctil en tus aplicaciones.  Vale la pena su lectura, pero aquí hay algunas cosas que destacar con respecto a la entrada táctil y el diseño de la interfaz de usuario: 

1.       Todos los comandos simples en tu aplicación deben llevarse a cabo con un solo dedo.

2.       Los controles táctiles deben responder de inmediato.  Incluso un ligero retraso entre el momento en que el usuario toca la pantalla y cuando el control responde, puede ser notable y afectar a la experiencia del usuario.

3.       Proporcionar información visual o auditiva.

4.       Si una operación tarda mucho tiempo, considera incluir retroalimentación incremental.

5.       Los objetivos táctiles no deben ser inferiores a 9 mm o 34 píxeles.

6.       2 mm u 8 píxeles deberán separar los controles táctiles.

7.       En casos raros los controles pueden ser más pequeños, pero nunca deberás crear un control más pequeño de 7 mm o 26 píxeles cuadrados.

8.       Para los controles táctiles de uso frecuente, considera hacer los controles más grandes de 9 mm.

9.       El objetivo de contacto puede ser mayor que el elemento de contacto, pero nunca menor.

10.   El elemento de contacto no deberá ser un 60% más pequeño que el objetivo a tocar.

11.    Los controles apaisados en interfaces de usuario verticales son más fáciles de tocar.