Idioma: HTML | XAML

Responder a las interacciones del mouse (XAML)

Applies to Windows and Windows Phone

Responde a las entradas de mouse de tus aplicaciones controlando los mismos eventos de puntero básicos que usas para las entradas táctiles y de pluma.

Estos eventos de UIElement habituales permiten implementar la funcionalidad básica de entrada sin tener que escribir un código aparte para cada dispositivo de entrada. Sin embargo, también puedes aprovechar las funcionalidades especiales de cada dispositivo (como los eventos de rueda del mouse), si es preciso. Estos eventos se clasifican en tres variedades diferentes: eventos de puntero, de gestos y de manipulación.

Sugerencia  La información presentada en este tema es específica para desarrollar aplicaciones con C++, C# o Visual Basic.

Consulta Responder a las interacciones de mouse (HTML) para las aplicaciones que usan JavaScript.

Consulta Desarrollar controles de mouse (DirectX y C++) para las aplicaciones usando DirectX con C++.

Requisitos previos:  Si te estás iniciando en el desarrollo de aplicaciones con C++, C# o Visual Basic, consulta estos temas para familiarizarte con las tecnologías presentadas 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 aplicaciones de la Tienda Windows con C++

Para más información acerca de los eventos, consulta el tema de introducción a los eventos y eventos enrutados.

Características de la aplicación, de principio a fin:  Consulta esta funcionalidad con más detalle 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 directrices se centran principalmente en la entrada táctil, pero también son adecuadas para las entradas de panel táctil, mouse, teclado y lápiz.

Muestras:  Verás esta funcionalidad en acción en nuestras muestras de aplicaciones.

Entrada: muestra de funcionalidades del dispositivo

Muestra de entrada

Entrada: gestos y manipulaciones con GestureRecognizer

Recomendaciones para admitir interacciones de mouse

Estas son algunas instrucciones para admitir interacciones del mouse.

Lenguaje del mouse

La aplicación de este lenguaje de mouse de forma coherente hace que la aplicación resulte familiar para los usuarios. Esto permite aumentar la confianza del usuario y ayuda a que la aplicación sea más fácil de aprender y de usar.

PeriodoDescripció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. Para más información acerca de la información sobre herramientas, consulta el tema acerca de cómo agregar información sobre herramientas.

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 derecho para seleccionar y ordenar

Haz clic con el botón derecho para mostrar las barras de la aplicación con comandos globales. Haz clic con el botón derecho en un elemento para seleccionarlo y mostrar la barra de la aplicación con comandos contextuales para el elemento seleccionado.

Nota  Haz clic con el botón derecho para mostrar un menú contextual si la selección o los comandos de la barra de la aplicación no son comportamientos de interfaz de usuario adecuados. 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. Al girar el dispositivo, gira 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.

Mouse sobre esquinas y bordes para comandos del sistema

Al mover el mouse a las esquinas superior derecha o inferior derecha (o al borde izquierdo en diseños de derecha a izquierda) de la pantalla, aparecen los accesos que exponen los comandos del sistema.

Mueve el mouse hacia la esquina superior izquierda en los diseños de izquierda a derecha (o hacia la esquina superior derecha en los diseños de derecha a izquierda) para mostrar una miniatura de la última aplicación usada. Haz clic o haz clic y arrastra para recorrer las aplicaciones en ejecución y cambiar a una de ellas, o arrastra para acoplar la aplicación (si lo admite la resolución de pantalla).

Mueve el mouse hacia la esquina inferior izquierda en los diseños de izquierda a derecha (o hacia la esquina inferior derecha en los diseños de derecha a izquierda) para mostrar una miniatura de la pantalla Inicio.

Haz clic con el botón primario y arrastra desde el borde superior hacia el borde inferior de la pantalla para cerrar la aplicación actual.

Haz clic con el botón izquierdo y arrastra desde el borde superior hacia abajo y hacia los bordes izquierdo o derecho para acoplar la aplicación actual a ese lado de la pantalla.

 

Hardware

Consulta las funciones del dispositivo de mouse (MouseCapabilities) para identificar cuáles son los aspectos de la interfaz de usuario de tu aplicación a los que el hardware del mouse puede acceder directamente. Para más información sobre cómo consultar las funciones de dispositivos, consulta el tema de inicio rápido: identificación de dispositivos de puntero.

Algunos dispositivos de mouse tienen cinco botones. Los botones cuarto y quinto, llamados botones X, por lo general navegan hacia atrás y hacia adelante en exploradores web como Windows Internet Explorer. Asocia estos botones con la interfaz de usuario correspondiente (botones Atrás y Adelante) en tu aplicación.

Si un mouse tiene un botón de rueda, haz que al girar hacia adelante y hacia atrás se active el desplazamiento vertical (hacia arriba y hacia abajo) dentro del área de contenido. Activa el desplazamiento horizontal (hacia la izquierda y hacia la derecha) si el área de contenido no se desplaza verticalmente. Si el botón de rueda es una rueda inclinable, solo debería activar el desplazamiento horizontal.

La rueda del mouse debe activar el zoom (si está expuesto) cuando el usuario presiona la tecla modificadora Ctrl.

  • Applies to Windows

Windows: comentarios visuales

  • 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.

  • Applies to Windows

Windows: 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. Las aplicaciones de la Tienda Windows especifican las imágenes de cursor mediante la función PointerCursor.

Si necesitas personalizar el cursor del mouse:

  • Usa siempre el cursor de flecha (Cursor de flecha) para elementos en los que se puede hacer clic. No uses el cursor de mano que señala (Cursor de mano que señala) para vínculos u otros elementos interactivos. En su lugar, usa efectos de mantenimiento del mouse (descritos anteriormente).
  • Usa el cursor de texto (Cursor de texto) para texto seleccionable.
  • Usa el cursor de movimiento (Cursor de movimiento) cuando la acción principal es un movimiento (por ejemplo, al arrastrar o recortar). No uses el cursor de movimiento para elementos en los que la acción principal es la navegación (como los iconos del Inicio).
  • Usa los cursores de ajuste horizontal, vertical y diagonal (Cursor de ajuste vertical, Cursor de ajuste horizontal, Cursor de ajuste diagonal (inferior izquierda, superior derecha), Cursor de ajuste diagonal (superior izquierda, inferior derecha)) cuando se puede ajustar el tamaño de un objeto.
  • Usa los cursores de mano que sujeta (Cursor de mano que sujeta (abierta), Cursor de mano que sujeta (cerrada)) al desplazar contenido lateralmente dentro de un Canvas fijo (como un mapa).
  • Applies to Windows

Windows: comandos

Al hacer clic en el botón derecho del mouse, se debería activar la barra de la aplicación. En la interfaz de usuario de tu aplicación, evita zonas muertas que no aceptan clics con el botón derecho. Para más información sobre las barras de la aplicación, consulta el tema acerca de cómo agregar barras de la aplicación.

Temas relacionados

Responder a la interacción del usuario

 

 

Mostrar:
© 2014 Microsoft