Compartir a través de

Guía para desarrolladores de interacciones táctiles

Diseñe su aplicación con la expectativa de que la función táctil sea el principal método de entrada para sus usuarios. Si usa controles de la UWP (Plataforma Universal de Windows), la compatibilidad con el panel táctil, el mouse y el lápiz o lápiz óptico no requiere programación adicional, porque las aplicaciones de la UWP la proporcionan de forma gratuita.

Sin embargo, tenga en cuenta que una interfaz de usuario optimizada para la función táctil no siempre es superior a una interfaz de usuario tradicional. Ambas proporcionan ventajas y desventajas que son exclusivas de una tecnología y aplicación. Al pasar a una interfaz de usuario táctil, es importante comprender las diferencias fundamentales entre la entrada táctil, el panel táctil, el lápiz o lápiz óptico, el mouse y el teclado.

API importantes: Windows.UI.Xaml.Input, Windows.UI.Core, Windows.Devices.Input

Muchos dispositivos tienen pantallas multitáctiles que admiten el uso de uno o más dedos (o contactos táctiles) como entrada. Los contactos táctiles, y su movimiento, se interpretan como gestos y manipulaciones táctiles para respaldar diversas interacciones del usuario.

La aplicación de Windows incluye varios mecanismos diferentes para manejar la entrada táctil, lo que le permite crear una experiencia inmersiva que sus usuarios pueden explorar con confianza. Aquí, abarcamos los conceptos básicos para el uso de la entrada táctil en una aplicación de Windows.

Las interacciones táctiles requieren tres cosas:

  • Una pantalla táctil.
  • El contacto directo (o proximidad, si la pantalla tiene sensores de proximidad y admite detección de desplazamiento) de uno o más dedos en esa pantalla.
  • El movimiento de los contactos táctiles (o falta del mismo, según un umbral de tiempo).

Los datos de entrada proporcionados por el sensor táctil pueden ser:

  • Interpretados como un gesto físico para la manipulación directa de uno o más elementos de la interfaz de usuario, como desplazamiento, rotación, cambio de tamaño o movimiento. (Por el contrario, interactuar con un elemento a través de su ventana de propiedades, cuadro de diálogo u otra posibilidad de la interfaz de usuario se considera manipulación indirecta).
  • Reconocidos como un método de entrada alternativo, como el mouse o el lápiz.
  • Utilizados para complementar o modificar aspectos de otros métodos de entrada, como difuminar un trazo de tinta dibujado con un lápiz.

La entrada táctil suele implicar la manipulación directa de un elemento de la pantalla. El elemento responde inmediatamente a cualquier contacto táctil dentro de su área de prueba de impacto y reacciona de forma adecuada a cualquier movimiento posterior de los contactos táctiles, incluida la eliminación.

Los gestos táctiles y las interacciones personalizados deben diseñarse cuidadosamente. Deben ser intuitivos, dinámicos y reconocibles, y deben permitir a los usuarios explorar su aplicación con confianza.

Asegúrese de que la funcionalidad de la aplicación esté expuesta de manera constante en todos los tipos de dispositivos de entrada compatibles. Si es necesario, utilice algún tipo de modo de entrada indirecta, como la entrada de texto para interacciones con el teclado o funciones de interfaz de usuario para mouse y lápiz.

Recuerde que los dispositivos de entrada tradicionales (como el mouse y el teclado) son familiares y atractivos para muchos usuarios. Pueden ofrecer velocidad, precisión y respuesta táctil que la función táctil no puede ofrecer.

Proporcionar experiencias de interacción únicas y distintivas para todos los dispositivos de entrada admitirá la más amplia gama de capacidades y preferencias, atraerá a la audiencia más amplia posible y atraerá más clientes a su aplicación.

Comparar requisitos de interacción táctil

La siguiente tabla muestra algunas de las diferencias entre los dispositivos de entrada que debe considerar al diseñar aplicaciones de Windows táctiles optimizadas.

