Definindo o escopo do teclado no Windows Phone

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (0)  (0)

Veja neste artigo como definir o melhor layout do teclado para ser exibido ao usuário da sua aplicação, facilitando e agilizando a digitação dos dados nos campos de texto.

Teclado do tipo Text ou Chat no Windows Phone

Figura 1: Teclado do tipo Text ou Chat no Windows Phone

InputScope é a definição usada para facilitar a utilização do melhor teclado para digitar em um TextBox. Temos como exemplos o preenchimento de um campo somente numérico ou o endereço de um e-mail. No primeiro caso, as letras e caracteres especiais são ocultados do teclado, enquanto no segundo o símbolo @ é exibido por padrão, posto que todos os emails contém esse caractere.

Dezenas de diferentes tipos de layouts de teclado são disponibilizados no InputScopeNameValue e neste exemplo serão mostrados os diferentes tipos de escopos de teclado e como utilizá-los.

Para começar a testar os vários escopos disponíveis, crie um projeto Windows Phone no Visual Studio como mostra a Figura 2.

Criando novo projeto no Visual Studio 2012

Figura 2: Criando novo projeto no Visual Studio 2012

Vá ao arquivo MainPage.xaml e adicione um Stack Panel ao Content Panel, que contenha as caixas de texto a serem usadas como exemplo.

Listagem 1: Código do StackPanel com as caixas de text como exemplo

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel Width="450" Height="600" VerticalAlignment="Top">
<TextBlock Text="Caixa de texto numérica" />
<TextBox Name="txtUm" InputScope="Number" />
<TextBlock Text="Caixa de texto para email" />
<TextBox Name="txtDois" InputScope="EmailUserName" />
<TextBlock Text="Caixa de texto para telefone" />
<TextBox Name="txtTres" InputScope="TelephoneAreaCode" />
<TextBlock Text="Caixa de texto para endereço na web"/>
<TextBox Name="txtQuatro" InputScope="Url"/>
</StackPanel>
</Grid>

Pressione F5 e teste a aplicação, você notará que cada caixa de texto terá seu próprio layout de teclado, como o escopo para telefone conforme a Figura 3.

Aplicação em execução exibindo o layout do teclado de telefone

Figura 3: Aplicação em execução exibindo o layout do teclado de telefone

No exemplo anterior não é possível utilizar o Intellisense, então para facilitar e ver os possíveis valores do InputScope uma caixa de texto pode ser feita conforme a listagem 2.

Listagem 2: Código da outra opção de modificação do layout de teclado

<TextBlock Text="Caixa de texto para tempo" />
<TextBox Name="txtCinco">
<TextBox.InputScope>
<InputScope>
<InputScopeName NameValue="Time"/>
</InputScope>
</TextBox.InputScope>
</TextBox>

É possível também definir o escopo do teclado através do código. Adicione um TextBox com o nome de txtSeis ao StackPanel e vá para o arquivo MainPage.xaml.cs. No construtor da classe você deverá instanciar a classe InputScope e InputScopeName para referenciar o tipo de escopo a ser utilizado no InputScopeName, adicioná-lo ao InputScope e definí-lo no txtSeis conforme mostra a listagem 3.

Listagem 3: Código opção de modificação do layout de teclado através do código

// Constructor
public MainPage()
{
InitializeComponent();

InputScope escopo = new InputScope();
InputScopeName nome = new InputScopeName();

nome.NameValue = InputScopeNameValue.EmailNameOrAddress;
escopo.Names.Add(nome);

txtSeis.InputScope = escopo;
}

O arquivo MainPage.xaml deverá estar conforme a listagem 4.

Listagem 4: Código final do arquivo MainPage.xaml

<phone:PhoneApplicationPage 
    x:Class="LayoutsTeclado.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <StackPanel Width="450" Height="600" VerticalAlignment="Top">
                <TextBlock Text="Caixa de texto numérica" />
                <TextBox Name="txtUm" InputScope="Number" />
                <TextBlock Text="Caixa de texto para email" />
                <TextBox Name="txtDois" InputScope="EmailUserName" />
                <TextBlock Text="Caixa de texto para telefone" />
                <TextBox Name="txtTres" InputScope="TelephoneAreaCode" />
                <TextBlock Text="Caixa de texto para endereço na web"/>
                <TextBox Name="txtQuatro" InputScope="Url"/>
                <TextBlock Text="Caixa de texto para tempo" />
                <TextBox Name="txtCinco">
                    <TextBox.InputScope>
                        <InputScope>
                            <InputScopeName NameValue="Time"/>
                        </InputScope>
                    </TextBox.InputScope>
                </TextBox>
                <TextBlock Text="Caixa de texto seis" />
                <TextBox Name="txtSeis" />
            </StackPanel>
        </Grid>
    </Grid>
 
</phone:PhoneApplicationPage>

Agora basta pressionar F5 e testar sua aplicação que deve estar conforme a Figura 4.

Código final do arquivo MainPage.xaml

Figura 4: Código final do arquivo MainPage.xaml

A definição do InputScope correto garante maior agilidade ao usuário ao inserir dados em uma determinada página da aplicação. Retomando o exemplo anteriormente citado, em um campo destinado a valores numéricos o usuário precisaria ficar alternando entre letras e números no teclado, sempre que precisasse digitar algum valor. Com o escopo correto, são exibidos apenas caracteres relacionados a valores numéricos, facilitando a entrada de dados.

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?