Life tiles into your Modern (Metro) Application (WinRT)



Today I have an idea for an application using all “modern” (formerly Metro). As part of this idea I needed a Life tile. I look quickly into the SDK but not found a reference of how any hub tile control built-in in WinRT SDK. Thus my second idea was to import one already done in Windows Phone Toolkit. This last approach worked smoothly. In my example I’m using code decompiled by dotTrace, but since Windows Phone Toolkit is open source you can go to codeplex side and download it.

As usual you can get the source code from my github account at: https://github.com/hmadrigal/playground-dotnet/tree/master/MsWinRT.HubTileSample

The problem

I want to include hub tiles (life tiles) into my Modern (Metro/WinRT) application.

The solution

Import the HubTile control from the Windows Phone toolkit at http://silverlight.codeplex.com/releases/view/60291 and import this control to WinRT.

In reality I decompiled the code instead of importing it, but it would have been easier to download it. In any case my example is using decompile code, and it’s based on the Grid Template. There is not much work behind it, only decompile, copy, paste and compile. There were few changes, but they’re not worth to mention. That said, here is the control, and I hope you can have some fun with it.


Customizable On Screen Keyboard (OSK) for WPF (it works for WebBrowser control)


Recently my colleagues and I faced a very particular problem in WPF. We were creating a very stylish application for a kiosk, and the keyboard should look different from the default OSK in WPF. At the beginning we import our old OSK which concatenates characters to a string, but this approach won’t work on the WebBrowser control since this control does not exposes internal components such as textbox. The following post is about my experience creating a solution for this particular problem.

The Problem

  • Customizable style for the on screen keyboard
  • The OSK must be able to interact with the WebControl control.

The solution

The default OSK

At first the most logical solution is to use the default. The problem with the default OSK is that it’s not possible to customize. Moreover the default OSK is not embedded into the WPF, it works on top of any other windows application.

Default Windows On Screen keyboard

Default Windows On Screen keyboard (OSK)

Appending strings

The our team decided to import our old OSK from a previous project. This first version of the OSK was a custom control. This custom control has a lot buttons and one string. Each time a button is pressed, a new character  is append to the string, thus the user of the control only have to check the current string in order to know which characters has been typed. The problem with this other approach is that keys like “arrows”, “control” or “alt” don’t have a way to represented into a string. At this time we’ve created out QueryKeyboard Contol which defines a bunch of buttons and appends characters to a string.

Customizing  a WPF OSK

Later on, we realize that our application will have to interact with the WebBrowser. Thus I decide we can use the same approach that the Wosk: Flexible On Screen Keyboard using WPF (http://wosk.codeplex.com/SourceControl/list/changesets) was using. Basically, WOSK was inserting keyboard  codes into the keyboard buffer, so the the operative system will report the input the the current focused window and control.

Thus, the approach was to separate the logic of the virtual keyboard from the keyboard control. So, the virtual keyboard could work as independent a service or be part of a more complex control such as the QueryKeyboardControl.

I’ve publish a sample of the project in Git Hub at https://github.com/hmadrigal/playground-dotnet/tree/master/MsDesktop.OnScreenKeyboard. The following items are the most relevant into the project sample:

  • Hmadrigal.Services.VirtualKeyboard: This projects holds the Service for a Virtual Keyboard.
    • NativeUser32.cs: Wrapper for Win32 low level calls
    • KeysEx.cs:  Known key codes. Set of known values to be inserted into the keyboard buffer.
    • VirtualKeyboardService.cs: Singleton class which exposes functionality in order to keep the state of the virtual keyboard.
  • Hmadrigal.WpfToolkit: This projects holds the visual representation for a on screen keyboard control in WPF.
    • QuertyKeyboard.cs: Custom control which keeps logic for appending strings or utilizing the virtual keyboard service.
    • Generic.xaml: Contains the default style for the custom control
    • WeakEventHandling.cs: Weak event handling (see references)
  • Hmadrigal.SampleKeyboard: WPF application using the custom keyboard with a web browser.

Querty Keyboard Control

Querty Keyboard Control using the virtual keyboard service


  • The default style has set the attribute “Focusable” to “False” in all the buttons (or any other item which can get  the focus). This should be done for any custom style. Because of the virtual keyboard service does not known who is going to handle the reported input, then the app is responsible of setting the focus to the proper item.
  • When debugging and using  keys like shift, alt, ctrl, those are kept pressed by the virtual keyboard service, but they will affect your debug execution because of the input is happening at the operative system level. So, be cautious about where the breakpoints are set.
  • Multilingual by using IME. Particularly I’ve set up my PC to use IMEI Japanese using romanji, so  FYI it will continue working ;-).
  • Because of the WebBrowser control is a Win32 interop control running on WPF, the default focus might no be on the WebBrowser contol. Sadly I don’t have a solution for this yet, just make sure that the user have an option to set the focus into the WebBrowser control once it has been loaded.


