Understanding the Input Scope Property in Window Phone 8

Introduction

In this article I'll cover a very basic property that is available in most input controls, Input Scope. If you have ever used it in your app then it means you take care of the user experience but if you haven't used it yet then it means you are missing the true power of the WP8 keyboard. The reason why you haven't use it yet could be that you are not familiar with it or never cared about it. But it plays a very important role in improving the user experience of your app. So let's start with its definition.

Input Scope

Input Scope is a property of an input control that sets the scope of input. By scope I mean the type of value that a specific input box takes. Windows Phone 8 supports various types of input scope and in this article I'll cover the following input scopes:

• Text
  
  It includes auto correction, suggestions and emoticons. It is useful for general use.
   
• EmaiUserName
  
  It includes the @ and .com keys. Pressing and holding .com displays the additional options. Useful for taking email as an input.
   
• URL
  
  It includes the .com key. pressing and holding .com displays other domains also. Pressing and holding the period key displays other useful characters for URL.
   
• Number
  
  It allows you to use numbers as input. It opens the numeric keypad.
   
• Search
  
  It includes suggestions. The same as text but no emoticons.
   
• Formula
  
  It includes suggestions. Pressing and holding the equal key displays other symbols.
   
• Chat
  
  Specific to chat. Shows emoticons. Suggestions are enabled but no auto-correction.
  

General Keyboard

In general, most of the Windows Phone keyboards contain the following features. When no input scope is used this default keyboard is used. Some features of the keyboard are as follows:

• Press and hold the period key to display additional options (- ! : ? .).
  
• Press the &123 keys to change to the number and symbol keyboard.
  
• Press the "abcd" key to change to the default alphabetic keyboard.
  
• Use the left and right arrows to see additional pages of keys.

Demo

The following demo demonstrates the usage of the input scopes listed above. It contains eight textboxes with various input scopes. The following input scopes are used:

1. Text box 1 uses "Number" input scope.
2. Text box 2 uses "Text" input scope.
3. Text box 3 uses "Default" or no input scope.
4. Text box 4 uses "EmailUserName" input scope.
5. Text box 5 uses "Url" input scope.
6. Text box 6 uses "Search" input scope.
7. Text box 7 uses "Formula" input scope
8. Text box 8 uses "Chat" input scope.

Whenever the user clicks on the input box the respective keyboard is loaded.

XAML

    <phone:PhoneApplicationPage
    x:Class="Demo.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"
    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="112.662"/>
            <RowDefinition Height="655.338"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,512" Grid.RowSpan="2">
            <TextBlock Text="Demo" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
            <TextBlock  Text="Demo" Margin="9,-7,0,0" FontSize="40" />
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <StackPanel Orientation="Vertical" Grid.Row="2">
            <TextBox Text="Numbers" InputScope="Number" Margin="0 0 0 10" Height="69" ></TextBox>
            <TextBox Text="Text" InputScope="Text" Margin="0 0 0 10" Height="69" ></TextBox>
            <TextBox Text="Default" Margin="0 0 0 10" Height="69" ></TextBox>
            <TextBox Text="Email" InputScope="EmailUserName" Margin="0 0 0 10" Height="69" ></TextBox>
            <TextBox Text="Url" InputScope="Url" Margin="0 0 0 10" Height="69" ></TextBox>
            <TextBox Text="Search" InputScope="Search" Margin="0 0 0 10" Height="69" ></TextBox>
            <TextBox Text="Formula" InputScope="Formula" Margin="0 0 0 10" Height="69" ></TextBox>
            <TextBox Text="Chat" InputScope="Chat" Margin="0 0 0 10" Height="69" ></TextBox>
        </StackPanel>
    </Grid>
</phone:PhoneApplicationPage>

Warning

The following input scopes are not supported in Windows Phone apps and should not be used:

• ApplicationEnd
  For internal use in Windows Phone.
  
• EnumString
  For internal use in Windows Phone.
  
• PhraseList
  The text input pattern for a phrase list.
  
• Private
  For internal use in Windows Phone.
  
• RegularExpression
  The text input pattern for a regular expression.
  
• Srgs
  The text input pattern for the Speech Recognition Grammar Specification (SRGS).
  
• XML
  The text input pattern for XML. 

Output