InputScope For TextBox in Windows Phone 7

Introduction

In this article, I will demonstrate the new InputScope feature of Windows Phone 7 applications. This feature, when applied to a TextBox could be very useful for many WP7 consumers, because it increases usability of your applications and decreases the time required for entering specific text using the SIP (Soft Input Panel). The namespace System.Windows.Input, which contains the InputScope class to handle this event and various constructors of this class represent InputScope for various controls.

Simply speaking, InputScope is an attribute that can be applied to a TextBox control to change the default SIP layout (i.e when user enters text into a TextBox). There are several ways of specifying InputScope for a TextBox. Each of the ways has similar results, but also has specific advantages and disadvantages.

Step 1 : Open Visual Studio.

Select new -> project
Select your preferred language
Select Silverlight for Windows Phone application
Name the project
Now name of project is "WindowsPhoneApplication"

Step 2 : Open the Toolbox of the Windows Phone application.

Drag & Drop two TextBox controls onto the design view.

Step 3 : Set some formatting on the TextBox and InputScope properties in XAML code.

Open the XAML editor. Find a <Grid> element with x:Name="ContentGrid". This grid can be used as a container for our TextBoxes.
Next we need to add two RowDefinitions for the Grid.
The next step is to add two; one is a Standard and the second one is a Numeric TextBox with InputScope (with the property NameValue="Number").

Code

Step 4 : The final presentation of the design view is given below:

Code

<phone:PhoneApplicationPage
x:Class="WindowsPhoneValidation.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">


<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>


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


<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBox Text="StandartTextBox" Height="70" Width="460" Grid.Row="0">
</TextBox>
<TextBox Text="NumericTextBox" Height="70" Width="460" Grid.Row="1">
<TextBox.InputScope>
<InputScope>
<InputScopeName NameValue="Number" />
</InputScope>
</TextBox.InputScope>
</TextBox>
</Grid>
</Grid>
</phone:PhoneApplicationPage>

Output

Now run your application.
Click on StandardTextBox and notice that the default SIP layout is displayed.

Now click on the NumericTextBox and notice that the SIP layout is now number-specific. So we can easily enter numeric data.

Resources