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:

StandardTelephoneNumber

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.

Url

Number

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

Number

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!

Text                           Emoticons

TelephoneNumber

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

TelephoneNumber

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.

EmailNameOrAddressr

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>

intellisense

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:

intellisensevalues 

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.

Download example source code related to InputScope, TextBox, and PasswordBox for Windows Phone 7.

21 thoughts on “31 Days of Windows Phone | Day #10: InputScope & TextBoxes

  1. hello, like your blog,This is all well and good,

  2. Welcome anything that comes to you, but do not long for anything else.

  3. Oh, that lovely title, ex-president.

  4. We don't stop playing because we grow old we grow old because we stop playing.

  5. Each man takes care that his neighbor shall not cheat him. But a day comes when he begins to care that he does not cheat his neighbor. Then all goes well. He has changed his market-cart into a chariot of the sun.

  6. All conservatives are such from personal defects. They have been effeminated by position or nature, born halt and blind, through luxury of their parents, and can only, like invalids, act on the defensive.

  7. A man builds a fine house and now he has a master, and a task for life he is to furnish, watch, show it, and keep it in repair, the rest of his days.

  8. If you pick up a starving dog and make him prosperous, he will not bite you. This is the principal difference between a dog and a man.

  9. The moment we indulge our affections, the earth is metamorphosed there is no winter and no night all tragedies, all ennuis, vanish,-all duties even.

  10. In real life, unlike in Shakespeare, the sweetness of the rose depends upon the name it bears. Things are not only what they are. They are, in very important respects, what they seem to be.

  11. I wonder if there is any way to change the defalut input scope within the textbox launched by SMSComposeTask, if there exists one , could you help me out

  12. Pingback: Getting ready for the Windows Phone 7 Exam 70-599 (Part 5)

  13. Pingback: Getting ready for the Windows Phone 7 Exam 70-599 (Part 5) – www.nalli.net

  14. Hello, are you sure it’s possible to set the InputScope for a PasswordBox? For me I don’t think it actually exists. I was trying to find the control for the phone unlock pin pad.

  15. Is there anyway to stop the delay printing the actual character you have typed into the box and just always print the * or ?

    If your entering a password and someones looking over your shoulder it is hardly secure!

    • I don’t believe you can remove the delay. You could always create your own custom PasswordBox for that using a TextBox, however.

  16. Pingback: Using keyboard on Windows Phone 7 Emulator « Coding behind

  17. Pingback: 31 Days of Windows 8 | Day #15: The On-Screen Keyboard « Blankenblog

  18. BoPoMoFo is not the official transcription system in China: pinyin is.

  19. First off the tutorial was good (too bad you can’t make a custom keyboard for WP8), but I must say that the first tip alone deserves me taking the time to say THANK YOU, you are going to save me soo much time on the emulator using my keyboard now, THANK YOU!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s