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

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

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

• XAML TextBox
• Creating a Custom Date Textbox User Control: Part 2
• Total in TextBox of two TextBoxes in C#
• Using AJAX Textbox Extenders
• Bind ScrollBarToTextBox and TextBoxToScrollBar in Silverlight