Click here to Skip to main content
Click here to Skip to main content
Go to top

A Touch Screen Keyboard Control in WPF

, 15 Jan 2009
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/
 

 



Comments and Discussions

 
QuestionHaving two separate keyboards Pinmemberhajiloh6-Dec-13 23:23 
QuestionKeybord see in all view PinmemberGRANTOUTOU29-Sep-13 23:22 
QuestionPAGE Pinmemberkajanthan kathir14-May-13 22:25 
Question[My vote of 2] Link to a better open source wpf on screen keyboard... PinmemberMember 36428303-Jan-13 8:45 
AnswerRe: [My vote of 2] Link to a better open source wpf on screen keyboard... PinprotectorMarc Clifton23-Jan-14 8:31 
GeneralMy vote of 4 Pinmemberkaminianand26-Dec-12 0:35 
QuestionNeed your help for keyboard customization PinmemberMember 264608628-Aug-12 4:42 
GeneralAwesome Job!!! Pinmembervmadhukar12-Jun-12 22:21 
GeneralRe: Awesome Job!!! PinmemberRazan Paul (Raju)13-Jun-12 19:24 
QuestionHow to put your Touch Screen Keyboard Control in a static position in the from [modified] Pinmemberlpbinh22-Feb-12 16:52 
AnswerRe: How to put your Touch Screen Keyboard Control in a static position in the from Pinmembermariindus6-Mar-12 20:25 
QuestionProblam With Height in TSK Pinmemberjilanisk0930-Nov-11 2:53 
AnswerRe: Problam With Height in TSK Pinmemberrhochreiter12-Mar-13 1:10 
QuestionUsing keyboard on usercontrol Pinmembersanjay Choudhary17-Oct-11 0:04 
GeneralKey Filter PinmemberPaul Palumbo23-May-11 15:25 
Questionmemory leak Pinmembersomilong26-Apr-11 23:38 
Generalthanks for source code Pinmemberavitambe25-Feb-11 23:56 
GeneralMy vote of 5 PinmemberTelimak15-Nov-10 20:11 
QuestionHow to make this keyboad work with any text editor? PinmemberMikeSharp29-Oct-10 8:47 
GeneralKeyboard size Pinmemberbpotisek30-Sep-10 21:32 
QuestionHow would you assign the keyboard to a text box dynamically? PinmemberRayRei19-Sep-10 20:41 
QuestionAdded textbox feature PinmemberMatt romstadt27-Aug-10 9:04 
Generalsoftkeyboard control PinmemberdaveRupp26-Aug-10 4:00 
GeneralRe: softkeyboard control PinmvpRazan Paul (Raju)26-Aug-10 4:08 
GeneralNice Work! Awesome component... can i have this in a component or embed in a class library Pinmemberpricksaw19-Aug-10 8:11 
GeneralRe: Nice Work! Awesome component... can i have this in a component or embed in a class library Pinmemberpricksaw19-Aug-10 9:48 
GeneralHaving trouble seeing the keyboard PinmemberKetan_Malani2-Aug-10 16:17 
GeneralRe: Having trouble seeing the keyboard PinmemberJonathanMurphy7-Aug-10 3:16 
GeneralRe: Having trouble seeing the keyboard PinmemberKetan_Malani7-Aug-10 20:20 
GeneralRe: Having trouble seeing the keyboard Pinmemberweizhenya22-Jun-11 0:18 
GeneralKey to dock at bottom of screen... Pinmembertravich4-Jun-10 4:56 
QuestionCan i use a touch screen keyboard in my window application?? Pinmemberkajal patoliya2-May-10 21:56 
AnswerRe: Can i use a touch screen keyboard in my window application?? PinmemberOleh Mykhaylovych8-May-10 9:00 
QuestionIs there a way we can always to show the virtaul keyboard? PinmemberTATINCCR17-Mar-10 8:15 
GeneralLanguage PinmemberMember 31486273-Mar-10 10:27 
GeneralAdding events to the Generic XML PinmemberMarkus2k18-Feb-10 16:51 
Questionpossible to get local keyboard? PinmemberJenhuohuo15-Feb-10 3:13 
AnswerBrilliant! PinmemberSteve J. Godrich7-Jan-10 4:23 
GeneralRe: Brilliant! PinmemberRazan Paul (Raju)7-Jan-10 5:53 
GeneralGreat work ! Thanks Pinmemberom solanki3-Oct-09 0:26 
GeneralRe: Great work ! Thanks PinmemberRazan Paul (Raju)7-Jan-10 5:56 
QuestionUse Case? Pinmembertinatran303-Jul-09 20:51 
QuestionHow to locate the main window if the textbox is inside a page which is inside main window? PinmemberJJChen401-Jun-09 6:38 
AnswerRe: How to locate the main window if the textbox is inside a page which is inside main window? PinmemberJJChen404-Jun-09 8:18 
QuestionHow to move the virtual keyboard by drag it (or whatevev the action may work) in touch screen? PinmemberJJChen401-Jun-09 6:09 
QuestionIs there a way we can move the virtual keyboard position? PinmemberJJChen4030-May-09 7:49 
AnswerRe: Is there a way we can move the virtual keyboard position? PinmemberRazan Paul (Raju)30-May-09 8:02 
GeneralRe: Is there a way we can move the virtual keyboard position? PinmemberJJChen401-Jun-09 5:59 
QuestionEscape/Close button to close and re-attach on textbox focus? PinmemberKenny Nguyen Xuan Vu19-May-09 7:18 
GeneralModified the Code PinmemberMember 227590020-Apr-09 5:10 

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 | Mobile
Web01 | 2.8.140926.1 | Last Updated 15 Jan 2009
Article Copyright 2009 by Razan Paul (Raju)
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid