Over a million developers have joined DZone.

InputScope for a TextBox in Windows Phone 7 apps

· Mobile Zone

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

eugenedotnet inputscopes thumbnail

Additional Information


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.

eugenedotnet.com all inputscope types

 

Most commonly used InputScopes

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

  • Number

    eugenedotnet inputscope number
  • Telephone Number

    eugenedotnet inputscope telephone number
  • Url

    eugenedotnet inputscope url
  • Email

    eugenedotnet inputscope email

Topics:

Published at DZone with permission of Jevgeni Tšaikin. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}