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

 
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 
GeneralMy vote of 5 Pin
bob bobby326-Oct-10 13:21
bob bobby326-Oct-10 13:21 
Questionhow i can find the touchscreenKeyboard.dll Pin
ShuiYinDeng27-Sep-10 3:11
ShuiYinDeng27-Sep-10 3:11 
halo sorry i am newest
i am using vs 2008 i cant find the touch screen keyboard.dll file
can help me ?
AnswerRe: how i can find the touchscreenKeyboard.dll [modified] Pin
JTRizos22-Dec-10 7:00
JTRizos22-Dec-10 7:00 
GeneralRe: how i can find the touchscreenKeyboard.dll Pin
akul12329-Dec-10 22:47
akul12329-Dec-10 22:47 
GeneralRe: how i can find the touchscreenKeyboard.dll Pin
JTRizos3-Jan-11 6:11
JTRizos3-Jan-11 6:11 
GeneralExcellent control... Pin
miltash16-Jun-10 0:46
miltash16-Jun-10 0:46 
GeneralRandom Locations Pin
zeeeeee10-May-10 1:59
zeeeeee10-May-10 1:59 
GeneralRe: Random Locations Pin
lemmy sagaert10-Jan-13 7:12
lemmy sagaert10-Jan-13 7:12 
QuestionHow can use this demo touchscreen keybord attached in my windows application Pin
kajal patoliya3-May-10 18:24
kajal patoliya3-May-10 18:24 
AnswerRe: How can use this demo touchscreen keybord attached in my windows application Pin
Oleh Mykhaylovych8-May-10 9:59
Oleh Mykhaylovych8-May-10 9:59 
QuestionHow can use a touchscreen key board in my windows application Pin
kajal patoliya4-Apr-10 18:52
kajal patoliya4-Apr-10 18:52 
GeneralTrying to access a textfield on another form Pin
Phil3020-Jan-10 22:03
Phil3020-Jan-10 22:03 
GeneralRe: Trying to access a textfield on another form Pin
G-Tek18-Feb-10 9:48
G-Tek18-Feb-10 9:48 
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 

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.