Click here to Skip to main content
15,861,125 members
Articles / Programming Languages / C#
Article

Touchscreen Keyboard UserControl

Rate me:
Please Sign up or sign in to vote.
4.78/5 (68 votes)
6 Apr 2006CPOL4 min read 507K   53.9K   231   108
A basic keyboard usercontrol suitable for touchscreen displays.

Sample Image - touchscreenkeyboard.jpg

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.

Sample Image - standardkeyboard.jpg

Sample Image - alphabeticalkeyboard.jpg

Sample Image - kidsupperkeyboard.jpg

Sample Image - kidslowerkeyboard.jpg

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:

C#
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.

C#
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.

C#
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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Web Developer
United States United States
For the past 11 years or so I worked exclusively on developing client/server and web applications with Oracle Forms. I needed to learn something new and recently found all those nice freebie Visual Studio Express applications so I spent an afternoon downloading all of them, along with the .NET 2 framework and the SQL Server 2005 Express edition and a few other goodies.

My first project was a match scheduling application I made for my online Call of Duty 2 clan using Visual Web Developer tied to a SQL Server database. I found an inexpensive hosting provider, and that's where it now lives.

I started playing with C# in early March 2006 and realized it would be of use for a project I will be working on - a touchscreen display application for a local museum, so that is currently what I am concentrating on.

Comments and Discussions

 
QuestionHow to make it functional? Pin
VipinKumar Maurya16-Feb-16 1:45
VipinKumar Maurya16-Feb-16 1:45 
Questionstuck in interfacing my wireless keyboard with windows Pin
Member 1199080516-Sep-15 22:39
Member 1199080516-Sep-15 22:39 
GeneralGreat! Pin
GabrielArki15-Sep-14 11:49
GabrielArki15-Sep-14 11:49 
GeneralThank you so much Pin
Hannes Calitz25-Mar-14 21:44
Hannes Calitz25-Mar-14 21:44 
QuestionCan't use in Visual Studio 2010 Pin
Lucas Juan22-Jan-14 19:06
Lucas Juan22-Jan-14 19:06 
AnswerRe: Can't use in Visual Studio 2010 Pin
Member 1063469310-Mar-14 3:16
Member 1063469310-Mar-14 3:16 
GeneralMy vote of 2 Pin
Thornik26-May-13 15:13
Thornik26-May-13 15:13 
QuestionHandleTheMouseClick Pin
jsegreti1-Feb-13 3:08
jsegreti1-Feb-13 3:08 
Bughow i can find the touchscreenKeyboard.dll Pin
luigi luccarelli27-Sep-12 22:10
luigi luccarelli27-Sep-12 22:10 
Questionhelp me show and use this keyboard Pin
daghune7-Aug-12 0:29
daghune7-Aug-12 0:29 
GeneralMy vote of 5 Pin
oPhoenixo3-Aug-12 3:10
oPhoenixo3-Aug-12 3:10 
GeneralMy vote of 5 Pin
PheoBlue29-Jul-12 4:23
PheoBlue29-Jul-12 4:23 
QuestionSpanish Keyboard Pin
Ranga111128-Feb-12 20:47
Ranga111128-Feb-12 20:47 
GeneralMy vote of 5 Pin
ProEnggSoft27-Feb-12 22:33
ProEnggSoft27-Feb-12 22:33 
QuestionAwesome Sample Pin
Sunnyonfire27-Feb-12 20:55
Sunnyonfire27-Feb-12 20:55 
QuestionSlow type rate Pin
Member 833269717-Jan-12 2:51
Member 833269717-Jan-12 2:51 
First off: I want to say thank you for making this control and releasing it to the public for free use. It looks good and just works. Great job!

I noticed that when using the control, the input rate is very slow. I am using the control on a one-off touch screen kiosk application. If I try to type very fast, some of the letters do not show up. I am perplexed as to where the delay is coming from. Even when using the mouse on my development system, clicking a letter rapidly does not type every click. This makes typing words with double letters (like the word "letter" - two t's) a pain as the second 't' does not show up if you do not insert a delay in your typing which can be hard to remember.
AnswerRe: Slow type rate Pin
Picticon217-May-12 4:03
Picticon217-May-12 4:03 
GeneralMy vote of 4 Pin
julioalfa20-Nov-11 9:51
julioalfa20-Nov-11 9:51 
QuestionExcellent Job Pin
maleEngineer23-Oct-11 19:22
maleEngineer23-Oct-11 19:22 
BugOther language Pin
cdmax20027-Sep-11 0:20
cdmax20027-Sep-11 0:20 
QuestionRemoving the border of key-board. Pin
Member 79742657-Jun-11 22:57
Member 79742657-Jun-11 22:57 
GeneralNice Control and Easy to Learn to Adapt Pin
SSi_Cincinnati7-Apr-11 9:12
SSi_Cincinnati7-Apr-11 9:12 
GeneralVery good work indeed, thanks much!! Pin
Lord Phoenix5-Mar-11 23:20
Lord Phoenix5-Mar-11 23:20 
GeneralVirtual Keyboard scalable Pin
Oleh Mykhaylovych22-Feb-11 1:16
Oleh Mykhaylovych22-Feb-11 1:16 
GeneralMy vote of 4 Pin
ShoeShiner9-Jan-11 18:42
ShoeShiner9-Jan-11 18:42 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.