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

A Multilingual Silverlight Virtual Keyboard

, 10 Jul 2009
Rate this:
Please Sign up or sign in to vote.
A multilingual Silverlight virtual keyboard.

keyboard.png

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:

toolbar.png

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.

License

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

Share

About the Author

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

Comments and Discussions

 
QuestionVery good! :) Pinprofessionalbgsjust24-Nov-13 0:49 
GeneralMy vote of 5 PinmemberFenRunner7-Feb-13 12:06 
GeneralSystem.FormatException Pinmembersandcleric23-Feb-11 21:40 

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
Web02 | 2.8.140916.1 | Last Updated 10 Jul 2009
Article Copyright 2009 by Andrius Mudinas
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid