Agregar Usos para Pantalla Táctil a las Aplicaciones de Escritorio Ultrabook™ que funcionan con Windows* 8

La pantalla táctil se ha convertido en la principal forma de manejar artefactos de mano. En la vida cotidiana hay muchas circunstancias en las que resulta útil. Mientras conduces un auto, un sistema táctil de navegación por GPS te permite acceder rápidamente a la información necesaria.

Los sistemas operativos en ventanas tienen propiedades táctiles, aunque limitadas a un sólo dedo, desde hace años. A partir del Windows 7, Microsoft agregó distintas propiedades multitáctiles como el pellizcar-y-acercar. Windows 8 mejora y aumenta esos usos táctiles. En particular con las Aplicaciones de Window Store, que han incorporado más usos compatibles con los gestos más comunes en las pantallas táctiles, tales como arrastrar o hacer cross-sliding, por ejemplo. Sin embargo, la API de desarrollo de aplicaciones de escritorio para Windows tradicional tiene una capacidad limitada de gestos predeterminados. Esta ofrece mecanismos de entrada táctil que pueden ser utilizados para reconocer un gesto táctil específico. En este artículo, explicamos como implementar varios gestos táctiles en sus aplicaciones de escritorio Windows 8.

La manipulación del Windows Presentation Foundation (WPF) permite reconocer los gestos más frecuentes en dispositivos táctiles, por ejemplo barridos o pellizcar-y-acercar, etcétera. En este artículo hablamos sobre algunos de los gestos usados con más frecuencia.

Eventos de Manipulación

En un proceso de manipulación se suceden distintos eventos de manipulación que otorgan información útil. En esta sección, hablaremos sobre diferentes eventos de manipulación y comentaremos detalles acerca de ellos. Los eventos ManipulationStarting y ManipulationStarted se usan durante la inicialización. Luego, a estos dos eventos los siguen varios eventos ManipulationDelta, que consolidan la acción de uno, dos o más dedos como información de traslación, escala y rotación. Cuando todos los dedos se levantan del elemento que está siendo manipulado, ocurre un evento ManipulationInertiaStarting, seguido inmediatamente de un evento ManipulationCompleted. Un evento ManipulationCompleted ofrece una oportunidad para marcar el reciente patrón de manipulación.

Gesto de Barrido

El barrido es uno de los gestos táctiles usados con más frecuencia, especialmente para pasar al elemento siguiente o al anterior. Si te fijas en cualquier aplicación estilo álbum de fotos, notarás que un barrido de izquierda a derecha o de derecha a izquierda para ver la foto anterior o la siguiente, ofrece una mejor experiencia de uso. En este artículo, mostramos cómo implementar este gesto en una aplicación de escritorio para Ultrabooks con Windows 8. Por ejemplo, el usuario de la aplicación de fotos puede hacer un barrido para ver la imagen siguiente o anterior dentro de la colección de imágenes que se exhiben.

Implementación

Los gestos de barrido pueden ser reconocidos utilizando varios eventos ofrecidos al manipular WPF. ManipulationStarting se usa al inicializar o al resetear los valores. ManipulationDelta es de mucha importancia ya que ofrece muchos detalles útiles vinculados con el tacto, entre ellos movimientos táctiles horizontales y verticales y valores delta acumulados. Casi todos los elementos WPF permiten ser manipulados. Por defecto, la manipulación de eventos viene inhabilitada para todos los elementos. Para habilitar, es necesario marcar “True” en IsManipulationEnable del archivo XAML. Luego, hace falta que nos registremos en los eventos de manipulación que nos interesen.

Paso: 1

Habilita la manipulación del elemento marcando “True” en su atributo IsManipulationEnable.

<Image Name="centerImageView" IsManipulationEnable="True" />

Paso: 2

Regístrate en los eventos de manipulación que te interesen del elemento en el archivo XAML. Deja que Visual Studio* genere un operador de evento para cada evento.

 <Image Name=”centerImageView” IsManipulationEnable=”True” ManipulationStarting=”centerImageView_ManipulationStarting” ManipulationDelta=”centerImageView_ManipulationDelta” ManipulationCompleted=”centerImageView_ManipulationCompleted” ManipulationInertiaStarting=”centerImageView_ManipulationInertiaStarting” /> 

Paso: 3

