How to Customize On-Screen Keyboard Layout in Windows Phone 7 application ?

While you want to enter some text in your Windows Phone 7 application, the first thing that you will notice is your very own on – screen keyboard. As Windows Phone 7 mobile have a very large screen area, most of the phones does not have an analog keyboard associated with it. Hence your application should provide provision to handle keyboard events directly using on-screen keyboards. There are few flexibilities available to you while you define your input scope, in this post I will demonstrate them with an example.

What is InputScope?

InputScope is a special functionality to the developers to customize how the layout of the keyboard appear to the user while entering data into that particular textbox. Hence you can easily customize the On-Screen Keyboard for your input so that one can easily feed in data fast and easy. For instance, say if you want to take phone number as input,you need only digits and some special characters to be available, on the other hand, email needed alphanumeric characters with @ as symbol. Silverlight introduces the new option to let you specify the InputScope for a particular input. Lets look into the code below :

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition  Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <TextBlock Text="Input some string : "
                VerticalAlignment="Center" Grid.Row="0" Grid.Column="0" />
    <TextBox Grid.Row="0" Grid.Column="1">
        <TextBox.InputScope>
            <InputScope>
                <InputScopeName NameValue="Text" />
            </InputScope>
        </TextBox.InputScope>
    </TextBox>
    <TextBlock Text="Input some Numbers : "
                VerticalAlignment="Center" Grid.Row="1" Grid.Column="0" />
    <TextBox Grid.Row="1" Grid.Column="1" InputScope="Number" />
    <TextBlock Text="Input Web Address : "
                VerticalAlignment="Center" Grid.Row="2" Grid.Column="0" />
    <TextBox Grid.Row="2" Grid.Column="1" InputScope="Url" />
</Grid>

Now if you run your application, you will see the first TextBox will produce an alphanumeric textbox, the second will allow only numeric entry while the last one puts one special keyboard layout with .Com as a special button in it.

Isnt it great ?

InputScope property in TextBox actually takes an object of InputScope (which is a collection of InputScopeNames). So you need to add your InputScopeName elements inside the InputScope and finally assign to InputScope. If you are looking for all the options, just take a look at my first TextBox and hover into the NameValue for the complete enumeration.

If you are looking to apply this from Code, just follow the code :

InputScope scope = new InputScope();
InputScopeName scopename = new InputScopeName();
scopename.NameValue = InputScopeNameValue.Password;
scope.Names.Add(scopename);
this.txtPassword.InputScope = scope;

So eventually Names is an IList inside InputScope to ensure you can able to apply more than one InputScopeNames for one individual TextBox control.

Conclusion

InputScope comes very handy while creating real world applications for Windows Phone 7. Here is a demonstration of how you can customize the on-screen keyboard for fast and easy input of data for your application. I hope this post helps you.