Click here to Skip to main content
11,705,451 members (58,516 online)
Click here to Skip to main content

A Touch Screen Keyboard Control in WPF

, 15 Jan 2009 CPOL 173.9K 10.3K 146
Rate this:
Please Sign up or sign in to vote.
A touch screen keyboard which emulates the basic functionality of a real keyboard.

Touch Screen Keyboard in Login Form

Introduction

For a touch screen project, the user needed a touch screen keyboard to enter information in a textbox, password box etc. So, a keyboard layout was to be implemented in WPF. Here, a custom keyboard layout is implemented using StackPanels and Buttons.

Touch Screen Keyboard is a WPF window with no style. Considerable work has to be done to make sync the keyboard window and the application window for resizing, out of screen, minimize, maximize, and window activate and deactivate issues. Ctrl, Alt, Function, and Arrow key functionalities are not given, but basic keys including Enter, BackSpace, Shift, TAB, CapsLock functionalities are implemented. Some features of this Touch Screen Keyboard are:

  • Window state sync: it synchronizes itself with window maximize, minimize.
  • It never goes out of screen in x-axis.
  • It always keeps itself in sync with the application window size.
  • It keeps itself in sync with window move.
  • No hooking: it does not use any sort of hooking (no interoperability).

Keyboard layout

Keyboard layout is created using StackPanels and Button. If you look at the keyboard layout, you will see that there are five rows. For these five rows, five StackPanels with horizontal orientation are taken. Each of these StackPanels contain the keys (Buttons) for its corresponding row. A parent StackPanel with vertical orientation contains these five StackPanels.

<StackPanel Orientation="Vertical">
  <StackPanel Orientation="Horizontal" >
    //ALL the keys(Buttons) of the first row of the keyboard layout.
  </StackPanel>
  <StackPanel Orientation="Horizontal" >
    //ALL the keys(Buttons) of the Second row of the keyboard layout.
  </StackPanel>
  <StackPanel Orientation="Horizontal" >
    //ALL the keys(Buttons) of the third row of the keyboard layout.
  </StackPanel>
  <StackPanel Orientation="Horizontal" >
    //ALL the keys(Buttons) of the fourth row of the keyboard layout.
  </StackPanel>
  <StackPanel Orientation="Horizontal" >
    //ALL the keys(Buttons) of the fifth row of the keyboard layout.
  </StackPanel>
</StackPanel>

Here, all the keys are Buttons with a certain look and feel. I would like to give special thanks to Mark Heath for his article "Creating a Custom WPF Button Template in XAML". The button style is taken from there, and full credits for the buttons go to him. All the key strokes are handled using WPF commands.

Remora Pattern by Ben Constable

According to Ben Constable, Remora Pattern allows you to attach a chunk of logic to any existing element that you have. This pattern can be implemented using an Attached Dependency Property in WPF, which is shown in Ben Constable's blog. You can take a look at it here.

Here, an Attached Dependency Property is attached with an object. When the object is initiated, it goes to set the value of the Attached Dependency Property, which results in calling an Attached Dependency Property Change event. In the event handler, you can add your intended functionality, which is the additional functionality of the object.

<PasswordBox k:TouchScreenKeyboard.TouchScreenKeyboard="true"  x:Name="txtPassword"  />

The code:

public static readonly DependencyProperty TouchScreenKeyboardProperty =
  DependencyProperty.RegisterAttached("TouchScreenKeyboard", typeof(bool), 
  typeof(TouchScreenKeyboard), new UIPropertyMetadata(default(bool), 
  TouchScreenKeyboardPropertyChanged));

Here, a TouchScreenKeyboard attached property is exposed form the Touch Screen custom control. To get the touch screen keyboard functionality, you have to set the TouchScreenKeyboard attached property to a textbox or a password box. When this textbox or password box is initiated, it sets the value of the TouchScreenKeyboard attached property which in turn calls the TouchScreenKeyboardPropertyChanged event.

static void TouchScreenKeyboardPropertyChanged(DependencyObject sender, 
                               DependencyPropertyChangedEventArgs e)
{
    FrameworkElement host = sender as FrameworkElement;
    if (host != null)
    {
        host.GotFocus += new RoutedEventHandler(OnGotFocus);
        host.LostFocus += new RoutedEventHandler(OnLostFocus);
    }
}

