Hey Guys. Hope you liked my previous post for creating a simple Windows Phone 7 navigation application.

So in this post we will learn as how how can we optimize the virtual keyboard on WP7 for various input controls.

Open the solution we created in the previous post for creating a simple Windows Phone 7 navigation application or else you can download the solution here.

  • Now open contact.xaml in Expression Blend and go to the ContentPanel inside LayoutRoot. Now open the properties of ContentPanel and expand the layout properties and then set the VerticalScrollBarVisibility to Auto

 

VerticalScrollBar

VerticalScrollBar

  • Select ContentPanel in the design surface in the centr and then double click the grid contol in the toolbar. This will add a grid inside the ContentPanel. Now right click the grid and select AutoSize –> Fill.

 

VerticalScrollBar

VerticalScrollBar

  •  Now just just drang and drop TextBlocks and TextBoxes as show in the image below:

    TextBoxes & TextBlocks

    TextBoxes & TextBlocks

  • Now come the coolest feature in input controls. It is a property called InputScope. Now select the TextBox for Phone and go to properties –> common properties –> InputScope and set it to TelephoneNumber. Similarly change the testbox properties of other contols to below specified values and you will see the magic when you run the application and all this is done without writing any code.

            First Name textbox: Set InputScope to PersonalGivenName
Last Name textbox: Set InputScope to PersonalSurName
Email textbox: Set InputScope to EmailUserName
            Web Site textbox: Set inputScope to Uri
            Address textbox: Set InputScope to AddressStreet
            City textbox: Set InputScope to AddressCity
            State textbox: Set InputScope to AddressStateOrProvince

InputScope

InputScope

  • Now while setting the input scope you might have seen a large number of options but thats not the full list. The full list of the InputScope instances is below:

    InputScope instances

    InputScope instances

Download the source code by clicking on the button [button link=”http://minus.com/mV0RoTjnG” style=”download” color=”green”]Download Source Code[/button]
Do let me know your feedback on this post. Thanks