Control sources.zip (217.61 kb)
Control example
Introduction
For one of my Web projects I required a possibility to use a virtual keyboard with a multilanguage 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 multiple different languages so I had to implement my own.
My implementation is easily customizable and you can add as many as you require keyboard layouts or even customize your own. There a numerous limitations as this is my first attempt to implement such control. As example it does not support chinese or other more complicated layout. 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. Layout definition gives you a full control over how the keyboard will be rendered on the screen. As 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=""">'</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 layout, you should set it to true and manually control 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="<">,</Key><Key shift=">" 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 him. First one style allows to select a XAML style used to render it, the attribute shift allows you to control how key should change its value if the shift key have been pressed, 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 silverlight textbox, two buttons (ok and cancel) and layout selector:
This “toolbar” is useful if you want to run keyboard as a modal dialog where user could edit his input and then submit it to an application. Dynamically changing VisibleHelperControls property you could show or hide it. There are multiple ways how you could communicate with the Keyboard control. As example you could access it using 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 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"
}
Method SetText is called then ok or cancel buttons on the keyboard have been pressed, so to use this functionality you have to make 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 required events and properties.