Click here to Skip to main content
14,299,900 members

A Multilingual Silverlight Virtual Keyboard

Rate this:
4.75 (7 votes)
Please Sign up or sign in to vote.
4.75 (7 votes)
10 Jul 2009CPOL
A multilingual Silverlight virtual keyboard.



For one of my Web projects, I required a possibility to use a virtual keyboard with multi-language support. There are plenty of different solutions using JavaScript, and significantly less using WPF and Silverlight. So far, I have not seen a Silverlight keyboard control which could support different languages, so I had to implement my own.

My implementation is easily customizable, and you can add as many keyboard layouts as you require, or even customize your own. There are numerous limitations as this is my first attempt to implement such a control. For example, it does not support Chinese or other more complicated layouts. To make the control as lightweight as possible, I have decided to use just XmlReader for XML serialization.


Keyboard layouts are defined using embedded XML files. A layout definition gives you full control over how the keyboard will be rendered on the screen. For example, let’s take a simplified layout definition:

<keyboard language="English" culture="EN" all="false">
            <Key shift="~">`</Key>
            <Key shift="|">\</Key>
            <Key shift="}">]</Key>
            <Key shift="&quot;">'</Key>
            <Key shift="?">/</Key>

Using the attribute all, we control how special keys would be added to the keyboard; if it is false, then the control will render all special keys in their default places, or alternatively, if you need a full control over the layout, you should set it to true and manually control the special keys location:

<keyboard language="Custom English" culture="EN" all="true">
            <Key style="regularButton">w</Key>
            <BackspaceKey style="longButtonFirst"></BackspaceKey>
            <Key style="regularButton">g</Key>
            <DeleteKey style="longButtonFirst"></DeleteKey> 
            <Key shift="&lt;">,</Key>
            <Key shift="&gt;" style="regularButton">.</Key>
            <Key shift="?">/</Key> 
            <SpaceKey style="regularButton"></SpaceKey>
            <CtrlKey style="longButtonFirst">CCC</CtrlKey>

Each key could have numerous attributes assigned to it. style allows to select a XAML style used to render it, shift allows you to control how a key should change its value if the shift key has been pressed, and the same is applicable to alt and dk (Ctrl).


It is possible to use the control on both Silverlight applications and HTML pages directly. Keyboard control can run in two modes – with visible “toolbar” or without. In the toolbar, we have a Silverlight textbox, two buttons (OK and Cancel), and a layout selector:


This “toolbar” is useful if you want to run the keyboard as a modal dialog where the user could edit his input and then submit it to an application. By dynamically changing the VisibleHelperControls property, you could show or hide it. There are multiple ways you could communicate with the keyboard control. As an example, you could access it by using the KeyPressed event:

function PluginLoaded(sender, args) {
    var slCtl = document.getElementById("Xaml1");
         slCtl.Content.silverKeyboard.addEventListener("KeyPressed", HandleTxtClick));
function HandleTxtClick(sender, args) {
    alert("You clicked: " + args.PressedKey);

Alternatively, you could create a JavaScript handler object, which should have the SetText and GetCurrentText methods:

Keyboard.Handler.prototype =
    visibleToolbar: false,
    inputControl: null,

    Select: function(sender) {
                 this.inputControl = sender;

    SetText: function(isOk, newText) {
                 if (this.handleEachClick || !this.inputControl || 
                     !newText || !isOk) return;
        this.inputControl.value = newText;

    GetCurrentText: function() {
        if (this.inputControl)
            return this.inputControl.value;
        return '';
var keyboard = null;
if (!keyboard) keyboard = new Keyboard.Handler();

function PluginLoaded(sender, args) {
    var slCtl = document.getElementById("Xaml1");
         slCtl.Content.silverKeyboard.KeyboardHandler = "keyboard"

The method SetText is called when the OK or Cancel buttons on the keyboard have been pressed, so to use this functionality, you have to make the toolbar visible. If you want to use the keyboard control from within a Silverlight application, you should access the control's Logic property, which exposes all the required events and properties.


  • 10 July 2009: Version 1.0.


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


About the Author

Andrius Mudinas
Software Developer (Senior)
United Kingdom United Kingdom
No Biography provided

Comments and Discussions

QuestionExcellent keyboard Pin
zaxbowow1-Jun-15 7:26
memberzaxbowow1-Jun-15 7:26 
QuestionVery good! :) Pin
bgsjust24-Nov-13 0:49
professionalbgsjust24-Nov-13 0:49 
GeneralMy vote of 5 Pin
FenRunner7-Feb-13 12:06
memberFenRunner7-Feb-13 12:06 
GeneralSystem.FormatException Pin
sandcleric23-Feb-11 21:40
membersandcleric23-Feb-11 21: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.

Posted 10 Jul 2009


28 bookmarked