In TouchScreenKeyboardPropertyChanged, we add functionality in the focus and lost focus events. Here, host is a textbox or password box in which you are setting the TouchScreenKeyboard attached property. In the ONGOTFocus event handler, you will show the touch screen keyboard to enter keys, and in the UNFocus event handler, the keyboard will disappaer.

The code

How does it move a parent window and a keyboard window together?

When a WPF window moves , it fires the LocationChanged event. In the code to find the parent window of the virtual keyboard window, the following code is written in the focus event of host:

FrameworkElement ct = host;
while (true)
{
    if (ct is Window)
    {
        ((Window)ct).LocationChanged += 
           new EventHandler(TouchScreenKeyboard_LocationChanged);
        break;
    }
    ct = (FrameworkElement)ct.Parent;
}

After getting the parent window, the LocationChanged event of the parent window is subscribed to. Now, whenever the parent window moves, it will invoke the LocationChanged event handler method and the location of the TouchScreenWindow will be updated accordingly.

How does it synchronize the keyboard window with the parent window maximize?

When the parent window is maximized, the LayoutUpdate event is fired by each of the child controls. So, the LayoutUpdate event of the textbox or the password box which is host is subscribed in the following code in the focus event:

host.LayoutUpdated += new EventHandler(tb_LayoutUpdated);

Now, whenever the parent window is maximized, it will invoke the LayoutUpdated event handler method and the location of the TouchScreenWindow will be updated accordingly.

How does it synchronize keyboard window with the parent window resize?

When the parent window is resized, the LayoutUpdate event is fired by each of the child controls. So, the LayoutUpdate event of the textbox or password box which is host is subscribed in the following code in the focus event:

host.LayoutUpdated += new EventHandler(tb_LayoutUpdated);

Now, whenever the parent window is resized, it will invoke the LayoutUpdated event handler method and the location of the TouchScreenWindow will be updated accordingly.

How does it make the host control's border red and background yellow?

The host control's border is made red when it gets focus. So, in the focus event of host, the following code is written:

_PreviousTextBoxBackgroundBrush = host.Background;
_PreviousTextBoxBorderBrush = host.BorderBrush;
_PreviousTextBoxBorderThickness = host.BorderThickness;

host.Background = Brushes.Yellow;
host.BorderBrush = Brushes.Red;
host.BorderThickness = new Thickness(4);

The border color, background, and thickness is changed in this event. Before making changes, the border’s property values are saved so that at a later time it can restore its original look. In the unfocused event, it restores its original look.

How does it restrict the touch screen keyboard WPF window to go outside of the screen in x-axis?

SystemParameters.VirtualScreenWidth returns the width of the virtual screen in pixels. Now we know the lower boundary is 0 and the upper boundary is SystemParameters.VirtualScreenWidth. So, all it has to do is to go through some logic. The logic is written in the following code:

if (WidthTouchKeyboard + Actualpoint.X > SystemParameters.VirtualScreenWidth)
{
    double difference = WidthTouchKeyboard + Actualpoint.X - 
                        SystemParameters.VirtualScreenWidth;
    _InstanceObject.Left = Actualpoint.X - difference;
}
else if (!(Actualpoint.X > 1))
{
    _InstanceObject.Left = 1;
}
else
    _InstanceObject.Left = Actualpoint.X;

What the code does here is it checks whether the leftmost x-axis vale and the rightmost x-axis value of the touch screen keyboard are out of the screen or not. If it is out of the screen, then it resets it to appropriate value. Otherwise, it does nothing.

How do I position the child window to the exact position of the host control?

When the host control is focused, it fires the focus event. In the focus event, we get the location of the host control. Then, we set the touch screen keyboard window's location accordingly.

How the touch screen keyboard window is always on top of the host window and does not make problems with other windows?

Setting the touch screen keyboard window to the topmost will not work. Because in that case, the touch screen keyboard will always remain on top of all the other windows in the machine. To solve the problem, we take the help of the Activatewindow and Deactivatewindow events of the host window. When he host window is activated, it fires the Activated event, and when the host window is deactivated, it fires the Deactivated event.

FrameworkElement ct = host;
while (true)
{
    if (ct is Window)
    {
        ((Window)ct).Activated += new EventHandler(TouchScreenKeyboard_Activated);
        ((Window)ct).Deactivated += new EventHandler(TouchScreenKeyboard_Deactivated);
        break;
    }
    ct = (FrameworkElement)ct.Parent;
}

It subscribes to the Activated and Deactivated events of the parent window. In the Activated event, the touch screen keyboard is made topmost, and in the Deactivated event, it resets it. Here is the code for this functionality:

