A Multilingual Silverlight Virtual Keyboard

• Download source code - 200 KB

Introduction

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.

Layouts

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">
    <Rows>
        <KeyboardRow>
            <Key shift="~">`</Key>
            <Key shift="|">\</Key>
        </KeyboardRow>
        <KeyboardRow>
            <Key>q</Key>
            <Key shift="}">]</Key>
        </KeyboardRow>
        <KeyboardRow>
            <Key>a</Key>
            <Key shift="&quot;">'</Key>
            </KeyboardRow>
        <KeyboardRow>
            <Key>z</Key>
            <Key shift="?">/</Key>
        </KeyboardRow>
    </Rows>
</keyboard>

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">
    <Rows> 
        <KeyboardRow>
            <TabKey></TabKey> 
            <Key>q</Key>
            <Key style="regularButton">w</Key>
            <Key>e</Key> 
            <BackspaceKey style="longButtonFirst"></BackspaceKey>
        </KeyboardRow>
        <KeyboardRow>
            <CapsLockKey></CapsLockKey>
            <Key>f</Key>
            <Key style="regularButton">g</Key>
            <Key>h</Key>
            <DeleteKey style="longButtonFirst"></DeleteKey> 
        </KeyboardRow>
        <KeyboardRow>
            <ShiftKey></ShiftKey>
            <Key shift="&lt;">,</Key>
            <Key shift="&gt;" style="regularButton">.</Key>
            <Key shift="?">/</Key> 
            <EnterKey></EnterKey>
        </KeyboardRow>
        <KeyboardRow>
            <CtrlKey></CtrlKey>
            <AltKey></AltKey>
            <SpaceKey style="regularButton"></SpaceKey>
            <AltKey></AltKey>
            <CtrlKey style="longButtonFirst">CCC</CtrlKey>
        </KeyboardRow>
    </Rows>
</keyboard>

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).

Usage

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.

History

• 10 July 2009: Version 1.0.