31 Days of Windows Phone | Day #10: InputScope & TextBoxes

This post is Day #10 in a series called the 31 Days of Windows Phone.

This post is going to focus specifically on the keyboard on Windows Phone 7.  I’m going to cover how to make the keyboard show the characters that are appropriate for the data you’re expecting.  We’ll also talk about the PasswordBox, and how we can customize those as well.  An example code project is included at the end of this post.

Super Awesome Secret Emulator Tip

I’ve heard many people gripe that they can’t use their actual computer’s keyboard when developing apps for Windows Phone 7.  They end up clicking on each key of the keyboard, and their development and testing slows….way….down.  There’s an easy way to make your keyboard work.  Press the Pause/Break key on your keyboard.  It will toggle between using the emulator’s on-screen keyboard, and your physical one.

InputScope

Every TextBox and Password has the ability to have an InputScope assigned to it.  It’s not required, but leveraging them will make your user’s experience much more positive.  For example, these are both  the same Windows Phone 7 keyboard:

Clearly, they’re not *exactly* the same keyboard, but you have to do very little to make them show up.  Here’s the example XAML for the two TextBoxes that prompted the above keyboards:

<TextBox Height="100" />
<TextBox InputScope="TelephoneNumber" Height="100" />

By leveraging InputScope, we can give our users the keyboard that best fills their needs.  If we’re asking them for a phone number, for example, it seems silly to prompt them with an alpha-numeric keyboard.  Here’s a couple of other examples you can use:

URL

This keyboard gives you a “.com” button to finish typing your URLs, but that button, with a long-tap, will also expand to show you .net, .org, .edu, and .co.uk.  Very handy.

Number

This InputScope simply takes you to the standard numeric keyboard first, skipping the alphabetic ones.

Text

You’ll notice the subtle smiley face at the bottom.  Clicking on that takes you to a big list of emoticons…perfect for texting!

                          

TelephoneNumber

This is the one from my example above.  It gives the user a numeric dial pad instead of an alphabetic keyboard.

EmailNameOrAddress

When typing email addresses, there’s three things that we’ll have to include universally.  A period, an @ symbol, and a TLD, like .com or .net.  They’ve included all of those on the primary keyboard for this InputScope.

Getting Intellisense To Work

You may have noticed that when you type InputScope=”” in your TextBox that you don’t get a nice list of all of the InputScopes available to you.  If you use a slightly different (and more verbose) syntax, you can see that entire list.  Here’s how you do it:

<TextBox Height="75">
	<TextBox.InputScope>
		<InputScope>
			<InputScopeName NameValue="Bopomofo" />
		</InputScope>
	</TextBox.InputScope>
</TextBox>

In case you’re curious, Bopomofo is the official phonetic system for transcribing Chinese, especially Mandarin.  But it was too funny sounding a word not to use in this post.  Here’s the full list of InputScope values you’ll find in the Intellisense:

 

Launching a Windows Phone 7 Keyboard Via Code

Sometimes, you want to get keyboard input from your user, even when you don’t want to present them with an actual TextBox.  There’s probably plenty of ways around this, but I’ve been using a handy one that is simple to accomplish.  (If you’re searching for a reason to do this, think of a game of Hangman.  I don’t want the keyboard visible always, but I also don’t want a TextBox on the screen.)

1. Put a button on your page.
2. Put a TextBox on your page, but make sure it’s hidden from the user’s view.  Either position it off screen, make it completely transparent (and in the absolute background), or some other method that allows it to get added to your visual tree, but doesn’t let the user see it.
3. Set an event handler on your button that sets Focus() to the hidden textbox when it’s clicked.
4. That’s it!  This will allow you to show the keyboard without the user seeing a textbox.

I’ve included a specific example of this in the code sample included below.

PasswordBox

There’s not a ton to talk about with the PasswordBox, but there’s a couple of small things I thought you might want to know about.

First, you get a one-second delay from the time the user presses a character on the keyboard until it changes into an “obscurity character.”  You’ve experienced this before, but you may never have thought about it.  For example, it’s when your characters change to bullets or asterisks in a browser.  There’s no delay on your computer, but you’re also FAR more accurate with a standard keyboard.

Second, you can customize what the “obscurity character” is!  If you’d rather use question marks, or some specific character from a specific font, you absolutely can.  Just specify the PasswordChar property.  Check it out:

<PasswordBox x:Name="PassBox" PasswordChar="?" />

Code Examples For InputScope, TextBox and PasswordBox

Tomorrow, we’re going to be talking about the Accelerometer, and how we can gather data from this awesome sensor in the device.