Interacciones de mouse

Artículo
07/05/2024

Optimice el diseño de la aplicación de Windows para la entrada táctil y obtenga compatibilidad básica con el mouse de forma predeterminada.

mouse

La entrada del mouse es más adecuada para las interacciones del usuario que requieren precisión al apuntar y hacer clic. Esta precisión inherente es naturalmente compatible con la interfaz de usuario de Windows, que está optimizada para la naturaleza imprecisa del tacto.

Donde el mouse y la entrada táctil divergen es la capacidad de tocar para emular más estrechamente la manipulación directa de los elementos de la interfaz de usuario a través de gestos físicos realizados directamente en esos objetos (como deslizar, deslizar, arrastrar, girar, etc.). Las manipulaciones con un mouse normalmente requieren alguna otra prestación de interfaz de usuario, como el uso de identificadores para cambiar el tamaño o girar un objeto.

En este tema se describen las consideraciones de diseño para las interacciones del mouse.

Idioma del mouse de la aplicación para UWP

Un conjunto conciso de interacciones del mouse se usa de forma coherente en todo el sistema.

Término	Descripción
Mantenga el puntero para aprender	Mantenga el puntero sobre un elemento para mostrar información más detallada o objetos visuales de enseñanza (como una información sobre herramientas) sin compromiso con una acción.
Haga clic con el botón izquierdo para la acción principal.	Haga clic con el botón izquierdo en un elemento para invocar su acción principal (por ejemplo, iniciar una aplicación o ejecutar un comando).
Desplazarse para cambiar la vista	Mostrar barras de desplazamiento para subir, bajar, izquierda y derecha dentro de un área de contenido. Los usuarios pueden desplazarse haciendo clic en barras de desplazamiento o girando la rueda del mouse. Las barras de desplazamiento pueden indicar la ubicación de la vista actual dentro del área de contenido (el movimiento panorámico con entrada táctil muestra una interfaz de usuario similar).
Haga clic con el botón derecho para seleccionar y comando	Haga clic con el botón derecho para mostrar la barra de navegación (si está disponible) y la barra de aplicaciones con comandos globales. Haga clic con el botón derecho en un elemento para seleccionarlo y mostrar la barra de aplicaciones con comandos contextuales para el elemento seleccionado. Nota Haga clic con el botón derecho para mostrar un menú contextual si los comandos de selección o barra de aplicaciones no son comportamientos adecuados de la interfaz de usuario. Pero se recomienda encarecidamente usar la barra de aplicaciones para todos los comportamientos de comandos.
Comandos de interfaz de usuario para acercar	Muestra los comandos de la interfaz de usuario en la barra de aplicaciones (como + y -), o presiona Ctrl y gira la rueda del mouse, para emular los gestos de pellizcar y estirar para acercar.
Comandos de interfaz de usuario para girar	Muestra los comandos de la interfaz de usuario en la barra de la aplicación o presiona Ctrl+Mayús y gira la rueda del mouse para emular el gesto de giro para girar. Rotar el dispositivo para girar toda la pantalla.
Haga clic con el botón izquierdo y arrástrelo para reorganizar	Haga clic con el botón izquierdo y arrastre un elemento para moverlo.
Haga clic con el botón izquierdo y arrástrelo para seleccionar texto	Haga clic con el botón izquierdo en texto seleccionable y arrástrelo para seleccionarlo. Haga doble clic para seleccionar una palabra.

Eventos de entrada del mouse

La mayoría de las entradas del mouse se pueden controlar a través de los eventos de entrada enrutados comunes admitidos por todos los objetos UIElement. Entre ellas se incluyen las siguientes:

Sin embargo, puede aprovechar las funcionalidades específicas de cada dispositivo (como eventos de rueda del mouse) mediante los eventos de puntero, gesto y manipulación en Windows.UI.Input.

Ejemplos: consulte nuestro ejemplo BasicInput para .

Directrices para comentarios visuales

Cuando se detecta un mouse (a través de eventos de movimiento o de desplazamiento), muestre la interfaz de usuario específica del mouse para indicar la funcionalidad expuesta por el elemento. Si el mouse no se mueve durante una determinada cantidad de tiempo, o si el usuario inicia una interacción táctil, haga que la interfaz de usuario del mouse desaparezca gradualmente. Esto mantiene la UI limpia y ordenada.
No use el cursor para los comentarios sobre el puntero, los comentarios proporcionados por el elemento son suficientes (consulte Cursores a continuación).
No muestre respuestas visuales si un elemento no admite la interacción (por ejemplo, texto estático).
No use rectángulos de foco con interacciones del mouse. Reserve estos para las interacciones del teclado.
Mostrar respuestas visuales simultáneamente para todos los elementos que representan el mismo destino de entrada.
Proporcione botones (como + y -) para simular manipulaciones táctiles, como movimiento panorámico, rotación, zoom, etc.

Para obtener instrucciones más generales sobre los comentarios visuales, consulte Directrices para comentarios visuales.

Cursores

Hay disponible un conjunto de cursores estándar para un puntero del mouse. Se usan para indicar la acción principal de un elemento.

Cada cursor estándar tiene asociada una imagen predeterminada correspondiente. El usuario o una aplicación pueden reemplazar la imagen predeterminada asociada a cualquier cursor estándar en cualquier momento. Especifique una imagen de cursor a través de la función PointerCursor.

Si necesita personalizar el cursor del ratón:

Use siempre el cursor de flecha () para los elementos en los que se puede hacer clic. no use el cursor de mano que señala () para vínculos u otros elementos interactivos. En su lugar, use efectos de desplazamiento (descritos anteriormente).
Use el cursor de texto () para texto seleccionable.
Use el cursor de movimiento () cuando el movimiento es la acción principal (como arrastrar o recortar). No use el cursor de movimiento para los elementos en los que la acción principal es la navegación (por ejemplo, iconos de inicio).
Utilice los cursores de cambio de tamaño horizontal, vertical y diagonal (, , , ), cuando se puede cambiar el tamaño de un objeto.
Use los cursores de mano que agarra (, ) al desplazar lateralmente el contenido en un lienzo fijo (por ejemplo, un mapa).