Post
Ask Question

On Screen Keyboard Types In Windows Phone Application

Introduction

In this article I am going to describe about the different types of  on screen keyboard for Windows Phone Applications. Basically I will describe the property "InputScope"  which is the most common property of TextBox in XAML programming.

As we know TextBox is a  basic control of  XAML and it is simply a best way to collect input from the user. When users tap on the TextBox, the default on screen keyboard is opened automatically. For a developer it is easy to control the type of input scopes according to the requirement. Before going to know more about the InputScope property of XAML TextBox, let us do a quick recap about the control "TextBox". 
 
Note

Here we're talking about the TextBox control  of XAML only where XAML stands for Extended Applications Markup Language which is used to create the user interface for windows application.

TextBox with InputScope


Requirement Tools

Before going to start this article, we should have the following tools
  • Visual Studio 2012 (at least)
  • Windows 8 Operating System
  • Windows Device or Emulator (To see the output)
Note:

For this article, I am using the following tools for app development
  • Visual Studio Express for Windows Phone 
  • Windows 8.1 Operation System
  • Windows Device (Phone)
Values of InputScope

As we read above, InputScope is  a property of TextBox control which is used to control the keyboards type using the different values of InputScope. For example, we may use Numeric Keyboard only if we only need to input number in a textbox or we may use e-mail supported keyboard if we only need to input email address which provides easiest way to access symbol @.

Like above InputScope, Microsoft provides a lot of keyboard types but in this article I am going to describe about some most useful types which are used frequently in a application. Now I am going to describe the values of InputScope which are listed below,
  • Number
  • Text
  • Emotions
  • Search
  • EmailNameOrAddress
  • Url 
  • TelephoneNumber
All these are the type of keyboard which are used as value for InputScope of a textbox control. So firstly, let's start with Number type.

Note:

Basically the main purpose of using different types of on screen keyboard is to provide the facilities to end user to access the applications fast and smooth. Suppose Indian Railways has developed an application to check train PNR status (for train birth status ). When user tap on textbox and if it shows a keyboard of type text, then it is not best for users. Let us see the example screenshot,


Figure 1: Left keyboard in not more comfortable than right screen keyboard which has only numeric keyword. Developers know that PNR should only be numeric. So, we should show "Numeric Keyword" only instead of text keyword. 
 
Implementations

Step 1:Create a windows application through the following steps,

Visual Studio 2012 For Windows Phone - File, then New Project.
And select language as Visual C# from left and select "Windows Phone". After that select "Windows Phone App" form the listed template.

And type the name of application as you wish (I have typed InputScopeDemoApp for this article).

 
                           Figure 2: (Steps to Create New Project for Windows Application)

Step 2: Now go to the Solution Explores of this project, you get a page named "MainPage.xaml" which is the default page created. So we will type the example code inside this page or you may create another page as well.
 
Note:

I have modified this page as pivot page (Where pivot  page is type of page in XAML that provides the feature to create multiple page view using a single physical page. Let us see the following syntax which is used to design a pivot page.

Code Snippet for PivotItems
  1. <Grid x:Name="LayoutRoot" Background="SeaGreen">    
  2.      <phone:Pivot Title="Demo Application">    
  3.            
  4.         <phone:PivotItem Header="Page1">    
  5.             <!--Put content for page1 here-->    
  6.         </phone:PivotItem>    
  7.             
  8.         <phone:PivotItem Header="Page2">    
  9.             <!--put content for page2 here-->    
  10.         </phone:PivotItem>    
  11.         <phone:PivotItem Header="Page3">    
  12.             <!--put content for page3 here-->    
  13.         </phone:PivotItem>    
  14.     </phone:Pivot>    
  15. </Grid>  
Basically "Pivot" is a control that is a container for another control called "PivotItem" control where a PivotItem control represents an individual page contents. In the above code snippet, there are three pivot items where each pivot item represents a page. Let us see the visual look for above code snippet.

 
Figure 3: Pivot Page
 
Let's start  the main theme of this article and for that first start with on screen keyboard type "Number".

We may use numeric keyword where we need to take input as Numeric value only. So to know about the numeric keyboard let's see the following code snapshot,


We can see that in this code snap there is a TextBox control with property "InputScope" having a value Number. So if we  put a property InputScope with the value as Number, it will display the onscreen keyboard for Number only (not alphabets).

Note: Please note the above line of code with InputScope is the simplest syntax but there is an issue with this line of code, we cannot see the IntelliSense  at the time of typing the values for InputScope. So let's see the following code snippet which gives us the IntelliSense for various InputScope values which is provided by Microsoft. 
  1. <TextBox Name="txtInputNumber" Height="100" Grid.Row="1" Background="White" Foreground="Orange" >  
  2.        <TextBox.InputScope>  
  3.               <InputScope>  
  4.                     <InputScopeName NameValue="Number"  />  
  5.               </InputScope>  
  6.         </TextBox.InputScope>  
  7.  </TextBox>  
We can follow the syntax like above code snippet if we like to see the IntelliSense for InputScope values. Let's see the following screenshots which shows the IntelliSense windows with various values like numbers and others.


Figure 4: IntelliSense for InputScope

Now we can execute this application to watch the type of on-screen keyboard on tap event of TextBox. (Before going to execute this application first connect your device with machine (computer) if you're not using emulator.
 
Note: Please mind that I have slightly modified the code content  to make the design structure better. The following is the final code after modification. I have added five pivot items for keyboard type (Number, Text, Email,Suggestion and  Emotions). The following is the complete code snippet,
  1. <phone:PhoneApplicationPage  
  2.     x:Class="InputScopeDemo.PivotPage1"  
  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">  
  15.   
  16.     <!--LayoutRoot is the root grid where all page content is placed-->  
  17.     <Grid x:Name="LayoutRoot" Background="#FF494646">  
  18.         <phone:Pivot Title="InputScope in Windows Aplicatons." Foreground="White" >  
  19.             <phone:PivotItem Header="number">  
  20.                 <Grid Background="Transparent">  
  21.                     <Grid.RowDefinitions>  
  22.                         <RowDefinition Height="60"  />  
  23.                         <RowDefinition Height="100"  />  
  24.                         <RowDefinition Height="*" />  
  25.                     </Grid.RowDefinitions>  
  26.   
  27.                     <TextBlock Grid.Row="0" Text="Phone Number"  FontSize="35" Padding="10"></TextBlock>  
  28.                     <TextBox Name="txtInputNumber" Height="100" Grid.Row="1" Background="White" Foreground="Orange" >  
  29.                         <TextBox.InputScope>  
  30.                             <InputScope>  
  31.                                 <InputScopeName NameValue="Number"  />  
  32.                             </InputScope>  
  33.                         </TextBox.InputScope>  
  34.                     </TextBox>  
  35.                 </Grid>  
  36.             </phone:PivotItem>  
  37.   
  38.             <phone:PivotItem Header="text">  
  39.                 <!--put content for page2 here-->  
  40.             </phone:PivotItem>  
  41.             <phone:PivotItem Header="Suggestions">  
  42.                 <!--put content for page3 here-->  
  43.             </phone:PivotItem>  
  44.             <phone:PivotItem Header="Suggestions">  
  45.                 <!--put content for page3 here-->  
  46.             </phone:PivotItem>  
  47.             <phone:PivotItem Header="email">  
  48.                 <!--put content for page3 here-->  
  49.             </phone:PivotItem>  
  50.             <phone:PivotItem Header="emotions">  
  51.                 <!--put content for page3 here-->  
  52.             </phone:PivotItem>             
  53.         </phone:Pivot>  
  54.     </Grid>  
  55.       
  56. </phone:PhoneApplicationPage>  
We may see that I have added a grid inside the first pivot item with three rows. The following is the output for InputScope=Number.


Figure 5: Numeric Keyboard

Programmatically 

Now I am going to describe how to set InputScope programmatically in Visual C#. Let's see the following code snippet.
  1. //For Input Scope
  2. using System.Windows.Input;

  4. namespace InputScopeDemo  
  5. {  
  6.     public partial class MainPage : PhoneApplicationPage  
  7.     {  
  8.         // Constructor  
  9.         public MainPage()  
  10.         {  
  11.             InitializeComponent();  
  12.   
  13.             //First way  
  14.             InputScope scope = new InputScope();  
  15.             InputScopeName name = new InputScopeName();  
  16.             name.NameValue = InputScopeNameValue.Number;  
  17.             scope.Names.Add(name);  
  18.             txtInputNumber.InputScope = scope;  
  19.         }        
  20.     }  
  21. }  
One more another way to set the InputScope of TextBox programmatically is following:
  1. // txtInputNumber - is a textbox  
  2.             txtInputNumber.InputScope =  
  3.                             new InputScope()  
  4.                             {  
  5.                                 Names = { new InputScopeName() { NameValue = InputScopeNameValue.Number } }  
  6.                             };  

I have written the above code in MainPage.xaml.cs where txtInputNumber is the ID of TextBox control. So either we can set the input scope at xaml or programmatically. Now let's see about the another type: Text

System.Windows.Input; : is required if we are setting the InputScope programmatically. 
 
Text 

Text is another type for on screen keyboard in windows phone applications, basically we used this type when we need to get input from a textbox as alphabets with combinations of symbols and other characters. Let's see the following code snippet in which I am using the type Text for InputScope values.
 
Code Snippet

(MainPage.xaml)
  1. <phone:PivotItem Header="text">  
  2.                <Grid Background="Transparent">  
  3.                    <Grid.RowDefinitions>  
  4.                        <RowDefinition Height="60"  />  
  5.                        <RowDefinition Height="100"  />  
  6.                        <RowDefinition Height="*" />  
  7.                    </Grid.RowDefinitions>  
  8.   
  9.                    <TextBlock Grid.Row="0" Text="Comment"  FontSize="35" Padding="10"></TextBlock>  
  10.                    <TextBox Name="txtInputText" Height="100" Grid.Row="1" Background="White" Foreground="Orange" >  
  11.                        <TextBox.InputScope>  
  12.                            <InputScope>  
  13.                                <InputScopeName NameValue="Text"  />  
  14.                            </InputScope>  
  15.                        </TextBox.InputScope>  
  16.                    </TextBox>  
  17.                </Grid>  
  18. </phone:PivotItem>  
 Or we may use it as in the following code snippet screenshot,



Output 

Figure 6: Text Keyboard
 
EmailNameOrAddress

EmailNameOrAddress is another type for InputScope. Basically we can use this type of keyboard when we need to get input from the text box as e-mail address as well as to make more feasible to user to type e-mail address shortly. 
Note: Basically this keyboard has a key with a combination of key for internet domain like .com, .in or others - it's dependent on the language of device/phone which you are using.
 
Code Snippet 
  1. <phone:PivotItem Header="email">  
  2.                 <Grid Background="Transparent">  
  3.                     <Grid.RowDefinitions>  
  4.                         <RowDefinition Height="60"  />  
  5.                         <RowDefinition Height="100"  />  
  6.                         <RowDefinition Height="*" />  
  7.                     </Grid.RowDefinitions>  
  8.   
  9.                     <TextBlock Grid.Row="0" Text="E-mail"  FontSize="35" Padding="10"></TextBlock>  
  10.                     <TextBox Name="txtInputEmail" Height="100" Grid.Row="1" Background="White" Foreground="Orange" >  
  11.                         <TextBox.InputScope>  
  12.                             <InputScope>  
  13.                                 <InputScopeName NameValue="EmailNameOrAddress"  />  
  14.                             </InputScope>  
  15.                         </TextBox.InputScope>  
  16.                     </TextBox>  
  17.                 </Grid>  
  18. </phone:PivotItem>  
 Output

 
Search

If we use search as a InputScope for a TextBox, it provide the facilities for word suggestion at the time of typing. Suppose we have to type programming, so if we are using this keyboard type as we type pro or prog or progr it will display some suggestions just above the keyboard as programming, progra, any word which start with the word that you have typed yet. 
 
Code Snippet
  1.  <phone:PivotItem Header="Suggestions">  
  2.                <Grid Background="Transparent">  
  3.                    <Grid.RowDefinitions>  
  4.                        <RowDefinition Height="60"  />  
  5.                        <RowDefinition Height="100"  />  
  6.                        <RowDefinition Height="*" />  
  7.                    </Grid.RowDefinitions>  
  8.   
  9.                    <TextBlock Grid.Row="0" Text="Comment"  FontSize="35" Padding="10"></TextBlock>  
  10.                    <TextBox Name="txtInputWithSuggestions" Height="100" Grid.Row="1" Background="White" Foreground="Orange" >  
  11.                        <TextBox.InputScope>  
  12.                            <InputScope>  
  13.                                <InputScopeName NameValue="Search"  />  
  14.                            </InputScope>  
  15.                        </TextBox.InputScope>  
  16.                    </TextBox>  
  17.                </Grid>  
  18. </phone:PivotItem>             
Output

 

Chat

When we do chat with our friends and we need some symbols to represent our emotions, like smile, sad, etc. So if we are developing a application for chat purpose or where we need to accept input as emotions with some text then we can use this type of InputScope values.
By default this options is available with type Text. 

Code Snippet 
  1. <phone:PivotItem Header="emotions">  
  2.                 <Grid Background="Transparent">  
  3.                     <Grid.RowDefinitions>  
  4.                         <RowDefinition Height="60"  />  
  5.                         <RowDefinition Height="100"  />  
  6.                         <RowDefinition Height="*" />  
  7.                     </Grid.RowDefinitions>  
  8.   
  9.                     <TextBlock Grid.Row="0" Text="Chating"  FontSize="35" Padding="10"></TextBlock>  
  10.                     <TextBox Name="txtInputWithEmotion" Height="100" Grid.Row="1" Background="White" Foreground="Orange">  
  11.                         <TextBox.InputScope>  
  12.                             <InputScope>  
  13.                                 <InputScopeName NameValue="Chat"  />  
  14.                             </InputScope>  
  15.                         </TextBox.InputScope>  
  16.                     </TextBox>  
  17.                 </Grid>  
  18. </phone:PivotItem>             
Output

   
 
Summary

In this article we read about the different types of on screen keyboard for windows phone development. Here we read about some most popular values of InputScope (Keyboard types). 


Similar Articles