Monday, July 14, 2008

Customized Tab Control

Level: Intermediate

Knowledge Required:
  • Custom Controls
  • Tab Control
  • Inheritance
  • GDI+
In this post we will discuss how can we customize a Tab Control, as shown in above figure. There are different ways to customize a Tab Control. One way is to use Custom Painting by overriding the OnPaint method of Tab Control. We will use the same way here.

We will create a control, inherited from Tab Control. Then in the New() method (constructor), we will set style as,

Me.SetStyle(ControlStyles.AllPaintingInWmPaint, True)
Me.SetStyle(ControlStyles.UserPaint, True)

The 2nd line tells the Tab Control NOT to use its own Control Drawing, instead use the OnPaint method to draw the contents of control. Note that the Tab Pages will be rendered by themselves, we don't need to handle them.

In the OnPaint Method we will perform as,

1) Create the Background of Tab Control
2) Draw the Tab Buttons

For drawing the Tab Buttons we will use the GetTabRect() method, which returns the bounds of Tab Button to be displayed.

That is the core customization. Additionally I have added other properties,

BackColorControl's background color
HeaderWidthWidth of Tab Buttons
HeaderHeightHeight of Tab Buttons
HeaderAlignmentText Alignment in the Tab Button
HeaderPaddingPadding of Text in the Tab Button
HeaderBorderColorTab Button Border Color
HeaderFontFont of Tab Button
HeaderBackColorBackground Color of Tab Button
HeaderForeColorText Color of Tab Button
HeaderSelectedBackColorBackground color of Selected Tab Button
HeaderSelectedForeColorText Color of Selected Tab Button

Download the Source:


Anonymous said...

I was looking for this for a long time. Thank you for your component. How is it licensed?

Edgar said...

Thanks for this control...
I wish use an imagelist to show icons for each tab. How i can do this?

Sorry for my english jeje