Bringing the Modern Touch keyboard into your WPF app

Today's WPF and Windows Wednesday post is one I thought kind of cool. Seems it would be simple at first, but is harder than you might think...

Brian Lagunas shows how you can make your Windows 8.1 Desktop WPF app a touch bit easier for your users to interact with...

Showing the Windows 8 Touch keyboard in WPF

With the release of Windows 8, the era of touch devices is in full swing.  Manufacturers are scrambling to create mobile devices that can run Microsoft Windows with the touch of a finger, without the need for a keyboard and mouse.  Even Microsoft has released their very own Surface brand to satisfy this need to run Windows in a mobile world.  This is all fine and dandy if you are building Windows Store applications that run on any version of Windows 8, and are built with touch as a first class citizen.  Windows Store apps integrate perfectly with the device, such as automatically showing the Windows 8 touch keyboard when giving focus to an input element in the application.  Windows Store apps are smart enough to know when I am not using a mouse and keyboard, and I give focus to a TextBox by touching it, it will show the touch keyboard to allow me to input data.  On the other hand, if I am using a mouse and keyboard, and I give focus to the TextBox by clicking it with the mouse, the touch keyboard does not show, but rather I use the keyboard to enter my data.  This is a nice feature built into the platform.

image

Although Microsoft has been shoving Windows Store apps down everyone’s throat, Windows Store apps are not a desktop solution, and in it’s current form, cannot replace certain desktop applications.  This means, that if you are a desktop developer and want your WPF applications to work in this new mobile world, you need to make your WPF apps more touch accessible.  Specifically, when dealing with running your WPF application on a Windows 8 Pro tablet, without the need for a mouse and keyboard.

Unfortunately, this is not as easy as we would like.  As you have probably discovered, there is no API in WPF to access the Windows 8 touch keyboard.  This means, that if a user loads your awesome WPF application onto their Surface Pro 2, and touches a input control, they have no way of entering data into that control.  Well, they can, but it won’t be obvious to them.  In order to enter any type of data into your WPF input controls, they would have to manually open the touch keyboard by tapping on the keyboard icon located in the taskbar.

image

Sure this works, but it is not the ideal experience.  Wouldn’t it be nice to have your WPF application behave just like a Windows Store app, and automatically show the touch keyboard when an input control gains focus by touch?  Well, you can, and I am going to show you how.  Just so you know, it doesn’t require calling Process.Start(“C:\…\TabTip.exe”).

...

image

When I touch the TextBox to give it focus, the touch keyboard will show allowing me to use it to enter data into the control.  If I click the TextBox with my mouse, the touch keyboard will not show, instead I have to use the keyboard to enter data into the control.  As you can probably guess, this is not an official support solution by Microsoft, so you can expect some behavioral differences compared to Windows Store apps.  For example, when you give touch focus to a control to show the touch keyboard, and then touch another area of your application, the keyboard may not hide as expected.  Basically, some controls will dismiss the touch keyboard (for example a Button), while others won’t.

I have been working with my friend Dmitry Lyalin to solve this issue.  He was vital to solving this, and he posted his own version of the solution to the Microsoft Developer Network.  You will notice some differences in his implementation than mine, but the end result is the same.  I would also like to note that Dmitry made a call to System.Windows.Automation.AutomationElement.FromHandle, but I do not see the need for the call, and do not notice any differences in behavior by not calling it.  If I discover otherwise, I will update this post.

Don’t forget to download the source code.

Feel free contact me on my blog, connect with me on Twitter (@brianlagunas), or leave a comment below for any questions or comments you may have.

[Read the whole post]

With all the touch enabled notebooks out there, this tip will help you build a more integrated experience for your users...

Tags:

Follow the Discussion

Comments Closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums,
or Contact Us and let us know.