FactorInteracciones táctilesInteracciones con mouse, teclado, lápiz o lápiz ópticoPanel táctil
PrecisiónEl área de contacto de las yemas de los dedos es mayor que una sola coordenada x-y, lo que aumenta las posibilidades de activar comandos no deseados.El mouse y el lápiz o lápiz óptico proporcionan una coordenada x-y precisa.Igual que el mouse.
La forma del área de contacto cambia durante el movimiento. Los movimientos del mouse y los trazos del lápiz o lápiz óptico proporcionan coordenadas x-y precisas. El foco del teclado es explícito.Igual que el mouse.
No hay un cursor de mouse de ayuda para la orientación.El cursor del mouse, el cursor del lápiz o lápiz óptico y el foco del teclado ayudan a la orientación.Igual que el mouse.
Anatomía humanaLos movimientos de las yemas de los dedos son imprecisos porque es difícil realizar un movimiento rectilíneo con uno o más dedos. Esto se debe a la curvatura de las articulaciones de la mano y al número de articulaciones implicadas en el movimiento.Es más fácil realizar un movimiento en línea recta con el mouse o el lápiz o lápiz óptico porque la mano que los controla recorre una distancia física más corta que el cursor en la pantalla.Igual que el mouse.
Algunas áreas de la superficie táctil de un dispositivo de visualización pueden ser difíciles de alcanzar debido a la posición de los dedos y al agarre del dispositivo por parte del usuario.El mouse y el lápiz o lápiz óptico pueden llegar a cualquier parte de la pantalla, mientras que mediante el teclado se debe poder acceder a cualquier control a través del orden de tabulación. La posición de los dedos y el agarre pueden ser un problema.
Los objetos pueden quedar ocultos por uno o más dedos o por la mano del usuario. Esto se conoce como oclusión.Los dispositivos de entrada indirecta no causan oclusión.Igual que el mouse.
Estado del objetoLa función táctil utiliza un modelo de dos estados: la superficie táctil de un dispositivo de visualización se toca (encendido) o no (apagado). No existe ningún estado de desplazamiento que pueda desencadenar información visual adicional.

Un mouse, un lápiz o lápiz óptico y un teclado exponen un modelo de tres estados: arriba (apagado), abajo (encendido) y mantener el cursor sobre un elemento (enfoque).

Mantener el cursor sobre un elemento permite a los usuarios explorar y aprender a través de la información sobre herramientas asociada con elementos de la interfaz de usuario. Los efectos de mantener el cursor sobre un elemento y enfoque pueden indicar qué objetos son interactivos y también ayudar con la orientación.

Igual que el mouse.
Interacciones enriquecidasAdmite función multitáctil: múltiples puntos de entrada (yemas de los dedos) en una superficie táctil.Admite un único punto de entrada.Igual que el tacto.
Admite la manipulación directa de objetos a través de gestos como tocar, arrastrar, deslizar, reducir y ampliar (pellizcar), y rotar.No se admite la manipulación directa, ya que el mouse, el lápiz o lápiz óptico y el teclado son dispositivos de entrada indirectos.Igual que el mouse.

Nota:

Los dispositivos de entrada indirectos se han beneficiado de más de 25 años de perfeccionamiento. Se han diseñado características, como la información sobre herramientas que se activa al pasar el mouse, para resolver la exploración de la interfaz de usuario específicamente para la entrada del panel táctil, el mouse, el lápiz o lápiz óptico y el teclado. Funciones de interfaz de usuario como esta se han rediseñado para ofrecer la experiencia completa que proporciona la entrada táctil, sin comprometer la experiencia del usuario para estos otros dispositivos.

Usar comentarios visuales

Los comentarios visuales adecuados durante las interacciones con su aplicación ayudan a los usuarios a reconocer, aprender y adaptarse a cómo interpretan sus interacciones tanto en la aplicación como la plataforma Windows. Los comentarios visuales pueden indicar interacciones exitosas, transmitir el estado del sistema, mejorar la sensación de control, reducir errores, ayudar a los usuarios a comprender el sistema y el dispositivo de entrada, así como fomentar la interacción.

Los comentarios visuales son fundamentales cuando el usuario depende de la entrada táctil para actividades que requieren exactitud y precisión según la ubicación. Mostrar comentarios cuando y donde se detecte una entrada táctil, ayuda al usuario a comprender las reglas de orientación personalizadas definidas por su aplicación y sus controles.

Selección de destino

