Optimizing the On-Screen Keyboard
       by kirupa  |  16 July 2010

Windows Phone devices are pretty much entirely touch-based. While some device flavors may contain a hardware keyboard that you can use, the primary way for you to input text is by tapping on the virtual, on-screen keyboard:

[ the full, default keyboard is shown ]

There is nothing special you need to do to bring up this keyboard. Simply set focus on a TextBox element that is used to receive text input, and your on-screen keyboard will automatically appear.

By default, the full keyboard will be displayed. What this tutorial will show you is how to optimize the keyboard that appears for the type of information a user would be inputting instead.

Getting Started
Make sure you have everything up and running to do Windows Phone development, and go ahead and create a new Windows Phone project in Expression Blend. What we need is to insert a TextBox that will allow our application to receive key input.

To insert a TextBox control, display your Asset panel and search for TextBox. As you are typing, your TextBox will appear almost immediately:

[ find your TextBox control  in your Assets panel ]

Double-click on the TextBox to insert it into your application. Feel free to tweak the width and height as necessary, but don't worry about going overboard:

[ insert your TextBox in your application ]

Now that you have your TextBox inserted, hit F5 to launch the emulator/device and to see what your application actually looks like. If you set focus on your textbox, you will see your on-screen keyboard appear just you saw in my introduction earlier.

Choosing the Right Keyboard Layout
By default, the keyboard that appears is very general and unoptimized for any one particular type of data. You may find that it is better to optimize the on-screen keyboard for the type of text a user would inputting in this particular TextBox. For example, a TextBox that is used to receive a phone number may not need all of the alphabetical keys:

[ the numerical keypad is displayed! ]

To specify what kind of keyboard to display, make sure your TextBox is selected in Expression Blend. In your Properties Inspector, look at the Common Properties category:

[ the treasure is buried in the Common Properties category ]

The property that controls what kind of input to optimize your keyboard for is the InputScope property. Click on the drop-down next the InputScope property to see all of the optimized layouts that you can pick from:

[ pick a layout from your InputScope property ]

The number and types of keys displayed depend entirely on which layout you choose for your InputScope. For example, if you select Number, your on-screen keyboard will be optimized to display numerical keys only. Go ahead and select a layout that you want to optimize for to set your InputScope property:

[ once your InputScope is set, you are good to go! ]

Once your InputScope property has been set, that is all you need to do. The next time you preview your application, setting focus on the TextBox will display a keyboard whose layout is optimized based on the layout you specified for InputScope!

While this is very simple, specifying the InputScope may be one of the nicest things you can do for people when you require text input. Because the on-screen keyboard is small to fit on the screen, showing only the keys that you need is something that your users would be thankful for!

Got a question or just want to chat? Comment below or drop by our forums (they are actually the same thing!) where a bunch of the friendliest people you'll ever run into will be happy to help you out!

When Kirupa isn’t busy writing about himself in 3rd person, he is practicing social distancing…even on his Twitter, Facebook, and LinkedIn profiles.

Hit Subscribe to get cool tips, tricks, selfies, and more personally hand-delivered to your inbox.



kirupa.com's fast and reliable hosting provided by Media Temple.