Interacciones de mouse

Artículo
07/13/2023

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.

Ratón

La entrada de mouse es ideal para las interacciones del usuario que requieren precisión al apuntar y hacer clic. Desde luego que la interfaz de usuario de Windows admite esta precisión inherente, ya que se ha optimizado para la imprecisa naturaleza de la entrada táctil.

Donde el mouse y la entrada táctil difieren es en la posibilidad de esta última de emular con más precisión la manipulación directa de los elementos de interfaz de usuario a través de gestos físicos realizados directamente sobre esos objetos (como deslizar rápidamente, deslizar, arrastrar, girar, etc.). Por lo general, las manipulaciones con un mouse requieren alguna otra prestación de la interfaz de usuario, como el uso de controladores de cambiar el tamaño o girar un objeto.

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

Lenguaje del mouse de la aplicación para UWP

Un escueto conjunto de interacciones del mouse se usan de forma coherente en todo el sistema.

Término	Descripción
Mantener el mouse para obtener información	Mantén el mouse sobre un elemento para mostrar información más detallada o elementos visuales didácticos (como información sobre herramientas) sin confirmar una acción.
Clic con el botón primario para acción principal	Haz clic con el botón primario sobre un elemento para invocar su acción principal (como iniciar una aplicación o ejecutar un comando).
Desplazar para cambiar de vista	Muestra barras de desplazamiento para moverte hacia arriba, hacia abajo, a la izquierda y a la derecha dentro de un área de contenido. Los usuarios pueden desplazarse haciendo clic en las 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 (al desplazar lateralmente con entrada táctil se muestra una interfaz de usuario similar).
Clic con el botón secundario para seleccionar y ordenar	Haz clic con el botón secundario para mostrar la barra de navegación (si está disponible) y la barra de la aplicación con comandos globales. Haz clic con el botón secundario en un elemento para seleccionarlo y mostrar la barra de la aplicación 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 te recomendamos encarecidamente que uses la barra de la aplicación para todos los comportamientos de comandos.
Comandos de la interfaz de usuario para hacer zoom	Muestra los comandos de la interfaz de usuario en la barra de la aplicación (como + y -), o bien presiona Ctrl y gira la rueda del mouse, para emular los gestos de reducir y ampliar.
Comandos de la interfaz de usuario para girar	Muestra los comandos de la interfaz de usuario en la barra de la aplicación o bien presiona Ctrl+Mayús y gira la rueda del mouse, para emular el gesto de girar. Gira el dispositivo propiamente dicho para girar toda la pantalla.
Clic con el botón primario y arrastrar para reorganizar	Haz clic con el botón primario en un elemento y arrástralo para moverlo.
Clic con el botón primario y arrastrar para seleccionar texto	Haz clic con el botón primario dentro de texto seleccionable y arrástralo para seleccionarlo. Haz 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, puedes aprovechar las funcionalidades específicas de cada dispositivo (como los eventos de rueda del mouse) mediante los eventos de puntero, gesto y manipulación en Windows.UI.Input.

Muestras: Vea nuestro ejemplo BasicInput para .

Directrices para información visual

Cuando se detecta un mouse (a través de eventos de movimiento o mantenimiento del mouse), muestra la interfaz de usuario específica del mouse para indicar las funciones expuestas por el elemento. Si el mouse no se mueve por un determinado período o el usuario inicia una interacción táctil, haz que la interfaz de usuario del mouse vaya desapareciendo gradualmente. Esto mantiene la interfaz de usuario ordenada y organizada.
No uses el cursor para obtener información al mantener el mouse. La información proporcionada por el elemento es suficiente (consulta la sección Cursores más abajo).
No muestres información visual si un elemento no admite interacción (por ejemplo, texto estático).
No uses rectángulos de foco con las interacciones del mouse. Resérvalos para las interacciones del teclado.
Muestra información visual simultáneamente para todos los elementos que representan el mismo destino de entrada.
Proporciona botones (como + y -) para emular las manipulaciones táctiles, como desplazar lateralmente, girar, hacer zoom, etc.

Para obtener instrucciones más generales sobre la información visual, consulta el tema sobre las directrices para información visual.

Cursores

Dispones de un conjunto de cursores estándar para un puntero del mouse. Estos 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 con cualquier cursor estándar en cualquier momento. Especifica una imagen de cursor mediante la función PointerCursor.

Si necesitas personalizar el cursor del mouse:

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