La orientación se optimiza a través de:

  • Tamaños de objetivos táctiles

    Las directrices de tamaño claras garantizan que las aplicaciones proporcionen una interfaz de usuario cómoda que contenga objetos y controles fáciles y de acceso seguro.

  • Geometría de contacto

    Toda la zona de contacto del dedo determina el objeto objetivo más probable.

  • Fregar

    Los elementos dentro de un grupo se pueden reorientar fácilmente arrastrando el dedo entre ellos (por ejemplo, botones de radio). El elemento actual se activa cuando se suelta el toque.

  • Oscilación

    Los elementos muy empaquetados (por ejemplo, hipervínculos) se pueden reorientar fácilmente presionando el dedo hacia abajo y, sin deslizarlo, moviéndolo hacia adelante y hacia atrás sobre los elementos. Debido a la oclusión, el elemento actual se identifica a través de una información sobre herramientas o la barra de estado y se activa cuando se deja de tocar.

Precisión

Diseño para interacciones descuidadas mediante el uso de:

  • Puntos de ajuste que pueden facilitar la parada en ubicaciones deseadas cuando los usuarios interactúan con el contenido.
  • "Rieles" direccionales que pueden ayudar con el movimiento panorámico vertical u horizontal, incluso cuando la mano se mueve formando un ligero arco. Para obtener más información, consulte Directrices para el movimiento panorámico.

Oclusión

La oclusión de dedos y manos se evita mediante:

  • El tamaño y posicionamiento de la interfaz de usuario

    Haciendo que los elementos de la interfaz de usuario sean lo suficientemente grandes como para que no puedan quedar completamente cubiertos por el área de contacto con la yema del dedo.

    Ubicando los menús y las ventanas emergentes encima del área de contacto siempre que sea posible.

  • Informaciones sobre herramientas

    La información sobre herramientas se muestra cuando un usuario mantiene contacto con el dedo sobre un objeto. Esto es útil para describir la funcionalidad de un objeto. El usuario puede arrastrar la yema del dedo fuera del objeto para evitar invocar la información sobre herramientas.

    Para objetos pequeños, desplace la información sobre herramientas para que no quede cubierta por el área de contacto con la yema del dedo. Esto es útil para la orientación.

  • Controladores para precisión

    Cuando se requiera precisión (por ejemplo, selección de texto), proporcione controladores de selección que estén desplazados para mejorar la precisión. Para obtener más información, consulte Directrices para seleccionar texto e imágenes (aplicaciones Windows Runtime).

Control de tiempo

Evite cambios de modo cronometrados en favor de la manipulación directa. La manipulación directa simula el manejo físico directo y en tiempo real de un objeto. El objeto responde al movimiento de los dedos.

Por otro lado, una interacción cronometrada ocurre después de una interacción táctil. Las interacciones cronometradas generalmente dependen de umbrales invisibles como el tiempo, la distancia o la velocidad para determinar qué comando ejecutar. Las interacciones cronometradas no tienen comentarios visuales hasta que el sistema realiza la acción.

La manipulación directa proporciona una serie de beneficios sobre las interacciones cronometradas:

  • Los comentarios visuales instantáneos durante las interacciones hacen que los usuarios se sientan más involucrados, seguros y en control.
  • Las manipulaciones directas hacen que sea más seguro explorar un sistema porque son reversibles: los usuarios pueden retroceder fácilmente en sus acciones de una manera lógica e intuitiva.
  • Las interacciones que afectan directamente a los objetos e imitan las interacciones del mundo real son más intuitivas, reconocibles y fáciles de recordar. No dependen de interacciones ocultas o abstractas.
  • Las interacciones cronometradas pueden resultar difíciles de realizar, ya que los usuarios deben alcanzar umbrales arbitrarios e invisibles.

