[Tips and Tricks] Windows Phone. Tipos de Teclado.

Introducción

Cuando deseamos obtener información introducida por el usuario es muy común el uso del control Textbox. Cuando utilizamos este control por defecto, el usuario introduce la información utilizando un teclado completo que le aparece en pantalla.

Sin embargo, no siempre se espera el mismo tipo de información. Dependiendo del tipo de información podríamos mejorar mucho la usabilidad de nuestra aplicación si el usuario utiliza el teclado adecuado. Por ejemplo, si esperamos un nombre, el teclado completo sería idóneo pero si lo que esperamos es un número de teléfono lo ideal sería mostrar el teclado numérico.

Input Scope. Cambiando el tipo de teclado.

Vamos a realizar como de costumbre un ejemplo.

La plantilla seleccionada será “Windows Phone Application” para simplificar al máximo el ejemplo.

Añadimos un TextBox a nuestra aplicación (en MainPage.xaml):

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <StackPanel>
          <TextBlock Text="Teclado"/>
          <TextBox/>
     </StackPanel>
</Grid>

Si ejecutamos la aplicación y ponemos el foco en el TextBox añadido aparecerá de manera automática el teclado completo en pantalla.

Continuamos. ¿Y si queremos que el usuario introduzca un valor numérico? Lo ideal sería que le apareciese directamente el teclado numérico para facilitarle al máximo la labor.

Para ello, añadimos un segundo TextBox. Utilizaremos la propiedad InputScope que nos permite indicar el tipo de teclado. Dicha propiedad espera una opción de la enumeración InputScopeNameValue (recomiendo echarle un vistazo a las opciones disponibles y los distintos tipos de teclados que podemos utilizar).

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <StackPanel>
          <TextBlock Text="Teclado"/>
          <TextBox/>
          <TextBlock Text="Teclado Numérico"/>
          <TextBox Name="txtPhone" InputScope="Number"/>
     </StackPanel>
</Grid>

También se podría hacer lo mismo desde el code-behind de la página:

InputScope scope = new InputScope();
InputScopeName name = new InputScopeName();
name.NameValue = InputScopeNameValue.Number;
scope.Names.Add(name);

txtPhone.InputScope = scope;

Puedes descargar el pequeño ejemplo realizado: