Monday, July 14, 2008

Custom Tab Control Layout

Level: Intermediate

Knowledge Required:
  • Tab Control
  • GDI+
In previous post,

Custom Tab Control

We have discussed how to change the Tab Control layout so that we can make it more attractive by changing the background color and tab buttons' color. As I have mentioned in that post that there are some other techniques too, so in this post we shall see a simple way.

By default Tab Control's Tab Buttons are Aligned Top,

So first we are going to change its alignment to Left, by setting the property:

Alignment = Left

If you have XP themes turned on then you may notice the weird layout of Tab Control. Don't worry we will make it fine.

As you may have noticed that Tabs are vertical, and our requirement is horizontal. So we can change the size of Tabs. But before we can do this we have to set the SizeMode property as,

SizeMode = Fixed

Now we can change the size by using the ItemSize property,

ItemSize = 30, 120

Width = 30 and Height = 120

After setting the Alignment = Left, Tab control rotates the Tabs which causes the Width and Height seem to be reversed. That is why when we increase Height, we see that width is increasing and when we increase width the height is effected.

Now Text will also be displaying, but vertically. Unfortunately there is no simple way to resolve this issue. For this purpose we have to write the Text by ourselves. To do this we will first set the DrawMode

DrawMode = OwnerDrawFixed

Now its our job to display the Text on Tabs. Since we have set the DrawMode property = OwnerDrawFixed, therefore we can use the DrawItem event as,

Private Sub TabControl1_DrawItem(ByVal sender As Object, ByVal e As System.Windows.Forms.DrawItemEventArgs) Handles TabControl1.DrawItem
Dim g As Graphics
Dim sText As String
Dim iX As Integer
Dim iY As Integer
Dim sizeText As SizeF
Dim ctlTab As TabControl

ctlTab = CType(sender, TabControl)

g = e.Graphics

sText = ctlTab.TabPages(e.Index).Text
sizeText = g.MeasureString(sText, ctlTab.Font)
iX = e.Bounds.Left + 6
iY = e.Bounds.Top + (e.Bounds.Height - sizeText.Height) / 2
g.DrawString(sText, ctlTab.Font, Brushes.Black, iX, iY)
End Sub

Download Source:


kevinmmccormickY said...

awesome, thanks!!

Lonecrow said...

How can I add icons on tab label?

Arsalan Tamiz said...

@Lonecrow: As you are seeing that we are drawing text in TabControls' DrawItem Event Handler using Graphics Class. We can simply draw the icons too. You can explore several methods of this class like DrawIcon and DrawImage.

Lonecrow said...

Thanks Arsalan . Ill read your codes now ;)

Lonecrow said...

Can i change the color under the tab controls because it stays gray. I can change the tab control body and its color but I cannot change the color under the tab control. The grey part.

Anonymous said...

How do i declare the
DrawMode = OwnerDrawFixed please

it becomes error " Saying " Declaration expected

Arsalan Tamiz said...

DrawMode is a property of TabControl, I would suggest to use the Design Mode. Select the TabControl in Design Mode, then in properties window, look for this property.

Anonymous said...

Hello, this is the C# version of the code (for a TabControl named tabControl1 in Form1)

private void tabControl1_DrawItem(object sender, DrawItemEventArgs e)
// Adaptado a C# de aca:
// Ref.:
Graphics g;
string sText;
int iX;
float iY;
SizeF sizeText;
TabControl ctlTab;

ctlTab =(TabControl)sender;
g = e.Graphics;
sText = ctlTab.TabPages[e.Index].Text;
sizeText = g.MeasureString(sText, ctlTab.Font);
iX = e.Bounds.Left + 6;
iY = e.Bounds.Top + (e.Bounds.Height - sizeText.Height) / 2;
g.DrawString(sText, ctlTab.Font, Brushes.Black, iX, iY);