The .NET Compact Framework does not support a Tab Control when targeting a Windows Mobile Smartphone device. Today I present a sample custom control designed to provide a suitable replacement for System.Windows.Forms.TabControl when you are building a Smartphone application.
I am not sure using such a control is good from a usability perspective, but it has been asked for enough times within the developer community, that this time I decided to provide a working solution. This was especially true once I determined the custom tab control would also provide some benefits for Pocket PC developers.
My development background was originally in the native world writing applications in C and C++. As such I know the raw Win32 APIs provided by the Windows Mobile operating system pretty well. The smartphone OS actually provides the standard Commctrl.h Tab Control, however the .NET Compact Framework has decided not to expose this functionality. So this custom control simply uses quite a lot of Platform Invoke calls to wrap up the native tab control provided by the operating system in a .NET Compact Framework friendly manor.
Benefits of this control
- Works on both Smartphone and Pocket PC devices.
- Allows tabs to have an optional bitmap displayed beside the text.
- Exposes a SelectedIndexChanging event which allows the programmer to cancel a tab change if the application logic desires.
Sample Application
A sample application which runs on both Pocket PC and Smartphone devices is available for download. This download also contains the file SmartphoneTabControl.cs which contains the source code for the custom control itself.
The sample application has three tabs and demonstrates how you can navigate the tabs via the left and right arrow keys. Once you have selected the third tab, you can use the up and down arrow keys to select the various textbox controls, and return to the tab control to select another tab.
Another neat feature demonstrated in the sample application is a way to have an animated icon displayed on a tab. This may be useful for a tabbed interface where a tab is displaying the results of an asynchronous or lengthy operation (such as a file download). The tab’s icon could be animated while the operation is still in progress, allowing the user to determine the state of the operation with a quick glance.
How to use the control
- Add SmartphoneTabControl.cs to your solution.
- Compile your project (needed to get the control into your toolbox).
- Drag a SmartphoneTabControl from your toolbox onto your form.
- Dock the tab control to the bottom and make it 26 pixels high.
- Add one or more Panel controls to your form (one for each tab page) and set the DockStyle property of each one to ‘Fill’.
- Populate the panels with the controls you want visible on each tab.
- Within your form’s constructor call the SmartphoneTabControl’s AddTab() method to create each tab, passing in the name of the tab, an optional image, and the panel which contains it’s controls.
There are a couple of outstanding bugs/missing features with this control. The biggest being the lack of design time support and device resolution independance. This control was quickly put together to demonstrate what could be possible with a little bit of work. If anyone is interested in collaborating to improve this control, I would be keen to hear from them.
