Click here to Skip to main content
15,860,972 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

 
GeneralRe: Trying to access a textfield on another form Pin
Phil301-Mar-10 22:01
Phil301-Mar-10 22:01 
Generala simple question Pin
danceoften14-Dec-09 3:19
danceoften14-Dec-09 3:19 
GeneralTab key Pin
PQSIK12-Sep-09 7:33
PQSIK12-Sep-09 7:33 
GeneralRe: Tab key -- Answered Pin
PQSIK12-Sep-09 14:50
PQSIK12-Sep-09 14:50 
GeneralAwesome Work! A real usable piece of work! Pin
gilbert_leon4-Sep-09 17:26
gilbert_leon4-Sep-09 17:26 
Generalplz help me out Pin
harmanpreethind21-Aug-09 2:40
harmanpreethind21-Aug-09 2:40 
GeneralGood Control Pin
aries78113-Aug-09 20:47
aries78113-Aug-09 20:47 
QuestionNice work!! but can you help me a bit? Pin
daffy_20038-Jul-09 17:29
daffy_20038-Jul-09 17:29 
Hi.
I wanna implement your keyboard to my application whereby the user need to double click the textbox then the keyboard appears.
How to go about in doing it?
please help and thanks!!
Generalcode project typingmaster Pin
boy_vipvip3-May-09 6:39
boy_vipvip3-May-09 6:39 
QuestionIs there any possiblities to set both Mouse Mode and touch screen mode? Pin
Khathar24-Feb-09 17:58
Khathar24-Feb-09 17:58 
AnswerRe: Is there any possiblities to set both Mouse Mode and touch screen mode? Pin
workingOnZen26-Apr-09 8:14
workingOnZen26-Apr-09 8:14 
QuestionCan we create a touch screen Project in VC 6.0 ? Pin
Khathar23-Feb-09 18:45
Khathar23-Feb-09 18:45 
GeneralSLOVENIAN KEYBOARD LAYOUT Pin
mmf28-Jan-09 1:35
mmf28-Jan-09 1:35 
GeneralAutoScaleMode causes problems on non-standard font sizes. Pin
Member 205300618-Nov-08 4:40
Member 205300618-Nov-08 4:40 
GeneralPassword Field problem Pin
TheFrnd25-Oct-08 3:33
TheFrnd25-Oct-08 3:33 
GeneralDoes not seem to work correctly with combo boxes Pin
Member 131691314-Oct-08 8:41
Member 131691314-Oct-08 8:41 
NewsMade a Touchscreen Numpad based on your Keyboard Pin
Eqquituz27-Jul-08 8:28
Eqquituz27-Jul-08 8:28 
GeneralRe: Made a Touchscreen Numpad based on your Keyboard Pin
FoxholeWilly28-Jul-08 4:04
FoxholeWilly28-Jul-08 4:04 
GeneralRe: Made a Touchscreen Numpad based on your Keyboard Pin
chrisclarke1123-Jun-09 3:07
chrisclarke1123-Jun-09 3:07 
GeneralRe: Made a Touchscreen Numpad based on your Keyboard Pin
wunchun2-Aug-09 6:48
wunchun2-Aug-09 6:48 
GeneralRe: Made a Touchscreen Numpad based on your Keyboard Pin
Tidusin4-Feb-10 0:18
Tidusin4-Feb-10 0:18 
GeneralRe: Made a Touchscreen Numpad based on your Keyboard Pin
that4sale9-Feb-10 5:27
that4sale9-Feb-10 5:27 
GeneralRe: Made a Touchscreen Numpad based on your Keyboard Pin
free47743-Mar-10 9:36
free47743-Mar-10 9:36 
GeneralRe: Made a Touchscreen Numpad based on your Keyboard Pin
Terry Schofield18-Mar-10 1:44
Terry Schofield18-Mar-10 1:44 
GeneralRe: Made a Touchscreen Numpad based on your Keyboard Pin
pt96mnl2-Apr-10 21:06
pt96mnl2-Apr-10 21:06 

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.