My Blog Links
Site Links
Currently Reading
  • This page is powered by Blogger. Isn't yours?
  • Weblog Commenting and Trackback by HaloScan.com
  • 2RSS.com :: RSS directory
  • Listed on BlogShares
  • Blog Directory, Find A Blog, Submit A Blog, Search For The Best Blogs

Thursday, March 11, 2004

FlatTabControl Sample 

Overall, the WinForms TabControl gives you a lot of customization through its owner draw mechanism. You can paint the tab buttons basically in whatever way you want. However, the background color behind the page tabs cannot be changed, and neither can the 3D button effect around the control and the page tab buttons. So, for an application that I'm working on, I wanted to be able to fully customize the drawing of the background and have a flat rather than 3D control

So another control that I have in my Control library on GotDotNet is a FlatTabControl. This control allows the user to specify what the ControlBackColor and the TextColor. These colors are then used during the control's painting. Also, it allows for a BorderDarkColor and BorderLightColor which are used to paint both the border around the control and the borders for the tab buttons.

Here's a look at what I mean. The control on the right is the standard WinForms TabControl, but it's customized as much as possible with a different color scheme. As you can see, portions of it still have basic control look and feel. On the left is my FlatTabControl. It paints everything in the appropriate color scheme, so that you can fully customize your user interface.

The interesting part to get the painting to be overridden was in the constructor to tell the underlying control that I wanted to handle all of the painting (including the borders and background):

public FlatTabControl()
// Initialize the control styles for painting.
SetStyle(ControlStyles.AllPaintingInWmPaint, true);
SetStyle(ControlStyles.DoubleBuffer, true);
SetStyle(ControlStyles.ResizeRedraw, true);
SetStyle(ControlStyles.UserPaint, true);

Then, I override OnPaint to draw in what I want. In OnPaint, I broke up the painting into different steps:

  • DrawControlBorder
  • DrawTabButtonFull
  • DrawButtonBorder
  • DrawTabButton
  • FixupSelectedBorder
  • PerformDrawItem

These methods are all exposed as virtual, so that anyone can derive from the FlatTabControl and customize any of the specific drawing steps that they're interested in. Want to just change how the button borders are drawn, then just override the DrawButtonBorder method.

Also, to continue to support the owner draw mechanism and allow customization in that way, the PerformDrawItem method fires the DrawItem event, if the DrawMode property is set to OwnerDraw.

Note: I turned off being able to set the TabAlignment to Left or Right because for my project, all I needed was the Top and Bottom. If you need others, it shouldn't be too hard to add. I may even do it in the future, if I ever need it.

Also, you can download the full sample code from GotDotNet or look at it online and report bugs at the workspace.