[Tips and Tricks] Detectar modo de interacción en Windows 10

TouchIntroducción

Windows 10 ha llegado como la culminación en el viaje hacia la convergencia en el desarrollo entre plataformas Windows. Ahora hablamos de Apps Universales escritas una única vez con un código común tanto para la lógica de negocio como para la interfaz de usuario. Además, generamos un único paquete que mantendrá una interfaz consistente y familiar para el usuario pero adaptada a cada plataforma. Podemos crear apps que funcionen en todo tipo de dispositivos como teléfonos, tabletas, portátiles, dispositivos IoT, Surface Hub e incluso HoloLens.

Generamos un único paquete para todas las familias de dispositivos por lo tanto:

  • Debemos utilizar SDKs de extensión para acceder a APIs concretas de una familia de dispositivo.
  • Utilizaremos varias técnicas para adaptar la interfaz de usuario y poder otorgar la mejor experiencia de usuario posible en cada familia de dispositivo.

Sin embargo, a pesar de adaptar código e interfaz no siempre en cada dispositivo utilizaremos el mismo modo de interacción. Por ejemplo, en una Surface podremos interactuar con la App tanto utilizando teclado y ratón como con los dedos.

¿Podemos detectar el modo de interacción del usuario con nuestra App y actuar en consecuencia?

En este artículo vamos a aprender como detectar el modo de interacción.

Modo de interacción

Podemos acceder a la configuración actual de la ventana de la App utilizando UIViewSettings.GetForCurrentView() donde tenemos acceso a una propiedad llamada UserInteractionMode:

var userInteractiveMode = UIViewSettings.GetForCurrentView().UserInteractionMode;

La propiedad es de tipo enumeración con las siguientes opciones:

  • Mouse: El usuario esta utilizando ratón.
  • Touch: EL usuario utiliza pantalla táctil.
switch (userInteractiveMode)
{
     case UserInteractionMode.Mouse:
          InteractionMode = "Ratón";
          break;
     case UserInteractionMode.Touch:
          InteractionMode = "Táctil";
          break;
}

En función de los valores anteriores podemos realizar adaptaciones de la interfaz de usuario para facilitar la interacción dependiendo del modo del usuario. Podéis descargar el ejemplo completo realizado a continuación:

También tenéis el código fuente disponible e GitHub:

Ver GitHub

Recordar que podéis dejar en los comentarios cualquier tipo de sugerencia o pregunta.

Más información

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s