Además, se recomienda encarecidamente lo siguiente:

  • Las manipulaciones no deben distinguirse por el número de dedos utilizados.
  • Las interacciones deben respaldar manipulaciones compuestas. Por ejemplo, reduzca y amplíe (pellizcar)para hacer zoom mientras arrastras los dedos para realizar una panorámica.
  • Las interacciones no deben distinguirse por el tiempo. La misma interacción debe tener el mismo resultado independientemente del tiempo que se tarde en realizarla. Las activaciones basadas en tiempo introducen retrasos obligatorios para los usuarios y restan valor tanto a la naturaleza inmersiva de la manipulación directa como a la percepción de la capacidad de respuesta del sistema.

    Nota:

    Una excepción a esto es cuando utiliza interacciones cronometradas específicas para ayudar en el aprendizaje y la exploración (por ejemplo, mantener presionado).

  • Las descripciones apropiadas y las señales visuales tienen un gran efecto en el uso de interacciones avanzadas.

Vistas de aplicación

Modifique la experiencia de interacción del usuario a través de la configuración de panorámica o desplazamiento y zoom de las vistas de su aplicación. La vista de una aplicación determina cómo un usuario accede y manipula su aplicación y su contenido. Las vistas también proporcionan comportamientos como desaceleración o inercia, rebote en límites de áreas de contenido y puntos de ajuste.

Las configuraciones de panorámica y desplazamiento del control ScrollViewer dictan cómo los usuarios navegan dentro de una sola vista, cuando el contenido de la vista no cabe dentro de la ventana gráfica. Una vista única puede ser, por ejemplo, una página de una revista o un libro, la estructura de carpetas de un equipo, una biblioteca de documentos o un álbum de fotos.

La configuración del zoom se aplica tanto al zoom óptico (compatible con el control ScrollViewer) como al control Zoom semántico. El zoom semántico es una técnica táctil optimizada para presentar y navegar por grandes conjuntos de datos o contenidos relacionados en una única vista. Funciona mediante el uso de dos modos distintos de clasificación o niveles de zoom. Esto es análogo a realizar una panorámica y desplazamiento dentro de una sola vista. La panorámica y el desplazamiento se pueden utilizar junto con el zoom semántico.

Utilice vistas y eventos de la aplicación para modificar los comportamientos de panorámica, desplazamiento y zoom. Esto puede proporcionar una experiencia de interacción más fluida que la que se obtiene mediante el manejo de eventos de puntero y gesto.

Para obtener más información sobre las vistas de aplicaciones consulte Controles, diseños y texto.

Interacciones táctiles personalizadas

Si implementa su propio soporte de interacción, tenga en cuenta que los usuarios esperan una experiencia intuitiva que implique interacción directa con los elementos de la interfaz de usuario de su aplicación. Le recomendamos que configure las interacciones personalizadas en las bibliotecas de control de la plataforma para mantener la coherencia y la visibilidad. Los controles de estas bibliotecas brindan una experiencia de interacción completa del usuario, incluidas interacciones estándar, efectos físicos animados, comentarios visuales y accesibilidad. Cree interacciones personalizadas sólo si existe un requisito claro y bien definido y las interacciones básicas no son compatibles con su escenario.

Importante

Windows 11 y más recientes

Algunas interacciones táctiles con tres y cuatro dedos ya no funcionarán en aplicaciones de Windows de forma predeterminada.

De forma predeterminada, el sistema ahora utiliza interacciones táctiles con tres y cuatro dedos para operaciones como cambiar o minimizar ventanas y cambiar escritorios virtuales. Como estas interacciones ahora se manejan a nivel del sistema, este cambio podría afectar la funcionalidad de su aplicación.

Para admitir interacciones con tres o cuatro dedos dentro de una aplicación, se ha introducido una nueva configuración de usuario que especifica si el sistema maneja o no estas interacciones:

Bluetooth y dispositivos > Panel táctil > "Gestos con tres y cuatro dedos"

Cuando está configurado en "Activado" (predeterminado), el sistema manejará todas las interacciones con tres y cuatro dedos (las aplicaciones no podrán admitirlas).

Cuando está configurado en "Desactivado", las aplicaciones pueden admitir interacciones con tres y cuatro dedos (el sistema no las manejará).

Si su aplicación debe admitir estas interacciones, le recomendamos que informe a los usuarios sobre esta configuración y proporcione un enlace que inicie la aplicación Configuración en la página correspondiente (ms-settings:devices-touch). Para obtener más detalles, consulte Iniciar la aplicación Configuración de Windows.

