InputScope for a TextBox in Windows Phone 7 apps

In this tutorial I will demonstrate new InputScope feature of Windows Phone 7 platform. This feature applied to a textbox could be very useful for all kinds of WP7 consumers, because it increases usability of your applications and decreases time required for entering specific text using SIP (Soft Input Panel).

Additional Information

• InputScopeNameValue Enumeration (MSDN)
• InputScope class

Definition

My definition of InputScope would be that InputScope is an attribute that can be applied to a textbox control to change the default SIP layout (i.e when user enters a text in textbox).

Ways of specifying InputScope

There are several ways of specifying InputScope for a textbox. Each of the ways has similar result, but also has specific advantages (“+”) and disadvantages (“-”).

Full XAML declaration
“+” access to IntelliSence (suggestions) for NameValue attribute of InputScopeName element
“-” a lot of XAML markup
Sample:

<TextBox Text="NumericTextBox" Height="70" Width="460" Grid.Row="1">
     <TextBox.InputScope>
          <InputScope>
              <InputScopeName  NameValue="Number" />
          </InputScope>
     </TextBox.InputScope>
</TextBox>

Short XAML declaration
“+” not much XAML markup
“-” no access to IntelliSence (suggestions) for InputScope attribute (you have to keep all available InputScope values in mind)
Sample:

<TextBox Text="NumericTextBox"
InputScope="Number" Height="70" Width="460" Grid.Row="1">

Programmatically (in code)
“+” can be set dynamically
“+” strong-type (access to suggestions for InputScopeNameValue values)
“-” a lot of code
Sample (can be done in single line of code):

// tbEmotions - is a textbox
tbEmotions.InputScope =
                new InputScope()
                {
                    Names = { new InputScopeName() { NameValue = InputScopeNameValue.Chat }
                    }
                };

Sample

* Open Visual Studio 2010 (or Express edition) with Windows Phone 7 Developer Tools installed
* Create a new “Windows Phone application” project
* Open MainPage.xaml file in designer
* Open 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:

<Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="Auto"/>
</Grid.RowDefinitions>

* Next step is to add a TextBox with Height = 70 for a Grid (ContentGrid). Simply add TextBox declaration within your XAML:

<TextBox Text="StandartTextBox" Height="70" Width="460" Grid.Row="0">
</TextBox>

* Add another TextBox with InputScope (with Property NameValue=”Number”) and Height=”70″ to ContentGrid:

<TextBox Text="NumericTextBox" Height="70" Width="460" Grid.Row="1">
    <TextBox.InputScope>
        <InputScope>
            <InputScopeName  NameValue="Number" />
        </InputScope>
    </TextBox.InputScope>
</TextBox>

* Your ContentGrid XAML will now look like that:

<Grid x:Name="ContentGrid" Grid.Row="1">
 
    <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>

* Now open the application in Emulator in Debug mode (simply by pressing F5 button). Click on StandardTextBox and notice that the default SIP layout is displayed.

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

* Now we can notice how SIP Layout changes according to specified InputScope. We have completed the first part of our tutorial.

InputScope Types

Basically, you can find all available InputScope types on MSDN website, but I have created a special C# code to display all those InputScopes on a single XAML page (textbox for each type). First, add a ScrollViewer and place a StackPanel inside with Vertical orientation.

<ScrollViewer>
            <StackPanel x:Name="MyVerticalStackPanel"  Margin="12,0,12,0" Orientation="Vertical"></StackPanel>
</ScrollViewer>

Then copy the following code to your class:

public InputScopeSample()
{
    InitializeComponent();
 
    MyVerticalStackPanel.Children.Clear();
 
    int index = 0;
    foreach (int enumValue in GetValues(typeof(InputScopeNameValue)))
    {
        if (enumValue >= 0)
        {
            TextBox tb = new TextBox();
            tb.Text = Enum.GetName(typeof(InputScopeNameValue), enumValue);
            tb.InputScope = new InputScope();
            tb.InputScope.Names.Add(new InputScopeName()
            {
                NameValue = (InputScopeNameValue)Enum.Parse(typeof(InputScopeNameValue), enumValue.ToString(), true)
            });
 
            Grid.SetRow(tb, index);
            MyVerticalStackPanel.Children.Add(tb);
 
            index++;
        }
    }
}
 
public static int[] GetValues(Type typeOfEnum)
{
    int[] values = new int[0];
    if (typeOfEnum.BaseType == typeof(Enum))
    {
        // public static members of enumeration
        var fields = typeOfEnum.GetFields(BindingFlags.Public | BindingFlags.Static);
 
        // set a size of a result array to number of members
        values = new int[fields.Length];
 
        for (int index = 0; index < fields.Length; index++)
        {
            values[index] = (int)fields[index].GetValue(null);
        }
    }
    return values;
}

As the result your page should be filled with different InputScopes (image bellow). Now you can compare different InputScopes and their SIP layouts.

 

Most commonly used InputScopes

Bellow are the most commonly used, in my opinion, InputScope types.

• Number
  
  
  
• Telephone Number
  
  
  
• Url
  
  
  
• Email