|
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.
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.
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!
Need Help?
If you have questions, need some assistance on this topic, or just want to
chat - please drop by our friendly forums
and post your question. There are a lot of knowledgeable and witty people who
would be happy to help you out. Plus, we have a
large collection of smileys
you can use
Share
Did you enjoy reading this and found it useful? If so, please share it with
your friends:
If you didn't like it, I always like to hear how I can do better next time.
Please feel free to contact me directly at kirupa[at]kirupa.com.
Cheers!
|
Optimizing the
On-Screen Keyboard