Para proporcionar soporte táctil personalizado, puede manejar varios eventos UIElement. Estos eventos se agrupan en tres niveles de abstracción.

  • Los eventos de gestos estáticos que se activan una vez completada una interacción. Los eventos de gestos incluyen Tapped, DoubleTapped, RightTapped y Holding.

    Puede desactivar eventos de gestos en elementos específicos estableciendo IsTapEnabled, IsDoubleTapEnabled, IsRightTapEnabled y IsHoldingEnabled en false.

  • Los eventos de puntero como PointerPressed y PointerMoved que proporcionan detalles de bajo nivel para cada contacto táctil, incluido el movimiento del puntero y la capacidad de distinguir eventos para presionar y soltar.

    Un puntero es un tipo de entrada genérico con un mecanismo de eventos unificado. Expone información básica, como la posición de la pantalla, en la fuente de entrada activa, que puede ser entrada táctil, panel táctil, mouse o lápiz.

  • Los eventos de gestos de manipulación, como ManipulationStartedque indican una interacción en curso. Se activan cuando el usuario toca un elemento y continúan hasta que el usuario levanta los dedos o se cancela la manipulación.

    Los eventos de manipulación incluyen interacciones multitáctiles, como hacer zoom, hacer una panorámica o rotar, e interacciones que utilizan datos de inercia y velocidad, como arrastrar. La información que proporcionan los eventos de manipulación no identifica la forma de la interacción que se realizó, sino que incluye datos como posición, traducción delta y velocidad. Puede utilizar estos datos táctiles para determinar el tipo de interacción que se debe realizar.

Este es el conjunto básico de gestos táctiles compatibles con la UWP (Plataforma Universal de Windows).

Nombre Escribir Descripción
Pulsar Gesto estático Un dedo toca la pantalla y levanta.
Pulsar y sostener Gesto estático Un dedo toca la pantalla y permanece en el sitio.
Diapositiva Gesto de manipulación Uno o más dedos tocan la pantalla y se desplazan en la misma dirección.
Deslizar rápidamente Gesto de manipulación Uno o más dedos tocan la pantalla y se mueven una distancia corta en la misma dirección.
Turno Gesto de manipulación Dos o más dedos tocan la pantalla y se mueven en formando un arco en el sentido de las agujas del reloj o en el sentido contrario a las agujas del reloj.
Reducir Gesto de manipulación Dos o más dedos tocan la pantalla y se juntan.
Estiramiento Gesto de manipulación Dos o más dedos tocan la pantalla y se alejan.

Eventos de gestos

Para obtener detalles sobre controles individuales, consulte la lista de controles

Eventos de puntero

Los eventos de puntero se generan mediante una variedad de fuentes de entrada activas, incluidos el tacto, el panel táctil, el lápiz y el mouse (reemplazan los eventos tradicionales del mouse).

Los eventos de puntero se basan en un único punto de entrada (dedo, punta del lápiz, cursor del mouse) y no admiten interacciones basadas en la velocidad.

A continuación se muestra una lista de eventos de puntero y sus argumentos de evento relacionados.

Evento o clase Descripción
PunteroPresionado Se produce cuando un solo dedo toca la pantalla.
LiberaciónDelPuntero Se produce cuando ese mismo contacto táctil se levanta.
PointerMoved Se produce cuando se arrastra el puntero por la pantalla.
PunteroHaEntrado Se produce cuando un puntero entra en el área de prueba de impacto de un elemento.
PointerExited Se produce cuando un puntero sale del área de prueba de impacto de un elemento.
PunteroCancelado Se produce cuando un contacto táctil se pierde de forma excepcional.
PointerCaptureLost Se produce cuando otro elemento captura un puntero.
CambioDeRuedaDelPuntero Se produce cuando cambia el valor delta de la rueda del mouse y cuando se reduce o amplía el panel táctil.
PointerRoutedEventArgs Proporciona datos para todos los eventos de puntero.

En el siguiente ejemplo se muestra cómo utilizar los eventos PointerPressed, PointerReleased y PointerExited para manejar una interacción táctil en un objeto Rectángulo.

Primero, se crea un Rectángulo denominado touchRectangle en el lenguaje de marcado de aplicaciones extensible (XAML).

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Rectangle Name="touchRectangle"
           Height="100" Width="200" Fill="Blue" />