The sample code for this application is on Git Hub at:

NOTE (01/29/2014) Even at this time, this post continues to be one of the most viewed in my (humble) blog. However, I had forgotten to update this post in particular, at https://polaris.codeplex.com is the latest version of this keyboard (which is more likely to have less bugs and more flexibility such as a Debug Mode, and adding custom keys with more ease). My advice is to get the code and export the control, since the polaris libraries are meant for being downloaded and work all together, and you will be more likely to use only the keyboard.


How to make the Windows OSK open when a TextBox gets focus, instead of requiring users to tap a keyboard icon?

.NET Framework Developer Center / Creating custom InputDevice

Wosk: Flexible On Screen Keyboard using WPF

SendInput Example In C#

Simulating Keyboard with SendInput API in DirectInput applications

Generic implementation for a weak event handling

From Joel Pobar’s CLR weblog Creating delegate types via Reflection.Emit

Windows Mobile Notes


People from Coding4Fun (@ http://blogs.msdn.com/coding4fun/archive/2010/03/30/9987626.aspx )has sent this list of very nice resources to get started with Windows Mobile Phone Development.

A really nice link collection,


Windows Mobile 7, Silverlight and XNA


Today at Mix2010 it was revealed the oficially the Windows Mobile 7 SDK. As expected it’s possible to create applications using two of the most popular frameworks.

XNA: It’s like a nice wrapper for DirectX. So, very intensive graphics, sounds and high performace applications can be built on this framework. It’s important to mention that XNA does not include (at least in previous versions) a GUI library, so it’s not like a RAD framework.

Silverlight: Silverlight is light framework for developing rich and interfactive applications. Particularly Windows Mobile Supports a special subset of Silverlight 3 (currently the Web Version of Silverlight is reaching number 4). BTW, I mean with a special subset that this Silverlight mobile does not support all the features of SL3, and also it includes features that are special for Windows Mobile.

What next??

In the mean time I’ll  have to continue learning about python and Google application’s engine. However my friend Antonio Baker (aka arbot) has publish a small sample where he show how easy is to create applicatinos with this new SDK (using blend and the phone simulator). Check it out at http://abakerp.blogspot.com/2010/03/my-first-windows-phone-7-app.html

I’ve collected some topic from the MSDN site that I consider might be important wherther or not you have had experience with silverlight.

Getting Started Guide for Developing for Windows Phone

Code Samples for Windows Phone

Porting SL Apps to SL Mov Apps

Reactive Extensions for .NET Overview for Windows Phone:

Media on Windows Phone

Optimizing Windows Phone Emulator Performance

How to: Handle Manipulation Events


Shaders in Blend


I’ve decided to create a project that lets you use Shaders in Microsoft Blend.


You can check my first RC Alpha at http://xhader.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=33162

I hope soon I’ll be posting some videos with samples

PS: Here my first video sample