Dynamically Displaying the Keyboard

Make your Pocket PC applications more intuitive by providing the input panel when it is needed and removing it when it is not.

A Codeguru forum member recently asked how to display the input panel in their mobile applications. Displaying the input pane (shown in figure 1 in keyboard mode) is easy when you are creating a Pocket PC application. In fact, it is so easy, that you should take advantage of hiding and showing it at whim.


Figure 1: The Input Panel in keyboard mode

To display the input pane, the first thing you need to do is to add an Input panel to your Pocket PC application’s form. This is a standard mobile control that can be dragged from the tool box and dropped onto the form. Once on your form, you can choose name it as anything you like.

Once you have an input panel, you will want to decide when to enable or disable it. In general, you will determine this based on the control that a person is entering. If you have someone moving to a button, then they will likely not need the input panel. The input panel becomes much more useful if they are on a textbox.

I will illustrate how to display the input panel on a text box. The procedure would be identical for any control.

The first step is to create an event handler for the GotFocus event. This even happens when the control first gets focused. As such, you can use the GotFocus event to do things prior to the user actually doing anything with the control. In the case of a textbox, this is before they are entering any text. You can create this event by selecting the control, viewing properties, and then clicking on the properties icon (the lightening bolt – ). This will list the events. Double clicking on GotFocus will create the event in your code.

In the GotFocus event, you will want to simply set the Enabled property of the InputPanel control you added earlier. You’ll set this to true. This will enable — thus display — the input panel. The event handler should look something like:

private void textBox2_GotFocus(object sender, EventArgs e)
{
    this.inputPanel1.Enabled = true;
}

When the user leaves this control, you will want to hide the InputPanel control. To do this, create a second event handler. This time, use the On_LostFocus event. This time you will set the enabled value to false, effectively hiding the InputPanel.

I’ve created a simple application to illustrate this tip. The application has three textboxes (each with a label) and a button. What you will see is that for the middle textbox, the InputPanel is displayed. For the others it is not. You can tab between the three textboxes and the button and see how the application behaves.

I’ve also added one other feature to the application that you might find useful. When control is passed to the middle textbox, I also change the background color of the control to show that it is the selected one. When focus leaves the control, I return the color back to its original state. This type of functionality could also be applied to all the textboxes on the form.

Listing 1 shows the key methods from my program. Figures 2 and 3 show screen shots from the running program. In figure 2, the second textbox has focus. In figure 3, the second textbox does not have focus. The complete listings can be found in the attached source files.

Listing 1: Key routines for the keyboard program.

Color tmpColor = new Color();

private void btnGo_Click(object sender, EventArgs e)
{
    lblDisplay.Text = textBox1.Text + " : " +
                      textBox2.Text + " : " +
                      textBox3.Text;
}

private void textBox2_GotFocus(object sender, EventArgs e)
{
    tmpColor = textBox2.BackColor;
    textBox2.BackColor = Color.Beige;
    this.inputPanel1.Enabled = true;
}

private void textBox2_LostFocus(object sender, EventArgs e)
{
    this.inputPanel1.Enabled = false;
    textBox2.BackColor = tmpColor;
}


Figure 2: TextBox2 does not have focus


Figure 3: TextBox2 has focus

In conclusion…

The ability to enable and disable the InputPanel can make your PocketPC applications much more responsive to a users needs. Additionally, by using events such GotFocus, you can make your applications provide additional

# # #

More by Author

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Must Read