Creating a Tab Control for the Smartphone

Screenshot of sample application demonstrating the tab control I developed for Windows Mobile Smartphone devicesThe .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.

[Download smartphonetabcontrol.zip 48KB]

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

  1. Add SmartphoneTabControl.cs to your solution.
  2. Compile your project (needed to get the control into your toolbox).
  3. Drag a SmartphoneTabControl from your toolbox onto your form.
  4. Dock the tab control to the bottom and make it 26 pixels high.
  5. Add one or more Panel controls to your form (one for each tab page) and set the DockStyle property of each one to ‘Fill’.
  6. Populate the panels with the controls you want visible on each tab.
  7. 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.

21 Responses to “Creating a Tab Control for the Smartphone”

  1. Nikita says:

    Hello.
    Your tabControl is very interesting and usefull. Thanks a lot!
    But I’m interested in how to get acess to the tabage controls. In usual PPC TabControl I can select TabPages[index].Controls and than select the needed control. I didn’t find any way to do this in your tabcontrol.

    Would you please help me with it?!

  2. At present my custom tab control doesn’t expose such functionality. However with a little bit of manual work around you should be able to achieve similiar functionality.

    Within the sample application you will notice that within the constructor of the Form1 class there are a series of calls to the AddTab(…) method of the custom tab control.

    The last parameter to the AddTab(…) method is a control (in the sample application they are all panels) that serves as the content of the tab page.

    If you add a tab page like so…

    tabControl.AddTab(0, “Tab Name”, NULL, panel1);

    You can access the Controls collection by simply refereing to panel1 directly, i.e. use

    panel1.Controls.Clear()

    instead of

    tabControl.TabPages[index].Controls.Clear()

    etc etc…

    It’s not as nice to use as the indexer on the standard tab control (since you must manually keep track of which control is associated with each tab page), but it should give you the functionality you currently desire.

    At the moment I am trying to evaluate what I should do with this custom control and how much or how little I should attempt to clean it up. I would be interested in hearing about your potential uses for it etc. For example are you using it on a Pocket PC or Smartphone device?

  3. Brin says:

    Hello, nice site :)

  4. Ilia says:

    Nice work, but your control doesn’t showing images on PPC 2003 platform.

  5. Gregg says:

    Trying to convert this to VB as that is what my solution is written in. And having some problems with the selectedindexchange it requires raiseevent to be used. Could you please drop me an email?

  6. Krunal Doshi says:

    Can we have similar source code in VB.Net?

  7. Krunal Doshi says:

    It does not have design time properties for tab control. Can you help me out with this?

  8. Hi Gregg and Krunal. At the moment I am busy preparing for a presentation I am doing tomorrow. Since there have been a couple of requests for this control being present in VB.NET I will try to take a look at this over the weekend.

    In the mean time if you have C# support installed within your Visual Studio installation you could place the tab control source code into a C# class library and reference this assembly from your VB.NET based application.

  9. Hi Krunal,

    You are correct, at present this control has no design time capability, you need to do most of its configuration in code.

    I don’t have any firm plans for correcting this at present. It’s possible in the future that I may cover this while writing a series of blog posts on developing custom controls as part of my 70-540 Study Guide. At present I don’t know when this series of posts will be written though.

    If you feel comfortable having a go at adding design time support I wouldn’t mind collaborating on this effort.

    One of the next tasks on my todo list is to roll together a number of the custom controls I have developed as part of this blog into a single assembly/project. It would be great to get some collaboration going on this…

  10. Hitesh Harchandani says:

    Hi,
    This tab control is very usefull for me but I have only concern
    The color of tab control is depends upon theme of device. Is there any method to change the color of Tab Control as per our applications requirnment.

  11. Hitesh Harchandani says:

    Hi,
    Thanks for the tab controls for smartphone. I want to know if we can change the tab color? Currently it is taking as per the theme (windows color). Is there any property to set tab color as per user preferences?

    Any suggestions on this .. as i didnot found any parameter to set these values before the P/Invoke call.

    Your reply appreciated . Thanks in advance.

    Regards,
    Hitesh Harchandani

  12. Hi Hiteshi,

    I am not aware of a nice and tidy solution to this off the top of my head.

    You could investigate buying a third party custom control which provides this sort of functionality. A quick web search turned up http://www.pocketpccontrols.com/controls/colorTab/ for example.

    Hope this helps,
    Christopher Fairbairn

  13. Hitesh Harchandani says:

    Thanks for the immidiate reply. But out of curosity i like to know what creates a tab UI. How it automatically takes theme specific color. I observed whatever theme color i choose the tab color updated automatically.

    I beleive it is there and yoiu are the best person put some light on this.

    Hitesh

  14. Carl says:

    Have you or anyone noticed the performance of tabControl.Clear()? When clearing 8 tab pages, the Clear() method takes 3 seconds on a Window Mobile 5 device running .NET CF 2.0.

    This is despite the tabControl.Clear() being nested inside tabControl.SuspendLayout() and tabControl.ResumeLayout().

  15. Carl says:

    Performance problems related to calling tabControl.Clear() seem to be because calling Clear() raises the SelectIndexChanged event…

  16. Dave says:

    This is a terrific control! Thank you for your work on this and making it public.

    A question I have is related to adding panels to the tab control. In my scenario the application is creating panels outside of the form which hosts the tab control. The application has a series of usercontrol forms generated which each have a panel which is configured with child controls. When my app creates instantiates the form hosting the tab control it then instantiates the usercontrol, extracts the panel from it then the panel to the tab via AddTab().
    When I do this the tab appears but the associated panel appears with no child controls. What am I missing here?

  17. Dave says:

    Uh, please ignore my previous post. I was being thick.
    My assumption was that by calling AddTab() it would also add the control to the form itself. I am now doing that manually.

    Again, thanks for your work. Not only is it useful as is, but it is terrific to see how you coded it up.

  18. Srikanth Sundaram says:

    hi Mr.Christopher, its a great control… Congrats… Im trying to develop a mobile user control which alllows the content of the mobile page to be viewed in a tabular fashion… It allows the user to align his controls in a tabular fashion.. Im using vs 2008 so, havin problems using designer view(no designer view)… (There is no way to display tables or datagrids in mobile web forms)… however to start with it or how to develop it i have no idea.. im a begginner… I would be grateful to you if you can guide me how to do it and give me ur valuble suggestions.. Thanking You… With Love, Srikanth Sundaram…

  19. Stephan says:

    Hi Christopher,
    this control is exact what I am looking for.
    I attempt the smartphonetabcontrol.zip and try to compile it with Visual Studion 2008 and get this compile error “Could not find type ‘SmartphoneTabControl.SmartphoneTab”.
    My guess is there is a file missing in the zip file or did you know what is going wrong on my VS ?

    Regards
    Stephan

  20. msu says:

    great work!

  21. andrew simpson says:

    great piece of code but as some else noticed images are not displayed on ppc platforms. do you know why please?

    Thanks

Leave a Reply