</Grid>

A continuación, se especifican los clientes de escucha para los eventos PointerPressed, PointerReleased y PointerExited.

MainPage::MainPage()
{
    InitializeComponent();

    // Pointer event listeners.
    touchRectangle->PointerPressed += ref new PointerEventHandler(this, &MainPage::touchRectangle_PointerPressed);
    touchRectangle->PointerReleased += ref new PointerEventHandler(this, &MainPage::touchRectangle_PointerReleased);
    touchRectangle->PointerExited += ref new PointerEventHandler(this, &MainPage::touchRectangle_PointerExited);
}

public MainPage()
{
    this.InitializeComponent();

    // Pointer event listeners.
    touchRectangle.PointerPressed += touchRectangle_PointerPressed;
    touchRectangle.PointerReleased += touchRectangle_PointerReleased;
    touchRectangle.PointerExited += touchRectangle_PointerExited;
}

Public Sub New()

    ' This call is required by the designer.
    InitializeComponent()

    ' Pointer event listeners.
    AddHandler touchRectangle.PointerPressed, AddressOf touchRectangle_PointerPressed
    AddHandler touchRectangle.PointerReleased, AddressOf Me.touchRectangle_PointerReleased
    AddHandler touchRectangle.PointerExited, AddressOf touchRectangle_PointerExited

End Sub

Finalmente, el controlador de eventos PointerPressed aumenta el Alto y el Ancho del Rectángulo, mientras que los controladores de eventos PointerReleased y PointerExited establecen el Alto y el Ancho a sus valores iniciales.

// Handler for pointer exited event.
void MainPage::touchRectangle_PointerExited(Object^ sender, PointerRoutedEventArgs^ e)
{
    Rectangle^ rect = (Rectangle^)sender;

    // Pointer moved outside Rectangle hit test area.
    // Reset the dimensions of the Rectangle.
    if (nullptr != rect)
    {
        rect->Width = 200;
        rect->Height = 100;
    }
}

// Handler for pointer released event.
void MainPage::touchRectangle_PointerReleased(Object^ sender, PointerRoutedEventArgs^ e)
{
    Rectangle^ rect = (Rectangle^)sender;

    // Reset the dimensions of the Rectangle.
    if (nullptr != rect)
    {
        rect->Width = 200;
        rect->Height = 100;
    }
}

// Handler for pointer pressed event.
void MainPage::touchRectangle_PointerPressed(Object^ sender, PointerRoutedEventArgs^ e)
{
    Rectangle^ rect = (Rectangle^)sender;

    // Change the dimensions of the Rectangle.
    if (nullptr != rect)
    {
        rect->Width = 250;
        rect->Height = 150;
    }
}

