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:

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:

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

  1. <phone:PhoneApplicationPage
  2. x:Class="Demo.MainPage"
  3. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5. xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  6. xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
  7. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  8. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  9. mc:Ignorable="d"
  10. FontFamily="{StaticResource PhoneFontFamilyNormal}"
  11. FontSize="{StaticResource PhoneFontSizeNormal}"
  12. Foreground="{StaticResource PhoneForegroundBrush}"
  13. SupportedOrientations="Portrait" Orientation="Portrait"
  14. shell:SystemTray.IsVisible="True">
  16. <!--LayoutRoot is the root grid where all page content is placed-->
  17. <Grid x:Name="LayoutRoot" Background="Transparent">
  18. <Grid.RowDefinitions>
  19. <RowDefinition Height="112.662"/>
  20. <RowDefinition Height="655.338"/>
  21. </Grid.RowDefinitions>
  23. <!--TitlePanel contains the name of the application and page title-->
  24. <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,512" Grid.RowSpan="2">
  25. <TextBlock Text="Demo" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
  26. <TextBlock Text="Demo" Margin="9,-7,0,0" FontSize="40" />
  27. </StackPanel>
  29. <!--ContentPanel - place additional content here-->
  30. <StackPanel Orientation="Vertical" Grid.Row="2">
  31. <TextBox Text="Numbers" InputScope="Number" Margin="0 0 0 10" Height="69" ></TextBox>
  32. <TextBox Text="Text" InputScope="Text" Margin="0 0 0 10" Height="69" ></TextBox>
  33. <TextBox Text="Default" Margin="0 0 0 10" Height="69" ></TextBox>
  34. <TextBox Text="Email" InputScope="EmailUserName" Margin="0 0 0 10" Height="69" ></TextBox>
  35. <TextBox Text="Url" InputScope="Url" Margin="0 0 0 10" Height="69" ></TextBox>
  36. <TextBox Text="Search" InputScope="Search" Margin="0 0 0 10" Height="69" ></TextBox>
  37. <TextBox Text="Formula" InputScope="Formula" Margin="0 0 0 10" Height="69" ></TextBox>
  38. <TextBox Text="Chat" InputScope="Chat" Margin="0 0 0 10" Height="69" ></TextBox>
  39. </StackPanel>
  40. </Grid>
  41. </phone:PhoneApplicationPage>

Warning

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

Output