Click here to Skip to main content
16,017,100 members
Articles / Desktop Programming / XAML

A Multilingual Silverlight Virtual Keyboard

Rate me:
Please Sign up or sign in to vote.
4.75/5 (7 votes)
10 Jul 2009CPOL2 min read 51.6K   3K   27   4
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:

XML
<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:

XML
<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:

JavaScript
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:

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


Written By
Software Developer (Senior)
United Kingdom United Kingdom
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionExcellent keyboard Pin
zaxbowow1-Jun-15 7:26
zaxbowow1-Jun-15 7:26 
QuestionVery good! :) Pin
bgsjust24-Nov-13 0:49
professionalbgsjust24-Nov-13 0:49 
Very interesting work, but how about Chinese! Smile | :) ?
GeneralMy vote of 5 Pin
FenRunner7-Feb-13 12:06
FenRunner7-Feb-13 12:06 
GeneralSystem.FormatException Pin
sandcleric23-Feb-11 21:40
sandcleric23-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.