Touchscreen Keyboard UserControl

• Download source files - 465 Kb
• Download demo project - 10.2 Kb

Introduction

Long story short....

For a touch-screen enabled application for a local museum, I needed an onscreen keyboard for visitors to enter comments, search criteria, and whatever else may crop up during the design. After searching online, I found plenty of keyboards, but none that fit the bill. Most were just too small for use with fingers, or were otherwise unsuitable. I do not want users to be able to hit the Windows key, or use function keys, CTRL keys, etc. I did find one that almost fit the bill - I could design my own layout with keys of my choice, it was sizeable, it remained on top, it was almost perfect. The problem was they wanted money for it! Well, that and a few other minor but workable details.

The solution: make my own. Utilizing my vast experience with C# (or any other version of C) totaling nearly 3 weeks now, I set out to make my own user control. The first step was to learn what it was and how to make one. The second step was to do it.

To get the demo to compile correctly, first open and build the source files, then open the demo file and delete TouchscreenKeyboard from the References file in the Solution Explorer, then re-add it with Add Reference / Browse / {add TouchscreenKeyboard.dll from the directory you saved the SRC file to}.

Creating the Keyboard

The first step was to make a keyboard which, for this example, is just a JPG image I made using Paint - I tried to photograph my own keyboard, but because of the flash-glare, I couldn't get a workable picture to restructure. I decided to make three different types of keyboards, one with a standard QWERTY layout, one where I reordered the letter keys alphabetically, and the third for younger kids. The keyboard can be set both at design time and changed programmatically without affecting any existing user-typed text. The user control consists of just four PictureBoxes, one holding the selected keyboard, and three "empty" ones used to simulate the Shift and Caps Lock keys depressed.

Note that for the kids keyboard, the entire keyboard is replaced (one has lowercase and the other has uppercase letters), and the three PictureBoxes are hidden.

The next step was to layout the grid for determining which key was pressed. I simply divided the keyboard into two sections, the main key section, and the cursor movement section, then split each into rows, and columns for each row, resulting in a (x,y) range for each key. The standard and alphabetical keyboards share the same grid, and I use Swith Case code to swap letters if required. The kids keyboard required its own grid. About halfway through, I realized that I need to account for resizing the control, so hard-coding (x,y) coordinates and using the mouse-click coordinates would not work. The simple solution: all locations are merely a ratio of the total length and width of the keyboard. Obviously, it is easier to adjust the mouse-click position than to adjust the position of each key, so using the original size of the keyboard, a resized (x,y) mouse-click coordinate would be determined as shown in the control's MouseClick event:

private void pictureBox1_MouseClick(object sender, MouseEventArgs e)
{
     Single xpos = e.X;   // mouse X coordinate

     Single ypos = e.Y;   // mouse Y coordinate


     xpos = 993 * (xpos / pictureBox1.Width);  // 993 = fullsize width

     ypos = 282 * (ypos / pictureBox1.Height); // 282 = fullsize height


     mstrKeyPressed = HandleTheMouseClick(xpos, ypos);
     KeyboardEventArgs dea = new KeyboardEventArgs(mstrKeyPressed);
     OnKeyThrown(dea);
}

The same methodology is used to determine the (x,y) coordinates for locating the Shift and Caps Lock PictureBoxes, and their new sizes. This is done within the controls' SizeChanged event.

private void pictureBoxKeyboard_SizeChanged(object sender, EventArgs e)
{
     // position the capslock and shift down overlays


     pictureBoxCapsLockDown.Left = 
       Convert.ToInt16(pictureBoxKeyboard.Width * 5 / 993);
     pictureBoxCapsLockDown.Top = 
       Convert.ToInt16(pictureBoxKeyboard.Height * 115 / 282);
     pictureBoxLeftShiftDown.Left = 
       Convert.ToInt16(pictureBoxKeyboard.Width * 5 / 993);
     pictureBoxLeftShiftDown.Top = 
       Convert.ToInt16(pictureBoxKeyboard.Height * 169 / 282);
     pictureBoxRightShiftDown.Left = 
       Convert.ToInt16(pictureBoxKeyboard.Width * 681 / 993);
     pictureBoxRightShiftDown.Top = pictureBoxLeftShiftDown.Top;


     // size the capslock and shift down overlays


     pictureBoxCapsLockDown.Width = 
       Convert.ToInt16(pictureBoxKeyboard.Width * 110 / 993);
     pictureBoxCapsLockDown.Height = 
       Convert.ToInt16(pictureBoxKeyboard.Height * 55 / 282);
     pictureBoxLeftShiftDown.Width = 
       Convert.ToInt16(pictureBoxKeyboard.Width * 136 / 993);
     pictureBoxLeftShiftDown.Height = 
       Convert.ToInt16(pictureBoxKeyboard.Height * 55 / 282);
     pictureBoxRightShiftDown.Width = 
       Convert.ToInt16(pictureBoxKeyboard.Width * 135 / 993);
     pictureBoxRightShiftDown.Height = pictureBoxLeftShiftDown.Height;
}

For the standard and alphabetical keyboards, I wanted them to behave like regular keyboards, that is Caps Lock on will only return capitalized letters, and not ! instead of 1. This is handled by the functions HandleShiftableKey(string theKey) and HandleShiftableCaplockableKey(string theKey). For this control, Shift remains active for one key-press, and Caps Lock remains on until clicked again.

As shown in the demo project, the value of the key pressed is returned via the control's UserKeyPressed method.

private void keyboardcontrol1_UserKeyPressed(object sender, 
             KeyboardClassLibrary.KeyboardEventArgs e)

// this is demo project code showing

// how the control can be used

{
     // ensures focus is on the textbox control

     richTextBox1.Focus();
     // Sendkeys.Send(key) acts as though

     // a standard keyboard key was pressed.

     SendKeys.Send(e.KeyboardKeyPressed);
}

That's pretty much it. The source file contains everything for creating the control, and the demo project contains everything for the sample application pictured above. There isn't a whole lot of code, so tracing it to see how it works (or controls in general) should be easy. This is my first control and the first article I've ever written, so I'd appreciate any comments.

Update History

April 06, 2006

• Replaced the single keyboard with the three different types of keyboards.
• Added property KeyboardType to the control to select the type of keyboard to display.
• Replaced simulated Shift and Caps Lock LEDs with depressed-key images.