One final finishing touch to Windows Mobile applications is the proper handling of the Software-based Input Panel (SIP), this can help differentiate your application, and thus your company as one which truely understands the Windows Mobile platform.
The software-based input panel (also known as the popup or software keyboard) allows touch-screen enabled devices that do not have a hardware keyboard to simulate keyboard input by using an onscreen keyboard.
The SIP is a common piece of UI, which enables the use of one or more Input Methods (IMs). Standard Input Methods include Keyboard, Transcriber and Block Recognizer, but additional OEM specific IMs may be included on a given device.
This architecture is extendable, and third parties can create their own IMs by implementing a COM object, as outlined in the book Prorgraming Microsoft Windows CE, Second Edition (see the free sample chapter for step by step instructions). One interesting third party input panel is the Smilies Input Panel by Yin-See Tan which is designed to help users enter similies into MSN messenger.
Tight integration of the SIP within your application typically boils down to handling two scenarios well:
- Automatically displaying the SIP when keyboard focus passes to a control which requires keyboard data entry.
- Ensuring all controls are accessible when the SIP is visible.
SIP support within the .NET Compact Framework
Within the .NET Compact Framework the software-based input panel is wrapped up by the Microsoft.WindowsCE.Forms.InputPanel class, which is present in the Microsoft.WindowsCE.Forms.dll assembly.
In order to interact with the software-based input panel, the user can drop the InputPanel component from the Visual Studio toolbox onto a form. A reference to the Microsoft.WindowsCE.Forms.dll assembly will be added automatically to your project.
Most applications utilising the InputPanel component will make use of the following four members of the class.
- Enabled - A boolean property. If true the SIP is visible (on the screen), if false the SIP is hidden.
- EnabledChanged - An event which fires whenever the Enabled property changes value.
- Bounds - A rectangle detailing the amount of screen real estate the current input method occupies.
- VisibleDesktop - A rectangle detailing the maximum size the current screen real estate the form can cover without being partially covered by the SIP.
Automatic SIP Popup
Within the .NET Compact Framework the easiest way to automatically display the Input Panel is to explicitly enable and disable the input panel whenever a control which requires keyboard focus is activated.
private TextBox txtUserName; private void Form1_Load(object sender, EventArgs e) { txtUserName.GotFocus += txtUserName_GotFocus; txtUserName.LostFocus += txtUserName_LostFocus; } private void txtUserName_GotFocus(object sender, EventArgs e) { // Show the input panel inputPanel1.Enabled = true; } private void txtUserName_LostFocus(object sender, EventArgs e) { // Hide the input panel inputPanel1.Enabled = false; }
Notice: Usually the event hook up code shown within the Form1_Load event handler would occur within the designer generated code. It is only shown here to aid in understanding how this sample code functions.
Dynamic Dialog Layout
Since the SIP is displayed on screen it covers part of your form when visible and potentially makes some of your controls inaccessable. A quality application will alter the layout of its form when the SIP becomes visible to ensure all controls are accessible at all times. There are numerious techniques that can be utilised to achieve this goal.
Technique One:
One approach is to listen to the InputPanel’s EnabledChanged event. This event will trigger whenever the SIP’s visibility changes. Within the event handler we can move controls around to ensure that they are visible within the current space available to the form.
private void InputPanel1_EnabledChanged(object sender, EventArgs e) { int y; if (inputPanel1.Enabled) // SIP visible - position label just above the area covered by the input panel y = Height - inputPanel1.Bounds.Height; else // SIP not visible - position label just above bottom of form y = Height; // Calculate the position of the top of the label y = y - lblMessage.Height; lblMessage.Location = new Point(0, y); }
This approach is the most flexiable, but it can become tricky depending upon the number of controls which need to be moved around. Coordinate calculations are never fun, especially when multiple device resolutions etc have to be taken into account.
Technique two:
Another technique which doesn’t involve explict coordinate calculations is to take advantage of the Docking and Anchoring functionality present with .NET Compact Framework v2.0.
The trick is to dock a control to the bottom of the form, and to resize this control’s height to match the current height of the SIP. This has the effect of pushing the rest of the content docked to the bottom of the form to be above the SIP.
This approach is shown in the following example:
private void InputPanel1_EnabledChanged(object sender, EventArgs e) { // Resize the panel docked to the bottom of the form to be // the same height as the SIP. This moves other controls also // docked to the bottom of the form to be above the area covered // by the SIP. SuspendLayout(); panelSIP.Visible = inputPanel1.Enabled; panelSIP.Height = inputPanel.Bounds.Height; ResumeLayout(); }
This approach can also be extended to cope with larger forms, where the only real solution is to place a vertical scroll bar onto the form. If all the controls are placed onto a panel, you can configure the panel by setting the following properties:
- AutoScroll - true
- Dock - fill
With these properties set, you will find a vertical scrollbar automatically appears when required (due to the SIP becomming visible).
An added finishing touch to this technique is to ensure that any controls on the right hand side of the form has the Anchor property set to “Right”. This ensures that the controls are not obsecured by the vertical scrollbar when it is present.
Selecting Input Methods
The InputPanel component can also be used to enumerate a list of available Input Methods, and to determine which one is currently active.
// List the name and class id of each input method // registered on this device foreach (InputMethod im in inputPanel1.InputMethods) { MessageBox.Show(im.Name, im.Clsid.ToString()); } // Display the name of the currently active input method InputMethod currentIM = inputPanel1.CurrentInputMethod; MessageBox.Show(im.Name, "Current Input Method");
The InputMethod class is a simple key, value pair containing the name of the Input Method (a string shown in the SIP popup menu), and the matching class id. Class identifiers are a COM specific concept which uniquely identify different types of object, and since the software-based input panel architecture is COM based, each input method can be uniquly referred to by its clsid value.
Code Sample
A sample project which demonstrates all the techniques discussed in this article is available for download, and should help clarify the behaviour of the InputPanel control.
VB.NET and InputBox()
Recently a software-based input panel related question came up within an online forum I participate in. As part of answering the question I learnt of a VB.NET function called InputBox. InputBox is a function which provides a basic data entry mechanism, similar to how MsgBox displays simple messages to the user.
It turns out that Microsoft’s implementation of InputBox does not deal with dynamically moving the OK and Cancel buttons around to ensure that they are visible if the software-based input panel is visible. It also does not look too nice on VGA resolution devices.
I have written a replacement InputBox implementation which resolves these issues. My new and improved InputBox, including a sample project is available for download. I hope this control is of use to those wising to utilise InputBox within their applications.