Utiliza el evento ManipulationStarting para establecer los valores del ManipulationContainor y la propiedad Handled. El ManipulationContainer permite especificar que la posición debería ser relativa a algún otro elemento. Handled permite especificar cómo operará ese evento bajo el operador de evento.

    Public partial class MainWindow : Window
    {
        .....
        private void centerImageView_ManipulationStarting(object sender, System.Windows.Input.ManipulationStartingEventArgs e)
        {
            e.ManipulationContainer = this;
            e.Handled = true;
        }
    }

Paso: 4

El evento ManipulationDelta ocurre en múltiples ocasiones mientras el usuario arrastra un dedo sobre la pantalla durante la manipulación. La propiedad CumulativeManipulation contiene el total de cambios que ocurrieron durante la actual manipulación. Además ofrece otros detalles acerca del tipo de manipulación, por ejemplo si fue una traslación, hubo cambio de escala, rotación, etcétera. La propiedad Velocities ofrece detalles acerca de la velocidad y dirección actual de una manipulación.

    Public partial class MainWindow : Window
    {
        .....
        private void centerImageView_ManipulationDelta(object sender, System.Windows.Input.ManipulationDeltaEventArgs e)
        {
            //store values of horizontal & vertical cumulative translation
            cumulativeDeltaX = e.CumulativeManipulation.Translation.X;
            cumulativeDeltaY = e.CumulativeManipulation.Translation.Y;
            //store value of linear velocity into horizontal direction  
            linearVelocity = e.Velocities.LinearVelocity.X
        }
    }

Paso: 5

Usa el evento ManipulationInertiaStarting para determinar el valor de desaceleración deseado para un determinado comportamiento de manipulación, como puede ser ExpansionBehaviour (ComportamientoExpansivo) y RotationBehaviour (ComportamientoRotativo). Una vez que se activa el ManipulationIntertiaStarting, se activará el ManipulationDelta hasta que la velocidad llegue a cero.

Define la velocidad inicial del comportamiento de expansión y la desaceleración deseada aquí.

    Public partial class MainWindow : Window
    {
        .....
        private void centerImageView_ManipulationDelta(object sender, System.Windows.Input.ManipulationInertiaStartingEventArgs e)
        {
            e.ExpansionBehaviour = new InertialExpansionBehaviour()
            {
                InitialVelocity = e.InitialVelocities.ExpansionVelocity;
                DesiredDecelerartion = 10.0 * 96.0 / 1000000.0
            }
        }
    }

Paso: 6

Usa el evento ManipulationCompleted para determinar cuantitativamente cuánto cambió la posición con la manipulación. Usa el valor almacenado cumulativeDeltaX para determinar si el movimiento es de izquierda a derecha o de derecha a izquierda. Activa la función isSwipeGesture para determinar si la manipulación tuvo la forma de un barrido o no.

