Changing the Onscreen Keyboard (SIP) in Silverlight for Windows Phone 7 (WP7) using InputScope

Given that the main way users enter text in your Windows Phone 7 Series application is via a tiny onscreen keyboard (a “Software Input Panel” or SIP) it’s in everyone’s best interest to make sure the right keys are available to the user when they need them.

A good example is when you go to enter a PIN number you really only want to see number-related keys, when composing a SMS you’d like a quick way to insert an emoticon and if writing something longer you probably want auto-correction and replacement suggestions. The good news for Windows Phone developers is you can control which SIP layout is used and which auto-correct settings are enabled by setting the InputScope property of your TextBox.

The concept of InputScope isn’t new to XAML by the way, this concept already exists in WPF and was a nice fit with the native SIP behavior so if you’ve used InputScope before you should be right at home.

Setting InputScope

There are really three ways to set InputScope, two of which are cumbersome yet provide Intellisense and a third that is easy but requires you to know exactly which InputScope you’re after.

Via XAML

Doing it this way you’ll get full Intellisense yet it’s a lot of work to set a simple property:

<TextBox>
    <TextBox.InputScope>
        <InputScope>
            <InputScopeName NameValue="Text" />
        </InputScope>
    </TextBox.InputScope>
</TextBox>

Via Code

If you’re more the code-behind sort here it is in C#:

textBox1.InputScope = new InputScope()
{
    Names = { new InputScopeName() { NameValue = InputScopeNameValue.Text } }
};

Via XAML with a TypeConvertor

Remember how in high school they’d always teach you the hard way before showing you the easy version? Guilty as charged. If you already know the exact InputScopeNameValue you want to use, for example ‘Text’, then you can take advantage of the built-in TypeConvertor that is already wired up to the property and write this much easier XAML:

<TextBox InputScope="Text" />

InputScope Example Application

When we were bringing InputScopes from WPF to Silverlight for Windows Phone I wrote a quick app to show all the available InputScopes and automatically set the selected one on a TextBox. This gives you a feel for how many there are and what layout comes up when set. Here is what it looks like along with a link to the source:

Download the source.

InputScope Sample Application

Common InputScopes

Now that you know how to set them here are some of the more useful InputScopes:

Default

This is the default InputScope when no input scope is specified. Auto-capitalize first letter of sentence. The app can show app specific text suggestions.

Layout: Standard QWERTY layout.

Default InputScope
Number

When all you’re looking for is basic number entry. All features like auto-capitalize are turned off.

Layout: the first symbol page of the standard QWERTY layout.

Number InputScope
Text

When the user is typing standard text and can benefit from the full range of typing intelligence features:

  • Text suggestions (while typing and when tapping on a word)
  • Auto-correction
  • Auto-Apostrophe (English)
  • Auto-Accent
  • Auto-capitalize first letter of sentence

Layout: Text layout and access to letters, numbers, symbols and ASCII based emoticons + text suggestions.

Example fields: email subject and body, OneNote notes, appointment subject and notes, Word document, etc.

Text InputScope
Chat

The user is expected to type text using standard words as well as slang and abbreviations and can benefit from some of the typing intelligence features:

  • Text suggestions (while typing and when tapping on a word)
  • Auto-Apostrophe (English)
  • Auto-Accent
  • Auto-capitalize first letter of sentence

Layout: Chat layout and access to letters, numbers, symbols and rich MSN like emoticons + text suggestions.

Example fields: SMS, IM, Communicator, Twitter client, Facebook client, etc.

Chat InputScope
Url

The user is expected to type a URL. All auto-correct features are turned off.

Layout: Web layout with “.com” and “go” key

Url InputScope

For a complete list of InputScopes supported in Windows Phone 7 check out this MSDN link: InputScopeNameValue Enumeration.

In Conclusion

As you’re writing your applications don’t forget about InputScope, it’ll give it just that much more polish and can really make a difference in usability.

  • http://www.slimcode.com/cs/blogs/martin Martin Plante

    Hi! I made myself a similar sample (binding directly to a collection of InputScope) and noticed that assigning one of the negative InputScopeNameValue, like PhraseList, to the NameValue of an InputScopeName was causing an OverflowException.

    I tried your sample code, changed your listBox1_SelectionChanged so it uses the inputScope variable (instead of the hardcoded InputScopeNameValue.Text

  • http://www.slimcode.com/cs/blogs/martin Martin Plante

    Hi! I made myself a similar sample (binding directly to a collection of InputScope) and noticed that assigning one of the negative InputScopeNameValue, like PhraseList, to the NameValue of an InputScopeName was causing an OverflowException.

    I tried your sample code, changed your listBox1_SelectionChanged so it uses the inputScope variable (instead of the hardcoded InputScopeNameValue.Text

    • http://shawnoster.com/ Shawn Oster

      This is a known bug and it’s fixed. I actually own InputScopes in Silverlight for Windows Phone and this sample app helped uncover that strangeness.

      In the latest builds setting an invalid or negative InputScope won’t cause those nasty OverflowExceptions.

      (I’ve moved this comment as an actual reply now that I’m using DISQUS for comments).

  • http://shawnoster.com/ Shawn Oster

    This is a known bug and it’s fixed. I actually own InputScopes in Silverlight for Windows Phone and this sample app helped uncover that strangeness.

    In the latest builds setting an invalid or negative InputScope won’t cause those nasty OverflowExceptions.

  • http://shawnoster.com/ Shawn Oster

    This is a known bug and it’s fixed. I actually own InputScopes in Silverlight for Windows Phone and this sample app helped uncover that strangeness.

    In the latest builds setting an invalid or negative InputScope won’t cause those nasty OverflowExceptions.

  • Martin Witters

    Thanks, Shawn, for this post. Just one quick question: In the emulator that shipped with the Beta tools, under Settings > region & language, is InputScope being utilized for the short date and long date textboxes? How would I present lists such as those in my app for the user to select from? I thought perhaps PhraseList or EnumString, but I can’t find any documentation that tells me how to use either of those options.

    • http://shawnoster.com/ Shawn Oster

      Hi Martin, the controls you’re referring to are actually WP7′s version of a ComboBox. While those controls don’t currently exist in the box I believe several people have created their own versions (and it’s not too hard to do it yourself) and for the next release we want to have a much more broad control story. I wish I had a better answer for you as controls are near and dear to my heart.

  • Roy C

    Is there a way to make a custom inputscope/keyboard layout?

  • James H Caldwell

    A followup question related to Martin Winters’ question. Addresses are handled differently in different regions. In a lot of Europe, a street address will start with the street name and then the number and the city address will start with the postal code and then the city. Are there plans to look at the phone’s regional settings to determine the inital SIP layout?

  • CN

    Hello Shawn,
    How can i remove the Phrase List by code? I got a textbox with text inputscope. And i need to clear Phrase List in some case. Could you help on this issue? Thanks!

  • http://www.lyleandscott-poloshirts.co.uk lyle and scott cheap

    one of the negative InputScopeNameValue, like PhraseList, to the NameValue of an InputScopeName was causing an OverflowException.