Inicio rápido: Entrada táctil (aplicaciones de Windows en tiempo de ejecución con C#/VB/C++ y XAML)

Applies to Windows and Windows Phone

A menudo, los dispositivos tienen pantallas multitáctiles que permiten a los usuarios usar varios dedos de manera simultánea para producir diferentes interacciones de entrada, como pulsar, arrastrar o reducir. Windows en tiempo de ejecución tiene una serie de mecanismos diferentes para administrar la entrada táctil que te permiten crear una experiencia envolvente que los usuarios de tus aplicaciones pueden explorar con confianza. Este artículo de inicio rápido trata los aspectos básicos del uso de la entrada táctil en una aplicación de Windows en tiempo de ejecución con C++, C# o Visual Basic. Para ver más ejemplos de código, consulta la muestra de entrada.

Si es la primera vez que desarrollas una aplicación de Windows en tiempo de ejecución con C++, C# o Visual Basic:  Paséate por los siguientes temas para familiarizarte con las tecnologías tratadas aquí.

Crear la primera aplicación de la Tienda Windows con C# o Visual Basic

Crear la primera aplicación de la Tienda Windows con C++

Guía básica para crear aplicaciones de Windows en tiempo de ejecución con C# o Visual Basic

Guía básica para crear aplicaciones de Windows en tiempo de ejecución con C++

Obtén información sobre los eventos en Introducción a eventos y eventos enrutados.

Características de la aplicación, de principio a fin:  Adéntrate en esta funcionalidad como parte de nuestra serie Características de la aplicación, de principio a fin

Interacción del usuario, de principio a fin (XAML)

Personalización de la interacción del usuario, de principio a fin (XAML)

Directrices sobre la experiencia del usuario:  

Las bibliotecas de control de la plataforma (HTML y XAML) proporcionan una experiencia de interacción del usuario completa, incluidas interacciones estándar, efectos físicos animados y comentarios visuales. Si no necesitas compatibilidad para interacción personalizada, usa estos controles integrados.

Si los controles de la plataforma no son suficientes, estas directrices para la interacción del usuario te pueden ayudar a proporcionar una experiencia de interacción atractiva y envolvente que sea coherente en todos los modos de entrada. Estas instrucciones se centran principalmente en la entrada táctil, pero también son válidas para entradas de panel táctil, mouse, teclado y lápiz.

Ejemplos:  Echa un vistazo a esta funcionalidad en acción con nuestros ejemplos de aplicaciones de la Tienda Windows.

Entrada: muestra de eventos de entrada de usuario de XAML

Entrada: muestra de funcionalidades del dispositivo

Entrada: muestra de manipulaciones y gestos (C++)

Entrada: muestra de prueba de acceso táctil

Muestra de desplazamiento, movimiento panorámico y zoom XAML

Requisitos previos

Damos por hecho que sabes crear una aplicación básica de Windows en tiempo de ejecución con C++, C# o Visual Basic.

Para completar este tutorial, necesitas:

Directrices sobre la experiencia del usuario (procedimientos recomendados)

Las bibliotecas de control de la plataforma (HTML y XAML) proporcionan una experiencia de interacción del usuario completa, incluidas interacciones estándar, efectos físicos animados y comentarios visuales. Si no necesitas compatibilidad para interacción personalizada, usa estos controles integrados.

Si los controles de la plataforma no son suficientes, estas directrices para la interacción del usuario te pueden ayudar a proporcionar una experiencia de interacción atractiva y envolvente que sea coherente en todos los modos de entrada. Estas instrucciones se centran principalmente en la entrada táctil, pero también son válidas para entradas de panel táctil, mouse, teclado y lápiz.

Introducción a la entrada táctil

Muchos dispositivos usan la función táctil para la mayor parte de las entradas del usuario. Las pantallas multitáctiles permiten a los usuarios interactuar con el dispositivo de manera natural. Agregar compatibilidad con la entrada táctil y la interacción a tus aplicaciones puede mejorar de manera notable la experiencia del usuario. Sin embargo, debes diseñar la compatibilidad con la entrada táctil con sumo cuidado para garantizar que los usuarios puedan explorar la aplicación con confianza. Además, debes asegurarte de que la aplicación incluya la entrada tradicional de mouse y teclado, aunque esté optimizada para entrada táctil.

Existen distintos modos de administrar la entrada táctil en las aplicaciones de Windows en tiempo de ejecución con C++, C# o Visual Basic. La biblioteca de controles integrados ofrece de manera predeterminada compatibilidad táctil, con el mouse y el teclado mediante interacciones estándar, efectos físicos animados y comentarios visuales.

Si no necesitas compatibilidad táctil personalizada, puedes usar lo que te ofrece el marco y seguir algunas directrices sencillas para optimización táctil que se describen más adelante en este artículo de inicio rápido.

Puedes implementar tu propia compatibilidad con la entrada táctil y la interacción, pero ten presente que los usuarios esperan una experiencia intuitiva en la que interactúen en forma directa con los elementos de la aplicación. Para la compatibilidad táctil personalizada, debes tomar como modelo la compatibilidad integrada con el fin de conservar la simplicidad y la facilidad de detección. Además, debes ofrecer información visual inmediata en todas las interacciones con el fin de evitar la incertidumbre del usuario y fomentar la exploración.

Para ofrecer compatibilidad táctil personalizada, puedes administrar los eventos UIElement que se agrupan en tres niveles distintos de abstracción. Eventos generales, como Tapped, permiten responder a interacciones sencillas. Los eventos de puntero ofrecen detalles específicos, como el movimiento del puntero y la distinción entre los gestos de presionar y soltar. Los eventos de manipulación ofrecen detalles de un nivel incluso más bajo, como la velocidad y la inercia del gesto y los datos multitáctiles. Estos eventos admiten automáticamente tanto la entrada táctil como la del mouse, pero también ofrecen información que permite distinguir el dispositivo de entrada real, si es necesario.

Gestos

Los gestos son una manera general de interpretar datos de entrada táctil como un conjunto de movimientos comunes, como pulsar, arrastrar y reducir. Algunos gestos comunes que se usan en Windows 8 son:

InteracciónDescripción
PulsarUn dedo toca la pantalla y se levanta.
Pulsar y sostenerUn dedo toca la pantalla y se queda en el lugar.
DeslizarUno o más dedos tocan la pantalla y se mueven en la misma dirección.
Deslizar rápidamenteUno o más dedos tocan la pantalla y se mueven una corta distancia en la misma dirección.
ReducirDos o más dedos tocan la pantalla y se acercan o alejan entre sí.
GirarDos o más dedos tocan la pantalla y se mueven describiendo un arco en el sentido de las agujas del reloj o en el sentido contrario a las agujas del reloj.
Ampliar Dos o más dedos tocan la pantalla y se alejan entre sí.

 

Puedes responder a gestos táctiles y de mouse sencillos si administras eventos generales como Tapped, DoubleTapped, RightTapped y Holding. También puedes deshabilitar esos gestos para elementos particulares al establecer IsTapEnabled, IsDoubleTapEnabled, IsRightTapEnabled e IsHoldingEnabled como false.

Los eventos de puntero, como PointerMoved, pueden usarse para proporcionar compatibilidad con interacciones simples con un dedo, como deslizar.

Para las interacciones multitáctiles como reducir y las interacciones que usan datos de velocidad e inercia como arrastrar, debes usar los eventos de manipulación. La información que proporcionan los eventos de manipulación no está en la forma de la interacción que se ejecutó sino que son datos sobre el contacto táctil como posición, diferencia de traslación y velocidad. Puedes usar estos datos táctiles para determinar el tipo de interacción que se ejecutó. Sin embargo, es tu responsabilidad convertir esta información en la interacción equivalente.

Uso de eventos de puntero

Los eventos de puntero admiten de manera automática la entrada táctil y del mouse, y reemplazan a los eventos de mouse más tradicionales.

Los eventos de puntero táctiles se limitan a interacciones con un solo dedo, como pulsar y deslizar, y no admiten interacciones basadas en la velocidad. Los toques con un solo dedo en la pantalla se convierten a un evento de puntero equivalente de Windows en tiempo de ejecución como PointerPressed cuando colocas el dedo en la pantalla, PointerReleased cuando lo levantas y PointerMoved cuando arrastras el dedo por la pantalla. Otros eventos de puntero que usan las aplicaciones de Windows en tiempo de ejecución con C++, C# o Visual Basic son PointerExited y PointerEntered. Los argumentos de evento para los eventos de puntero son PointerRoutedEventArgs.

El ejemplo siguiente muestra cómo usar los eventos PointerPressed, PointerReleased y PointerExited para controlar una interacción de pulsar en un objeto Rectangle.

Primero, se crea un Rectangle denominado TestRectangle en XAML y se agregan controladores de eventos para los eventos PointerPressed, PointerReleased y PointerExited.



<Rectangle Name="TestRectangle"
  Height="100" Width="200" Fill="Blue"
  PointerPressed="TestRectangle_PointerPressed"
  PointerReleased="TestRectangle_PointerReleased"
  PointerExited="TestRectangle_PointerExited" />

A continuación, se crean los controladores de eventos para los eventos de puntero. El controlador de eventos PointerPressed aumenta el valor de Height y Width del Rectangle. El controlador de eventos PointerReleased vuelve a establecer los valores iniciales de Height y Width. Por último, el controlador de eventos PointerExited también vuelve a establecer los valores iniciales de Height y Width.



private void TestRectangle_PointerPressed(object sender, 
    PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Change the size of the Rectangle
    if (null != rect)
    {
        rect.Width = 250;
        rect.Height = 150;
    }
}

private void TestRectangle_PointerReleased(object sender, 
    PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Reset the dimensions on the Rectangle
    if (null != rect)
    {
        rect.Width = 200;
        rect.Height = 100;
    }
}

private void TestRectangle_PointerExited(object sender, 
    PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Finger moved out of Rectangle before the pointer exited event
    // Reset the dimensions on the Rectangle
    if (null != rect)
    {
        rect.Width = 200;
        rect.Height = 100;
    }
}

Uso de eventos de manipulación

Si necesitas incluir en tu aplicación compatibilidad para interacciones con varios dedos o interacciones que usan datos de velocidad, tienes que usar los eventos de manipulación. Puedes usar los eventos de manipulación para detectar interacciones como arrastrar, reducir y pulsar y sostener. Esta es una lista de los eventos de manipulación y los tipos relacionados para las aplicaciones de Windows en tiempo de ejecución con C++, C# o Visual Basic.

Evento o claseDescripción
ManipulationStarting event Ocurre cuando el procesador de manipulación se crea por primera vez.
ManipulationStarted event Ocurre cuando un dispositivo de entrada comienza una manipulación en el UIElement.
ManipulationDelta event Ocurre cuando el dispositivo de entrada cambia su posición durante la manipulación.
ManipulationInertiaStarting event Ocurre cuando el dispositivo de entrada pierde contacto con el objeto UIElement durante una manipulación y el inicio de la inercia.
ManipulationCompleted event Ocurre cuando finaliza la manipulación y la inercia sobre el UIElement.
ManipulationStartingRoutedEventArgs Proporciona datos para el evento ManipulationStarting.
ManipulationStartedRoutedEventArgs Proporciona datos para el evento ManipulationStarted.
ManipulationDeltaRoutedEventArgs Proporciona datos para el evento ManipulationDelta.
ManipulationInertiaStartingRoutedEventArgs Proporciona datos para el evento ManipulationInertiaStarting.
ManipulationVelocities Describe la velocidad a la que tienen lugar las manipulaciones.
ManipulationCompletedRoutedEventArgs Proporciona datos para el evento ManipulationCompleted.

 

Un gesto consiste en una serie de eventos de manipulación. Cada gesto se inicia con un evento ManipulationStarted, por ejemplo, cuando un usuario toca la pantalla. A continuación, se desencadenan uno o más eventos ManipulationDelta. Por ejemplo, si tocas la pantalla y después arrastras el dedo por la pantalla, se desencadena una serie de eventos ManipulationDelta. Por último, cuando termina la interacción, tiene lugar un evento ManipulationCompleted.

Nota  Si no tienes monitor con pantalla táctil, puedes probar tu código para el evento de manipulación en el simulador usando un mouse y una interfaz de rueda de mouse.

El ejemplo siguiente muestra cómo usar los eventos ManipulationDelta para controlar una interacción de arrastrar. La muestra crea un Rectangle que puede arrastrarse por la pantalla.

Primero, se crea un Rectangle denominado TestRectangle en XAML, con un valor de Height y Width de 200.



<Rectangle Name="TestRectangle"
  Width="200" Height="200" Fill="Blue" 
  ManipulationMode="All"/>

A continuación, se crea una TranslateTransform global denominada dragTranslation para trasladar el Rectangle. Se agrega un controlador de eventos al Rectangle para administrar el evento ManipulationDelta y dragTranslation se agrega a la RenderTransform del Rectangle. Por último, en el controlador de eventos ManipulationDelta, se actualiza la posición del Rectangle usando la TranslateTransform en la propiedad Delta.



// Global Transform used to change the position of the Rectangle.
private TranslateTransform dragTranslation;

// Constructor
public MainPage()
{
    InitializeComponent();

    // Add handler for the ManipulationDelta event
    TestRectangle.ManipulationDelta += Drag_ManipulationDelta;
    dragTranslation = new TranslateTransform();
    TestRectangle.RenderTransform = this.dragTranslation;
}

void Drag_ManipulationDelta(object sender, 
    ManipulationDeltaRoutedEventArgs e)
{
    // Move the rectangle.
    dragTranslation.X += e.Delta.Translation.X;
    dragTranslation.Y += e.Delta.Translation.Y;
}

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

Si implementas tu propia compatibilidad con la interacción, ten presente que los usuarios esperan una experiencia intuitiva en la que interactúen en forma directa con los elementos de la interfaz de usuario de tu aplicación. Te recomendamos que modeles tus interacciones personalizadas sobre la biblioteca de controles de la plataforma (HTML y XAML) para que todo sea coherente y pueda detectarse. Los controles de estas bibliotecas proporcionan una experiencia de interacción de usuario completa, incluidas interacciones estándar, efectos físicos animados, comentarios visuales y accesibilidad. Crea interacciones personalizadas solamente si existe un requisito claro y bien definido y no hay ninguna interacción básica que sea compatible con el escenario.

El modo en que diseñes la interfaz de usuario puede influir en la facilidad con que la aplicación puede usarse con entrada táctil. Para asegurarte de que la aplicación se encuentra optimizada para la entrada táctil, sigue estas directrices:

  • Asegúrate de tener en cuenta la diferencia de tamaño que existe entre el puntero de un mouse y las puntas de los dedos. Cuando se usa la funcionalidad táctil, se requieren elementos de la interfaz de usuario más grandes para lograr precisión e impedir que los dedos oculten información importante.
  • Ofrece siempre información visual inmediata y directa para las interacciones táctiles. Por ejemplo, puedes usar resaltado o información sobre herramientas para indicar el destino táctil actual e impedir que se activen otros destinos por accidente.
  • Usa efectos físicos, como la aceleración y la inercia, para proporcionar una sensación natural en interacciones como el movimiento panorámico.
  • Usa puntos de acoplamiento y otras restricciones para guiar a los usuarios a los estados más útiles.

Si quieres consultar más directrices sobre el diseño de la experiencia del usuario relacionadas con la funcionalidad táctil, consulta el tema sobre directrices para interacción del usuario.

Eventos enrutados

Todos los eventos de puntero, los eventos de gestos y los eventos de manipulación mencionados aquí se implementan como eventos enrutados. Esto significa que el evento podría estar controlado por objetos distintos que el que generó el evento. Los elementos principales siguientes de un árbol de objetos, como los contenedores principales de un elemento de interfaz de usuario o la Page raíz, pueden elegir controlar estos eventos aunque el elemento original no lo haga. Por el contrario, cualquier objeto que no controle el evento puede marcar el evento controlado para que nunca llegue a un elemento principal. Para obtener más información sobre el concepto de evento enrutado y cómo afecta a la forma de escribir controladores para eventos enrutados, consulta Introducción a eventos y eventos enrutados.

Temas relacionados

Desarrolladores
Responder a la interacción del usuario
Desarrollar aplicaciones de Windows en tiempo de ejecución (XAML)
Inicio rápido: entrada táctil
Diseñadores
Diseño de la interacción táctil

 

 

Mostrar:
© 2014 Microsoft