// Handler for pointer exited event.
private void touchRectangle_PointerExited(object sender, PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Pointer moved outside Rectangle hit test area.
    // Reset the dimensions of the Rectangle.
    if (null != rect)
    {
        rect.Width = 200;
        rect.Height = 100;
    }
}
// Handler for pointer released event.
private void touchRectangle_PointerReleased(object sender, PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

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

// Handler for pointer pressed event.
private void touchRectangle_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

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

' Handler for pointer exited event.
Private Sub touchRectangle_PointerExited(sender As Object, e As PointerRoutedEventArgs)
    Dim rect As Rectangle = CType(sender, Rectangle)

    ' Pointer moved outside Rectangle hit test area.
    ' Reset the dimensions of the Rectangle.
    If (rect IsNot Nothing) Then
        rect.Width = 200
        rect.Height = 100
    End If
End Sub

' Handler for pointer released event.
Private Sub touchRectangle_PointerReleased(sender As Object, e As PointerRoutedEventArgs)
    Dim rect As Rectangle = CType(sender, Rectangle)

    ' Reset the dimensions of the Rectangle.
    If (rect IsNot Nothing) Then
        rect.Width = 200
        rect.Height = 100
    End If
End Sub

' Handler for pointer pressed event.
Private Sub touchRectangle_PointerPressed(sender As Object, e As PointerRoutedEventArgs)
    Dim rect As Rectangle = CType(sender, Rectangle)

    ' Change the dimensions of the Rectangle.
    If (rect IsNot Nothing) Then
        rect.Width = 250
        rect.Height = 150
    End If
End Sub

Eventos de manipulación

Utilice eventos de manipulación en su aplicación si necesita admitir múltiples interacciones con los dedos o interacciones que requieran datos de velocidad.

Puede utilizar eventos de manipulación para detectar interacciones como arrastrar, hacer zoom y mantener presionado.

Nota:

El panel táctil no genera eventos de manipulación. En su lugar, se generarán eventos de puntero para la entrada del panel táctil.

A continuación se muestra una lista de eventos de manipulación y los argumentos de evento relacionados.

Evento o clase Descripción
Evento ManipulationStarting Se produce cuando el procesador de manipulación se crea por primera vez.
Evento ManipulationStarted Se produce cuando un dispositivo de entrada inicia una manipulación en la clase UIElement.
Evento ManipulationDelta Se produce cuando el dispositivo de entrada cambia de posición durante una manipulación.
Evento ManipulationInertiaStarting Se produce cuando el dispositivo de entrada pierde contacto con el objeto UIElement durante una manipulación y comienza la inercia.
Evento ManipulationCompleted Se produce cuando un dispositivo de entrada inicia una manipulación en UIElement.
ManipulationStartingRoutedEventArgs Proporciona datos para el evento ManipulationStarting.
ManipulationStartedRoutedEventArgs Proporciona datos para el evento ManipulationStarted.
ManipulationDeltaRoutedEventArgs Proporciona datos para el evento ManipulationDelta.
ArgumentosEventoManipulaciónInerciaInicioRuteada Proporciona datos para el evento ManipulationInertiaStarting.
ManipulationVelocities Describe la velocidad a la que se producen las manipulaciones.
manipulationCompletedRoutedEventArgs Proporciona datos para el evento ManipulationCompleted.

Un gesto consta de una serie de eventos de manipulación. Cada gesto comienza con un evento ManipulationStarted, como cuando un usuario toca la pantalla.

A continuación, se desencadenan uno o más eventos ManipulationDelta. Por ejemplo, si se toca la pantalla y luego se arrastra el dedo por la pantalla. Finalmente, se genera un evento ManipulationCompleted cuando finaliza la interacción.

Nota:

Si no tiene un monitor de pantalla táctil, puede probar el código de eventos de manipulación en el simulador usando una interfaz del mouse y la rueda del mouse.

En el siguiente ejemplo se muestra cómo utilizar los eventos ManipulationDelta para manejar una interacción de diapositiva en un Rectángulo y moverlo por la pantalla.

Primero, se crea un Rectángulo denominado touchRectangle en XAML con un Alto y un Ancho de 200.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Rectangle Name="touchRectangle"
               Width="200" Height="200" Fill="Blue" 
               ManipulationMode="All"/>
</Grid>

A continuación, se crea un TranslateTransform denominado dragTranslation para trasladar el Rectángulo. Se especifica un detector de eventos ManipulationDelta en el Rectángulo, y se agrega dragTranslation a RenderTransform del Rectángulo.

// Global translation transform used for changing the position of 
// the Rectangle based on input data from the touch contact.
Windows::UI::Xaml::Media::TranslateTransform^ dragTranslation;

// Global translation transform used for changing the position of 
// the Rectangle based on input data from the touch contact.
private TranslateTransform dragTranslation;

' Global translation transform used for changing the position of 
' the Rectangle based on input data from the touch contact.
Private dragTranslation As TranslateTransform

MainPage::MainPage()
{
    InitializeComponent();

    // Listener for the ManipulationDelta event.
    touchRectangle->ManipulationDelta += 
        ref new ManipulationDeltaEventHandler(
            this, 
            &MainPage::touchRectangle_ManipulationDelta);
    // New translation transform populated in 
    // the ManipulationDelta handler.
    dragTranslation = ref new TranslateTransform();
    // Apply the translation to the Rectangle.
    touchRectangle->RenderTransform = dragTranslation;
}

public MainPage()
{
    this.InitializeComponent();

    // Listener for the ManipulationDelta event.
    touchRectangle.ManipulationDelta += touchRectangle_ManipulationDelta;
    // New translation transform populated in 
    // the ManipulationDelta handler.
    dragTranslation = new TranslateTransform();
    // Apply the translation to the Rectangle.
    touchRectangle.RenderTransform = this.dragTranslation;
}

Public Sub New()

    ' This call is required by the designer.
    InitializeComponent()

    ' Listener for the ManipulationDelta event.
    AddHandler touchRectangle.ManipulationDelta,
        AddressOf testRectangle_ManipulationDelta
    ' New translation transform populated in 
    ' the ManipulationDelta handler.
    dragTranslation = New TranslateTransform()
    ' Apply the translation to the Rectangle.
    touchRectangle.RenderTransform = dragTranslation

End Sub

Finalmente, en el controlador de eventos ManipulationDelta, la posición del Rectángulo se actualiza utilizando TranslateTransform en la propiedad Delta.

// Handler for the ManipulationDelta event.
// ManipulationDelta data is loaded into the
// translation transform and applied to the Rectangle.
void MainPage::touchRectangle_ManipulationDelta(Object^ sender,
    ManipulationDeltaRoutedEventArgs^ e)
{
    // Move the rectangle.
    dragTranslation->X += e->Delta.Translation.X;
    dragTranslation->Y += e->Delta.Translation.Y;
    
}

// Handler for the ManipulationDelta event.
// ManipulationDelta data is loaded into the
// translation transform and applied to the Rectangle.
void touchRectangle_ManipulationDelta(object sender,
    ManipulationDeltaRoutedEventArgs e)
{
    // Move the rectangle.
    dragTranslation.X += e.Delta.Translation.X;
    dragTranslation.Y += e.Delta.Translation.Y;
}

' Handler for the ManipulationDelta event.
' ManipulationDelta data Is loaded into the
' translation transform And applied to the Rectangle.
Private Sub testRectangle_ManipulationDelta(
    sender As Object,
    e As ManipulationDeltaRoutedEventArgs)

    ' Move the rectangle.
    dragTranslation.X = (dragTranslation.X + e.Delta.Translation.X)
    dragTranslation.Y = (dragTranslation.Y + e.Delta.Translation.Y)

End Sub

Eventos enrutados

Todos los eventos de puntero, de gestos y de manipulación mencionados aquí se implementan como eventos enrutados. Esto significa que el evento puede ser controlado potencialmente por objetos distintos del que generó el evento originalmente. Sucesivos objetos principales en un árbol de objetos, como los contenedores principales de UIElement o la Página raíz de su aplicación, pueden optar por manejar estos eventos incluso si el elemento original no lo hace. Por el contrario, cualquier objeto que controle el evento puede marcar el evento controlado para que ya no llegue a ningún elemento principal. Para obtener más información sobre el concepto de evento enrutado y cómo afecta la forma en que se escriben controladores para eventos enrutados, consulte Descripción general de eventos y eventos enrutados.

Importante

Si necesita controlar los eventos de puntero para una clase UIElement en una vista desplazable (como ScrollViewer o ListView), debe deshabilitar explícitamente la compatibilidad con los eventos de manipulación en el elemento de la vista mediante una llamada a UIElement.CancelDirectmanipulation(). Para volver a habilitar los eventos de manipulación en la vista, llame a UIElement.TryStartDirectManipulation().

Qué hacer y qué no hacer

  • Diseñar aplicaciones con interacción táctil como principal método de entrada esperado.
  • Proporcionar comentarios visuales para interacciones de todo tipo (táctil, lápiz óptico, mouse, etc.)
  • Optimizar la orientación ajustando el tamaño del objetivo táctil, la geometría de contacto, la fricción y la oscilación.
  • Optimizar la precisión mediante el uso de puntos de ajuste y "rieles" direccionales.
  • Proporcionar información sobre herramientas y controles para mejorar la precisión táctil de los elementos de la interfaz de usuario muy compactos.
  • No utilizar interacciones cronometradas siempre que sea posible (ejemplo de uso apropiado: tocar y mantener presionado).
  • No usar los dedos utilizados para distinguir la manipulación siempre que sea posible.

Ejemplos

Ejemplos de archivo