Necesitamos mostrar la siguiente imagen cada vez que la aplicación de foto reconoce un barrido de derecha a izquierda. Por lo tanto, entonces deberías establecer en el índice de la lista de imágenes la siguiente imagen. De la misma forma, cuando la aplicación de fotos reconoce un barrido de izquierda a derecha, debería establecer en el índice de la lista que veas la imagen anterior.

    Public partial class MainWindow : Window
    {
        .....
        private void centerImageView_ManipulationCompleted(object sender, System.Windows.Input.ManipulationCompletedEventArgs e)
        {
            bool isRightToLeftSwipe = false; //to determine swipe direction
            If(cumulativeDeltaX < 0)
            {
                //moving from right to left
                isRightToLeftSwipe = true;
            }
            //check if this is swipe gesture
            If(isSwipeGesture(deltaX, deltaY, linearVelocity)
            {
                If(isRightToLeftSwipe)
                {
                    //show previous image
                    this.imagesListBox.SelectedIndex = currentIndex -1;
                }
                Else
                {
                    //show next image
                    this.imagesListBox.SelectedIndex = currentIndex +1;
                }
            }
        }
        .....
    }    

Paso: 7

isSwipeGesture es un método para determinar las características de un gesto de barrido. Ten en cuenta deltaX, deltaY y la velocidad para determinar las características del gesto de barrido.

Aquí, AppConstants.DeltaX y AppConstants.DeltaY son definidos como valores constantes que, respectivamente, establecen el movimiento horizontal y vertical máximo permitido. AppConstants.LinearVelocityX es definido como un valor constante que establece la velocidad máxima permitida.

   public partial class MainWindow : Window
    {
        .....
        private bool isSwipeGesture(double deltaX, double deltaY, double linearVelocity)    
        {
            bool result = false;
            if(deltaY <= AppConstants.DeltaX && deltaX >= AppConstants.DeltaY && linearVelocity >= AppConstants.LinearVelocityX)
            result = true; 
        }
        return result;
    }

Gesto de Pellizcar y Acercar

Pellizcar/Acercar es otro gesto táctil importante y usado con frecuencia. Pellizcar y acercar otorga una mejor experiencia de uso al permitir que el usuario se acerque y se aleje de una imagen. El resto del artículo habla acerca de los aspectos vinculados al uso de este gesto en una aplicación de escritorio para Windows 8.

Implementación

La manipulación WPF ofrece distintos eventos que pueden ser usados para reconocer un gesto de pellizcar-y-acercar. ManipulationStarting se usa para la inicialización o mientras se resetean valores. ManipulationDelta es de suma importancia ya que ofrece varios detalles táctiles útiles, tales como DeltaManipulation.Scale. Matrix es una parte central de este gesto, ya que es justo lo que cambia la escala del elemento hacia arriba y abajo a través de cambios en sus valores x e y. De forma predeterminada, la manipulación de eventos viene inhabilitada para cualquier elemento. Para habilitarla, necesitamos llevar a “True” el IsMAnipulationEnable en el archivo XAML. Entonces hará falta que busquemos los eventos de manipulación necesarios.

Paso: 1

Activa la manipulación del elemento ubicando el atributo ISManipulationEnable en “True” en el archivo XAML.

<Image Name="centerImageView" IsManipulationEnable="True" />

Paso: 2

Busca eventos de manipulación interesados en ese elemento en el archivo XAML. Deja que el Visual Studio cree un encargado de evento para cada evento.

 <Image Name=”centerImageView” IsManipulationEnable=”True” ManipulationStarting=”centerImageView_ManipulationStarting” ManipulationDelta=”centerImageView_ManipulationDelta” ManipulationCompleted=”centerImageView_ManipulationCompleted” /> 

Paso: 3

Busca eventos de manipulación interesados en ese elemento en el archivo XAML. Deja que el Visual Studio cree un encargado de evento para cada evento.

    Public partial class MainWindow : Window
    {
        .....
        private void centerImageView_ManipulationStarting(object sender, System.Windows.Input.ManipulationStartingEventArgs e)
        {
            e.ManipulationContainer = this;
            e.Handled = true;
        }
    }

Paso: 4

Un evento ManipulationDelta ocurre múltiples veces cuando el usuario arrastra un dedo por encima de la pantalla durante la manipulación. La propiedad DeltaManipulation ofrece valores DeltaManipulation.Scale.X y DeltaManipulation.Scale.Y, que ayudan a establecer si el valor máximo de escala es horizontal o vertical y basados en eso podemos decidir si la acción es un pellizco o un zoom.

Puedes obtener la matriz actual del elemento usando propiedades RenderTransform y Matrix. Ponlo en escala usando el método de matriz ScaleAt en lugar de los valores recién modificados deltaX y deltaY. Aplica la nueva matriz de escala a ese elemento activando el RenderTransform. Aquí, el AppConstants.MinimumZoom y el AppConstants.MaximumZoom se describen como valores constantes que definen el zoom mínimo y máximo permitido.

El fragmento de código de abajo demuestra como hacer que funcione el zoom y el pellizco en la aplicación de foto.

    Public partial class MainWindow : Window
    {
        .....
        private void centerImageView_ManipulationDelta(object sender, System.Windows.Input.ManipulationDeltaEventArgs e)
        {
            /get current matrix of the element.
            Matrix borderMatrix = ((MatrixTransformation)centerImgBorder.RenderTransform).Matrix;
            //determine if action is zoom or pinch
            var maxScale = Math.Max(e.DeltaManipulation.Scale.X, e.DeltaManipulation.Scale.Y);
            //check if not crossing minimum and maximum zoom limit
            if((maxScale <  1 && borderMatrix.M11 *maxScale >  AppConstants.MinimumZoom) ||
            (maxScale >  1 && borderMatrix.M11 *maxScale <  AppConstants.MaximumZoom)
        {
            //scale to most recent change (delta) in X & Y 
            borderMatrix.ScaleAt(e.DeltaManipulation.Scale.X,
                    e.DeltaManipulation.Scale.Y,
                    centerImgBorder.ActualWidth/2
                    centerImgBorder.ActualHeight/2);
            //render new matrix
            centerImgBorder.RenderTransform = new MatrixTransform(borderMatrix));
        }

        }
    }   

Observaciones

Windows tolera entradas touch además de entradas de teclado o mouse básicos. Windows ofrece usos de la pantalla táctil incoporada para contoles estándar de Windows. Por ejemplo, ListBox tiene incorporado un desplazamiento por la pantalla activado de forma tácil.

Windows funciona con los siguientes gestos pre-establecidos:

  • Presión y Golpe
  • Golpe con Dos Dedos
  • Tocar y Sostener
  • Elegir y Arrastrar
  • Panear

Recursos Adicionales

El Tacto Humano: Construyendo Aplicaciones para Ultrabook™ Applications en la era Post-PC

Desarrollo de Aplicaciones de Escritorio para Ultrabook™ en Windows* 8: Aplicación de Foto con Tacto y Sensores

Noticias

LA INFORMACION CONTENIDA EN ESTE DOCUMENTO SE BRINDA EN RELACIÓN A PRODUCTOS INTEL. CON ESTE DOCUMENTO NO SE CEDE NINGUNA LICENCIA, EXPRESA O SUGERIDA, POR IMPEDIMENTO JURÍDICO U OTRO, DE LOS DERECHOS DE PROPIEDAD INTELECTUAL ASUMIDOS EN ESTE DOCUMENTO. A NO SER QUE ESTÉ ESPECIFICADO EN LOS TÉRMINOS Y CONDICIONES DE VENTA PROVISTOS POR INTEL PARA ESTE PRODUCTO, INTEL NO ACEPTARÁ NINGÚN TIPO DE RESPONSABILIDAD Y SE DESENTENDERÁ DE CUALQUIER GARANTÍA EXPRESA O IMPLICITA EN RELACION A LA VENTA Y/O USO DE PRODUCTOS INTEL, INCLUIDAS GARANTIAS O RESPONSABILIDES VINCULADAS A LA IDONEDIAD PARA UN PROPOSITO DETERMINADO, SU COMERCIALIZACION O VIOLACION DE CUALQUIER PATENTE, DERECHO DE AUTOR U OTRO DERECHO DE PROPIEDAD INTELECTUAL.

A NO SER QUE INTEL HAYA ACORDADO OTRA COSA DE FORMA ESCRITA, LOS PRODUCTOS INTEL NO FUERON DISEÑADOS NI PENSADOS PARA NINGUNA APLICACION EN LA CUAL UNA FALLA DEL PRODUCTO INTEL PUEDIESE CREAR UNA SITUACION EN LA QUE PUDIESE PRODUCIRSE UNA LESIÓN PERSONAL O LA MUERTE.

Intel puede hacerle cambios a las especificaciones y descripciones de producto en cualquier momento, sin previo aviso. Los diseñadores no deben confiar en la ausencia o en características de cualquier función o instrucciones marcadas como “reservadas” o “indefinidas”. Intel se reserva el derecho a definirlas en el futuro y no se hará responsable de ningún conflicto o incompatibilidad surgida de cambios futuros a las mismas. Está información está sujeta a cambios sin previo aviso. No finalice un diseño con esta información.

Los productos descritos en este documento pueden contener defectos o errores de diseño conocidos como erratas, que pueden provocar que el producto se aparte de las especificaciones publicadas. Una lista de erratas actualizadas está disponible a pedido. Contacte a su oficina de ventas local o a su distribuidor para obtener las especificaciones más recientes antes de hacer el pedido de su producto.

Contact your local Intel sales office or your distributor to obtain the latest specifications and before placing your product order.

La copia de los documentos que llevan un número de orden y a los que hace referencia este documento u otros escritos de Intel pueden obtenerse llamando al 1-800-548-4725 o yendo a: http://www.intel.com/design/literature.htm

El software y las cargas de trabajo que se usaron en estas pruebas de rendimiento han sido optimizadas para rendir únicamente en microprocesadores Intel. Las pruebas de rendimiento, por ejemplo SYSmark y MobileMark, se miden usando sistemas de computación, componentes, software, operaciones y funciones específicas. Cualquier cambio a alguno de esos factores puede hacer que los resultados varíen. Debería consultar más información y pruebas de rendimiento que le permitan evaluar completament sus posibles compras, incluyendo el rendimiento de un producto cuando se lo combina con otros productos.

Cualquier código fuente reimpreso en este documento está bajo una licencia de software y sólo puede ser usado o copiado de acuerdo a los términos de esa licencia.

Intel, Ultrabook y el logo de Intel son marcas registradas de Intel Corporation en los Estados Unidos y/u otros países.

Copyright © 2012 Intel Corporation. Todos los derechos reservados.

*Otros nombres y marcas pueden ser reclamados como propiedad de otros.

Para obtener información más completa sobre las optimizaciones del compilador, consulte nuestro Aviso de optimización.