Silverlight On Mobile : InputScope in Windows Phone 7

After a long break,I am back here finally.Well, You must have already downloaded the latest RTM bits of Windows Phone 7,If not already then download from here. In my upcoming post I will surely cover the new things like Pivot Viewer and newly added stuff in RTM bits of Windows Phone 7.Now lets focus on today’s topic.This is very short post but its important to know the InputScope in Windows Phone 7 since we will need that every now and then while asking user to key in data for your application.Every phone has keyboard, so what so great about this InputScope in Windows Phone 7?

This is actually known as SIP (Software Input Panel) which is a virtual keyboard which get invoke on screen once your Textbox or the equivalent control is focused and awaits for user input. Advantage of InputScope is to offer wide range of ways by which one can enter data. These are Text,Numeric,Chat Symbols, Telephone Numbers etc. While surfing I found out that there are around 62 InputScopes for Windows Phone 7. There are two ways we can implement this InputScopes which are via XAML or via Code. I personally recommend that if you know what are your fields and what input they are suppose to take then do it via XAML, Otherwise you can do it programmatically as well by looping over various types of InputScopes. Lets first see how the default InputScope looks like as :

Above is the default layout of the virtual keyboard of Windows Phone 7. This InputScope is “Default”.Now lets see how we can apply it.

XAML Code :

<TextBox InputScope="Number" Height="73" />

Above is the one approach,Another approach is to embed InputScope between opening closing tag like this :

<TextBox TextWrapping="Wrap" VerticalAlignment="Top">
     <TextBox.InputScope>
            <InputScope>
                 <InputScopeName NameValue="Digits"/>
            </InputScope>
     </TextBox.InputScope>
</TextBox>

C# Code :

NameValue are actually generated as Enum and you can have InputScope class from Namespace System.Windows.Input. So for doing this via code, you will be referring System.Windows.Input namespace.When you don’t specify any value it is treated as “Default”. The “Text” InputScope is something different than “Default”. “Text” provides suggestions as well once you start key in the textbox. Take look at this :

Here is sample code of Registration App where I am showcasing various InputScopes :

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">           
            <TextBlock Height="33" Margin="0,39,0,0" TextWrapping="Wrap" Text="Name" VerticalAlignment="Top" Grid.Column="1" HorizontalAlignment="Left" Width="88" d:LayoutOverrides="GridBox" FontSize="21.333"/>
            <TextBlock Height="43" Margin="0,114,0,0" TextWrapping="Wrap" Text="Age" VerticalAlignment="Top" Grid.Column="1" HorizontalAlignment="Left" Width="88" FontSize="21.333"/>
            <TextBlock Height="45" Margin="0,189,0,0" TextWrapping="Wrap" Text="E-mail" VerticalAlignment="Top" Grid.Column="1" HorizontalAlignment="Left" Width="73" FontSize="21.333"/>
            <TextBlock Margin="4,266,0,0" TextWrapping="Wrap" Text="Telephone" Grid.Column="1" HorizontalAlignment="Left" Width="104" d:LayoutOverrides="GridBox" Height="32" VerticalAlignment="Top" FontSize="21.333"/>
           
            <TextBox InputScope="Number" Grid.Column="1" Height="73" Margin="108,22,8,0" TextWrapping="Wrap" VerticalAlignment="Top"/>              
            <TextBox Grid.Column="1" Height="73" Margin="108,95,8,0" x:Name="AgeOfUser" TextWrapping="Wrap" VerticalAlignment="Top">
                <TextBox.InputScope>
                    <InputScope>
                        <InputScopeName NameValue="Digits"/>
                    </InputScope>
                </TextBox.InputScope>
            </TextBox>
            <TextBox Grid.Column="1" Height="73" Margin="108,169,8,0" TextWrapping="Wrap" VerticalAlignment="Top">
                <TextBox.InputScope>
                    <InputScope>
                        <InputScopeName NameValue="EmailNameOrAddress"/>
                    </InputScope>
                </TextBox.InputScope>
            </TextBox>
            <TextBox Grid.Column="1" Margin="108,242,8,292" TextWrapping="Wrap">
                <TextBox.InputScope>
                    <InputScope>
                        <InputScopeName NameValue="TelephoneNumber"/>
                    </InputScope>
                </TextBox.InputScope>
            </TextBox>
            <Button Content="Submit" Grid.Column="1" Height="75" Margin="116,0,185,174" VerticalAlignment="Bottom"/>           
        </Grid>
    </Grid>

Output will be like this :

Let’s see various other InputScopes :

 

This one is my favorite : Chat !

Well,That’s all from me on InputScope in Windows Phone 7 at the moment, you can check more information on MSDN here

There is a nice “tap tap” sound while you type with this SIP, however at the moment you might not be able to play with it but you can surely enjoy that sound on emulator, For more on this Sound and related stuff, check out this Channel 9 Screencast.

I am coming back here with more stuff on WP7 very vey soon, I know I am bit lazy and posts are getting delay for some reason due to my schedule but I am working on it very hard and soon you will see tons of new things here. Till then..have fun !

Vikram.