static void TouchScreenKeyboard_Deactivated(object sender, EventArgs e)
{
    if (_InstanceObject != null)
    {
        _InstanceObject.Topmost = false;
    }
}

static void TouchScreenKeyboard_Activated(object sender, EventArgs e)
{
    if (_InstanceObject != null)
    {
        _InstanceObject.Topmost = true;
    }
}

Sample code

Here, a project has been attached which shows the touch screen keyboard control in action.

Conclusion

Thanks for reading this write up. I hope that this write up will be helpful for some people. If you guys have any questions, I would love to answer.

References

History

  • Initial release – 16/01/09.

License

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

Share

About the Author

Razan Paul (Raju)
Software Developer (Senior) CP
Australia Australia
I am an Independent Contractor in Brisbane, Australia. For me, programming is a passion first, a hobby second, and a career third.

My Blog: http://weblogs.asp.net/razan/






You may also be interested in...

Comments and Discussions

 
QuestionChange Theme Pin
kyo4716-Mar-15 3:12
memberkyo4716-Mar-15 3:12 
QuestionHaving two separate keyboards Pin
hajiloh6-Dec-13 23:23
memberhajiloh6-Dec-13 23:23 
QuestionKeybord see in all view Pin
GRANTOUTOU29-Sep-13 23:22
memberGRANTOUTOU29-Sep-13 23:22 
QuestionPAGE Pin
kajanthan kathir14-May-13 22:25
memberkajanthan kathir14-May-13 22:25 
Question[My vote of 2] Link to a better open source wpf on screen keyboard... Pin
Member 36428303-Jan-13 8:45
memberMember 36428303-Jan-13 8:45 
AnswerRe: [My vote of 2] Link to a better open source wpf on screen keyboard... Pin
Marc Clifton23-Jan-14 8:31
protectorMarc Clifton23-Jan-14 8:31 
GeneralMy vote of 4 Pin
kaminianand26-Dec-12 0:35
memberkaminianand26-Dec-12 0:35 
QuestionNeed your help for keyboard customization Pin
Member 264608628-Aug-12 4:42
memberMember 264608628-Aug-12 4:42 
GeneralAwesome Job!!! Pin
vmadhukar12-Jun-12 22:21
membervmadhukar12-Jun-12 22:21 
GeneralRe: Awesome Job!!! Pin
Razan Paul (Raju)13-Jun-12 19:24
memberRazan Paul (Raju)13-Jun-12 19:24 
QuestionHow to put your Touch Screen Keyboard Control in a static position in the from Pin
lpbinh22-Feb-12 16:52
memberlpbinh22-Feb-12 16:52 
AnswerRe: How to put your Touch Screen Keyboard Control in a static position in the from Pin
mariindus6-Mar-12 20:25
membermariindus6-Mar-12 20:25 
QuestionProblam With Height in TSK Pin
jilanisk0930-Nov-11 2:53
memberjilanisk0930-Nov-11 2:53 
AnswerRe: Problam With Height in TSK Pin
rhochreiter12-Mar-13 1:10
memberrhochreiter12-Mar-13 1:10 
QuestionUsing keyboard on usercontrol Pin
sanjay Choudhary17-Oct-11 0:04
membersanjay Choudhary17-Oct-11 0:04 
GeneralKey Filter Pin
Paul Palumbo23-May-11 15:25
memberPaul Palumbo23-May-11 15:25 
Questionmemory leak Pin
somilong26-Apr-11 23:38
membersomilong26-Apr-11 23:38 
Generalthanks for source code Pin
avitambe25-Feb-11 23:56
memberavitambe25-Feb-11 23:56 
GeneralMy vote of 5 Pin
Telimak15-Nov-10 20:11
memberTelimak15-Nov-10 20:11 
QuestionHow to make this keyboad work with any text editor? Pin
MikeSharp29-Oct-10 8:47
memberMikeSharp29-Oct-10 8:47 
GeneralKeyboard size Pin
bpotisek30-Sep-10 21:32
memberbpotisek30-Sep-10 21:32 
QuestionHow would you assign the keyboard to a text box dynamically? Pin
RayRei19-Sep-10 20:41
memberRayRei19-Sep-10 20:41 
QuestionAdded textbox feature Pin
Matt romstadt27-Aug-10 9:04
memberMatt romstadt27-Aug-10 9:04 
Generalsoftkeyboard control Pin
daveRupp26-Aug-10 4:00
memberdaveRupp26-Aug-10 4:00 
GeneralRe: softkeyboard control Pin
Razan Paul (Raju)26-Aug-10 4:08
mvpRazan Paul (Raju)26-Aug-10 4:08 
GeneralNice Work! Awesome component... can i have this in a component or embed in a class library Pin
pricksaw19-Aug-10 8:11
memberpricksaw19-Aug-10 8:11 
GeneralRe: Nice Work! Awesome component... can i have this in a component or embed in a class library Pin
pricksaw19-Aug-10 9:48
memberpricksaw19-Aug-10 9:48 
GeneralHaving trouble seeing the keyboard Pin
Ketan_Malani2-Aug-10 16:17
memberKetan_Malani2-Aug-10 16:17 
GeneralRe: Having trouble seeing the keyboard Pin
JonathanMurphy7-Aug-10 3:16
memberJonathanMurphy7-Aug-10 3:16 
GeneralRe: Having trouble seeing the keyboard Pin
Ketan_Malani7-Aug-10 20:20
memberKetan_Malani7-Aug-10 20:20 
GeneralRe: Having trouble seeing the keyboard Pin
weizhenya22-Jun-11 0:18
memberweizhenya22-Jun-11 0:18 
GeneralKey to dock at bottom of screen... Pin
travich4-Jun-10 4:56
membertravich4-Jun-10 4:56 
QuestionCan i use a touch screen keyboard in my window application?? Pin
kajal patoliya2-May-10 21:56
memberkajal patoliya2-May-10 21:56 
AnswerRe: Can i use a touch screen keyboard in my window application?? Pin
Oleh Mykhaylovych8-May-10 9:00
memberOleh Mykhaylovych8-May-10 9:00 
QuestionIs there a way we can always to show the virtaul keyboard? Pin
TATINCCR17-Mar-10 8:15
memberTATINCCR17-Mar-10 8:15 
GeneralLanguage Pin
Member 31486273-Mar-10 10:27
memberMember 31486273-Mar-10 10:27 
GeneralAdding events to the Generic XML Pin
Markus2k18-Feb-10 16:51
memberMarkus2k18-Feb-10 16:51 
Questionpossible to get local keyboard? Pin
Jenhuohuo15-Feb-10 3:13
memberJenhuohuo15-Feb-10 3:13 
AnswerBrilliant! Pin
Steve J. Godrich7-Jan-10 4:23
memberSteve J. Godrich7-Jan-10 4:23 
GeneralRe: Brilliant! Pin
Razan Paul (Raju)7-Jan-10 5:53
memberRazan Paul (Raju)7-Jan-10 5:53 
GeneralGreat work ! Thanks Pin
om solanki3-Oct-09 0:26
memberom solanki3-Oct-09 0:26 
GeneralRe: Great work ! Thanks Pin
Razan Paul (Raju)7-Jan-10 5:56
memberRazan Paul (Raju)7-Jan-10 5:56 
QuestionUse Case? Pin
tinatran303-Jul-09 20:51
membertinatran303-Jul-09 20:51 
QuestionHow to locate the main window if the textbox is inside a page which is inside main window? Pin
JJChen401-Jun-09 6:38
memberJJChen401-Jun-09 6:38 
AnswerRe: How to locate the main window if the textbox is inside a page which is inside main window? Pin
JJChen404-Jun-09 8:18
memberJJChen404-Jun-09 8:18 
QuestionHow to move the virtual keyboard by drag it (or whatevev the action may work) in touch screen? Pin
JJChen401-Jun-09 6:09
memberJJChen401-Jun-09 6:09 
QuestionIs there a way we can move the virtual keyboard position? Pin
JJChen4030-May-09 7:49
memberJJChen4030-May-09 7:49 
AnswerRe: Is there a way we can move the virtual keyboard position? Pin
Razan Paul (Raju)30-May-09 8:02
memberRazan Paul (Raju)30-May-09 8:02 
GeneralRe: Is there a way we can move the virtual keyboard position? Pin
JJChen401-Jun-09 5:59
memberJJChen401-Jun-09 5:59 
QuestionEscape/Close button to close and re-attach on textbox focus? Pin
Kenny Nguyen Xuan Vu19-May-09 7:18
memberKenny Nguyen Xuan Vu19-May-09 7:18 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150819.1 | Last Updated 15 Jan 2009
Article Copyright 2009 by Razan Paul (Raju)
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid