In this tutorial we are going to see how to use the On Screen keyboard effectively for user input that should reach fast. With this keyboard scope we can limit the user or provide the user with the necessary scope of keys that can be entered on the particular input box, we can say it acts like a validation part as well to the input scope. So depending on the input of the data what users are entering we can change the scope with the limitation which provides users with the exact options they are looking to enter. [more]
We can specify the scope to different input controls with different keyboards that are available as part of the available scope. Let us see on how to make use of this On Screen Keyboards with different inputs scopes one by one. Open Visual Studio 2010 IDE and create a new Silverlight for Windows Phone project with a valid project name as shown in the screen below.
Now drag and drop few controls to the screen, which basically a few text boxes that are use to get the input data in different format. Once we designed the screen with the controls we can see the screen looks like below.
Xaml Code:
<phone:PhoneApplicationPage
x:Class=”F5debugHowto34.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” d:DesignWidth=”480″ d:DesignHeight=”768″
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=”Auto”/>
<RowDefinition Height=”*”/>
</Grid.RowDefinitions>
<!–TitlePanel contains the name of the application and page title–>
<StackPanel x:Name=”TitlePanel” Grid.Row=”0″ Margin=”12,17,0,28″>
<TextBlock x:Name=”ApplicationTitle” Text=”F5debug How to Series” Style=”{StaticResource PhoneTextNormalStyle}”/>
<TextBlock x:Name=”PageTitle” Text=”Keyboard” Margin=”9,-7,0,0″ Style=”{StaticResource PhoneTextTitle1Style}”/>
</StackPanel>
<!–ContentPanel – place additional content here–>
<Grid x:Name=”ContentPanel” Grid.Row=”1″ Margin=”12,0,12,0″>
<TextBlock Height=”30″ HorizontalAlignment=”Left” Margin=”46,63,0,0″ Name=”textBlock1″ Text=”Name” VerticalAlignment=”Top” />
<TextBox Height=”72″ HorizontalAlignment=”Right” Margin=”0,38,20,0″ Name=”textBox1″ Text=”" VerticalAlignment=”Top” Width=”310″ />
<TextBlock Height=”30″ HorizontalAlignment=”Left” Margin=”46,128,0,0″ Name=”textBlock2″ Text=”Age” VerticalAlignment=”Top” />
<TextBox Height=”72″ HorizontalAlignment=”Right” Margin=”0,103,20,0″ Name=”textBox2″ Text=”" VerticalAlignment=”Top” Width=”310″ />
<TextBlock Height=”30″ HorizontalAlignment=”Left” Margin=”46,192,0,0″ Name=”textBlock3″ Text=”Email” VerticalAlignment=”Top” />
<TextBox Height=”72″ HorizontalAlignment=”Right” Margin=”0,167,20,0″ Name=”textBox3″ Text=”" VerticalAlignment=”Top” Width=”310″ />
</Grid>
</Grid>
</phone:PhoneApplicationPage>
Now we are done with the design, we need to make sure that in Name text box we should have option to enter alphabets and for age text box to enter the numeric. We can see how to change the scope for each of the text boxes in this tutorial. We first add our code behind which instantiates the respective classes. To do that just go to the code behind and first add the USING handler code on top with the existing using statements as shown in the code below.
using Microsoft.Phone.Tasks;
Now add the below code behind in the constructor which initializes first as shown in the code below.
Code Behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
namespace F5debugHowto34
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
this.Loaded += new RoutedEventHandler(MainPage_Loaded);
}
private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
InputScope isScope1 = new InputScope();
InputScopeName isScopeNumber = new InputScopeName();
isScopeNumber.NameValue = InputScopeNameValue.Number;
isScope1.Names.Add(isScopeNumber);
textBox2.InputScope = isScope1;
InputScope isScope = new InputScope();
InputScopeName isScopeName = new InputScopeName();
isScopeName.NameValue = InputScopeNameValue.EmailUserName;
isScope.Names.Add(isScopeName);
textBox3.InputScope = isScope;
}
}
}
Here for the Name field we keep it empty as the scope is not limited as name can contain alphabets and names, but for the Age and Email we have limited and provided with the different keyboards as shown in the code above. We can see the difference in the keyboards in our output screens at the bottom of this article. In the Input Scope name value we have many properties that are limited based on the usage as shown in the screen below.
We can limit it based on the requirement which gives more flexibility and also provides an option for user to enter the details quickly. Now we are done with our code, just run the application by pressing F5 directly from the keyboard or we can use the Build and execute the project option from the tool bar to run the application. Once the Build is successful we can see the Windows Phone emulator with the application and the expected outputs as shown in the screens below.
Output Screens:
As you can see in the screens above the input keyboard scope changes as and when the respective text box is clicked to enter the user details by the end user. So in this article we have seen how to make use of the On-Screen keyboard scope effectively which provides flexibility to the end user to enter the data with ease. That’s it from this tutorial on Windows Phone see you all in the next tutorial soon. Mean while Happy Programming!!!