Customized Tab Control

Level: Intermediate Knowledge Required:

• Custom Controls
• Tab Control
• Inheritance
• GDI+

Description: 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,

Properties	Description
BackColor	Control's background color
HeaderWidth	Width of Tab Buttons
HeaderHeight	Height of Tab Buttons
HeaderAlignment	Text Alignment in the Tab Button
HeaderPadding	Padding of Text in the Tab Button
HeaderBorderColor	Tab Button Border Color
HeaderFont	Font of Tab Button
HeaderBackColor	Background Color of Tab Button
HeaderForeColor	Text Color of Tab Button
HeaderSelectedBackColor	Background color of Selected Tab Button
HeaderSelectedForeColor	Text Color of Selected Tab Button

Download the Source: CustomTabControl.zip