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.
Vá ao arquivo MainPage.xaml e adicione um Stack Panel ao Content Panel, que contenha as caixas de texto a serem usadas 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.
No exemplo anterior não é possível utilizar o Intellisense, então para facilitar e ver os possíveis valores do InpuScope uma caixa de texto pode ser feita conforme a listagem 2.
<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.
// 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.
<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"
/>
<TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0"
/>
</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.
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.
