This article is Day #15 in a series called 31 Days of Windows 8.  Each of the articles in this series will be published for both HTML5/JS and XAML/C#. You can find additional resources, downloads, and source code on our website.

Today we are going to take a look at the on-screen keyboard in Windows 8.  Microsoft does not seem to make a distinction in naming between the keyboard that appears when you tap your finger on a TextBox control and the one that can be found in the Ease of Access Center.  We are going to focus today on the keyboard that looks like this:

The Ease of Access On-Screen Keyboard, on the other hand, is a tool designed for making a computer easier to use for those that may not be able to use a keyboard at all.  It can be found by opening the Ease of Access center on your machine…

And clicking the “Start On-Screen Keyboard” option.  You will discover a keyboard that looks like this, instead:

The primary focus of this keyboard is to allow a user to completely use Windows without having a keyboard attached to their computer.  It’s not customizable, and doesn’t respond to any of the code we are going to write in this article.  This keyboard is also one of the only windows that can be placed over the Start Screen.  Check this out:

OK, so I’ve spent the first few paragraphs of this article talking about a keyboard that is NOT the focus of this article.  Why?  There are two reasons:

1. If you are using a non-touch device when you work through this article (or on your own app and want to use the features of the regular touch keyboard), you’ll find that mouse clicks don’t launch the touch keyboard on your machine.  So you’ll search the web looking for a solution to make it show up.
2. As you search around the web looking for more information about manipulating the on-screen keyboard in Windows 8, you’re going to get plenty of articles on the Ease of Access one, which is likely not what you wanted. If you do find an appropriate article about how to turn on the touch keyboard, it’s likely this one, because I wasn’t able to find any way to make this work.

The primary reason for this is because this is one of the few times that Windows 8 makes a distinction between a mouse click and and finger tap.  If you mouse click on a TextBox, Windows 8 assumes you are using a real keyboard, even if you’re using a touch-enabled machine.  A finger-tap, however, will produce that keyboard we’re going to talk about today.

To save you some frustration, when developing your application that will take advantage of the on-screen keyboard, use the simulator if you’re not working on a touch machine.  It allows you to simulate “taps” with your mouse.  Here’s where you set it:

OK, now that we’ve gotten all that out of the way, let’s get this actual article started.

Using the On-Screen Keyboard

First, let’s take a look at the default states of the on-screen keyboard that the user can navigate to any time the keyboard is open.  We saw the standard QWERTY view earlier:

But there are several more.  When we build an application, our primary focus, above all else, should be to make the tasks a user needs to accomplish as easy as possible.  (That IS on the top of your mind, right?)  To that end, the on-screen keyboard can be manipulated to make that happen.  There is a property that can be set on TextBox controls called InputScope that allows us to pop the appropriate keyboard for the task at hand.  If an InputScope is not specified, the normal keyboard will be displayed.  Here’s what the code looks like:

<TextBox InputScope="EmailSmtpAddress" />

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

You will find, as you start playing with InputScope, that there are actually 18 different InputScope values that can be used (but for English-speaking users, there’s really only three different keyboards at this time).  They are (in alphabetical order):

• AlphanumericFullWidth
• AlphaNumericHalfWidth
• ChineseFullWidth
• ChineseHalfWidth
• Default
• EmailSmtpAddress
• HangulFullWidth
• HangulHalfWidth
• Hanja
• Hiragana
• KatakanaFullWidth
• KatakanaHalfWidth
• NativeScript
• Number
• NumberFullWidth
• Search
• TelephoneNumber
• Url

The only input scope values that respond to computers set to display English are: Default, EmailSmtpAddress, Number, Search, TelephoneNumber, and Url.  Here’s what they look like:

EmailSmtpAddress (added “@” and “.com buttons

Url (added “/” and “.com” buttons, smaller space bar, Go key)

Number and TelephoneNumber (shows the default numeric keypad)

Search (same a default keyboard, but Enter key replaced with Search key)

The rest of the InputScope values are generally focused on East Asian languages, and while I mean them no disrespect, I don’t know enough about those character sets to have an intelligent discussion about the subtle differences between FullWidth and HalfWidth characters.

In addition to our InputScope values, it’s important to understand the other options our users can navigate to at any time when the keyboard is on the user’s screen.  Here they are:

Capital Letters

Emoji (there’s actually 30 PAGES of emoji, click here to see all of them)

Symbols (a second set of symbols after the set shown with the Number keyboard)

Split Keyboard (a user choice, this keyboard is optimized for thumb typing)

Inking Keyboard (this keyboard does handwriting recognition)

Obviously, this is a huge set of input points for us as developers, and by providing the right keyboard for the job will make your app more useful to your users.  There’s also one more keyboard layout, and that’s the one for a PasswordBox control.  A PasswordBox control shows symbols instead of the actual characters that were typed, and the keyboard looks like this:

You’ll notice that it also has a “Hide Keypress” button.  There are times when people can see your machine (especially if you’re projecting it to an audience) and you don’t want them to be able to see your keystrokes for your password.  This button doesn’t highlight the buttons when they are tapped.  (You’ll also notice that the Emoji button is disabled, as those characters should not be used for a password.)

In the past, I have written articles about TextBoxes and virtual keyboards, and went on and one about the use cases where you want to pop-up the keyboard without showing the user their input.  A great example of this might be the game HANGMAN.  You want the user to be able to choose a letter, but then you want to dismiss the keyboard so that the user can see their progress.

In Windows 8, this is no longer possible.  You can’t launch the on-screen keyboard via code at all.  In fact, setting the focus on a TextBox control won’t do anything but make the cursor blink.  It specifically requires a tap event (not a mouse click) to occur on the TextBox before the on-screen keyboard will appear.  (This is the same reason why you should use the Simulator when debugging this type of functionality in your apps.)

Summary

Today, we’ve covered off on the variety of keyboards that are available to our users.  We can leverage InputScope values to show the right keyboard at the right time.  In addition, I learned that there are 30 entire pages of Emoji characters to use as well.  (If it’s not obvious, I benefit greatly from writing these articles as well!)

If you would like to see a working application that uses every one of the InputScope values, click the download icon below:

Tomorrow, we are going to dive into using Context Menus to offer our user contextual commands directly on the app surface.  See you then!

Here’s that huge list of Emoji, in case you forgot to click on it: