Implementation of InputScope in Windows Phone

Introduction

In the age of touch, every smart phone has a Touch Screen. As a result of the enhancement of Touch Screen quality or its architecture, there is one thing in common. It’s multile on-screen touch keypads. In prior phone technology we only have Character Mode, Number Mode or Block Letter Mode. Today, every OS is trying to develop user friendly on-screen keypads. Henceforth, Windows Phone is allowing many input modes to their users. Microsoft calls it InputScope.



So, in this article we will implement a different Input Scope (in other words a different Keypad Mode) in an app.

Background

We will use multiple Text Boxes to show multiple Input Scopes.

It can be used for various purposes in app development.

So, let’s proceed to the implementation.

Procedure First

In this, we directly edit the XAML code by adding an InputScope=”” attribute tag.

Initially we have:

<TextBox Height="72" HorizontalAlignment="Left" Margin="8,45,0,0" Name="phoneNumber" Text="" VerticalAlignment="Top" Width="448" />

Now we will add InputScope to it as in the following:

<TextBox Height="72" HorizontalAlignment="Left" Margin="8,45,0,0" Name="phoneNumber" Text="" VerticalAlignment="Top" Width="448" InputScope="TelephoneNumber" />

Here, we have used the TelephoneNumber Scope for the Text Box.

And from now, whenever we tap on this TextBox we will get a "Telephone Number" scoped keypad.



We have successfully implemented our job. But here we always need to remember InputScope type and that is a tiresome thing. So, it would be great if we could get a list of InputScopes to choose from.

Yes, I m talking about Intelisense.

So, in our next procedure we will try to get Intelisense for InputScope.

Procedure Second

Initially, we have a Text Box whose XAML is:

 

<TextBox Height="72" HorizontalAlignment="Left" Margin="9,144,0,0" Name="IntelisenseText" Text="" VerticalAlignment="Top" Width="447" />

Next, we will change the closing tag.

<TextBox Height="72" HorizontalAlignment="Left" Margin="9,144,0,0" Name="IntelisenseText" Text="" VerticalAlignment="Top" Width="447">

</TextBox>

Now, add these lines inside that TextBox’s Block:

<TextBox.InputScope>

                    <InputScope>

                        <InputScopeName NameValue="____"/>

                    </InputScope>

 </TextBox.InputScope>

While on NameValue, you will get the Intellisense to choose the InputScope Type.

If we choose the URL Input scope then my XAML will be:

<TextBox Height="72" HorizontalAlignment="Left" Margin="9,144,0,0" Name="IntelisenseText"
Text="" VerticalAlignment="Top" Width="447">
                <TextBox.InputScope>
                    <InputScope>
                        <InputScopeName NameValue="Url"/>
                    </InputScope>
                </TextBox.InputScope>
</TextBox>

So, we get:



Conclusion

This is two ways to implement InputScope for any TextBox. You can practice any of them but I suggest the second way. For any issue you may refer to the attached source code.

The list of the most common Input Scopes is:



Fig: EmailNameOrAddress



Fig: Number



Fig: TelephoneNumber



Fig: Text