31 días de Windows Phone | Día #30: Gestos

La forma nativa de leer gestos del usuario en Silverlight puede ser complicada. Este artículo explica cómo utilizar un ensamblaje de XNA para ayudarnos a leer los gestos más comunes sin tener que hace múltiples cálculos y medidas .

Este artículo fue publicado originalmente en Maromas Digitales y es una traducción aproximada del artículo 31 Days of Windows Phone | Day #30: Gestures por Jeff Blankenburg publicado el 30 de octubre del 2010

Este artículo es el Día #30 de una serie llamada los 31 días de Windows Phone. Cuesta creer el camino recorrido, pero mañana es el último día de la serie.

Ayer escribí sobre animaciones y cómo reproducir la animación de puerta abriendo usada por el sistema operativo. Hoy vamos a enfocarnos en gestos y cómo usar un ensamblaje de XNA para reconocer gestos del usuario.

¿Qué es XNA?

Esta serie se ha enfocado puramente en Silverlight, pero hay una tecnología alterna llamada XNA con la que se pueden crear aplicaciones para Windows Phone7. Es común entre desarrolladores de juegos y ha sido usada por años como la plataforma para Zune y Xbox 360. La siguiente lista de guías puede servirles para aprender más sobre XNA: http://create.msdn.com/en-us/education/roadmap

Agregando XNA a nuestra aplicación

Lo primero que tenemos que hacer es agregar una referencia al ensamblaje Microsoft.Xna.Framework.Input.Touch a nuestro proyecto.

Usando el TouchPanel

Parte del mundo de XNA gira alrededor del concepto de un TouchPanel (o panel táctil), abarcando la superficie de la pantalla. Si usamos el TouchPanel tendremos acceso directo a la biblioteca de gestos y podemos activar esos en los que estemos interesados.

Primero añadimos una declaración using al inicio del código subyacente:

using Microsoft.Xna.Framework.Input.Touch;

Entonces podemos indicar los gestos a los que queremos reaccionar:

TouchPanel.EnabledGestures = GestureType.Hold |
                             GestureType.Tap |
                             GestureType.DoubleTap |
                             GestureType.Flick |
                             GestureType.Pinch;

Generalmente yo pongo ese código en el método de inicio de la aplicación, pero puede usarse en cualquier parte. En el siguiente paso es donde nos desviamos de XNA. Las aplicaciones XNA tienen un ciclo de juegos estándar que es ejecutado 30 veces por segundo. Dos métodos, Draw() y Update(), se llaman el uno al otro pasándose la bola entre sí, constantemente actualizando el estado de la aplicación y el contenido de la pantalla.

Ese mecanismo no existe en Silverlight puesto que es basado en eventos. Nada ocurre hasta que se dispare un evento, por lo que no tenemos una forma eficiente de chequear gestos. La forma de vadear el problema es usando eventos de manipulación.

Usando los eventos de manipulación con gestos

Los eventos de manipulación serían un excelente punto de partida si queremos hacer un montón de cálculos o crear nuestros propios gestos. Sin embargo, nada de eso es necesario para los gestos estándar como pinzado, hojeo, toque, toque doble y demás.

En lo último que quedamos, habíamos incluido el TouchPanel y activado los gestos deseados. Es entonces hora de empezar a reconocerlos. Entre los eventos de manipulación hay uno ManipulationCompleted que puede ser asociado a cualquier control. En este caso lo vamos a adjuntar al LayoutRoot para poder capturar los gestos en cualquier parte de la página.

LayoutRoot.ManipulationCompleted +=
             LayoutRoot_ManipulationCompleted;

En el controlador del evento revisamos el TouchPanel para ver si en efecto ha ocurrido un gesto y, si tal es el caso, reaccionamos al tipo de gesto.

void LayoutRoot_ManipulationCompleted(object sender,
                                ManipulationCompletedEventArgs e)
{
    while (TouchPanel.IsGestureAvailable)
    {
        GestureSample gesture = TouchPanel.ReadGesture();

        switch (gesture.GestureType)
        {
            case GestureType.Tap:
                Gesto.Text = "Toque";
                break;
            case GestureType.DoubleTap:
                Gesto.Text = "Toque doble";
                break;
            case GestureType.Hold:
                Gesto.Text = "Sostener";
                break;
            case GestureType.Flick:
                Gesto.Text = "Hojeo";
                break;
            case GestureType.Pinch:
                Gesto.Text = "Pinzado";
                break;
        }
    }
}

Este pequeño trozo de código es todo lo que necesitamos para incorporar reconocimiento de gestos en nuestras aplicaciones. Por supuesto, en la práctica vamos a hacer algo más que simplemente escribir en un TextBlock , pero eso se los dejo a ustedes. Para ahora, ya saben cómo capturar gestos de forma simple y fácil.

Descargando el código

Este ejemplo usa el código mostrado arriba para escribir el nombre de los gestos reconocidos en un campo de texto en la pantalla. Los invito a sentirse libres de usarlo como base para sus propias aplicaciones. Por cierto, no olviden que el Juego de herramientas de Silverlight para Windows Phone provee un control similar llamado GestureListener que fue cubierto en el día #21.

Jeff Blankenburg