Level: Intermediate
Knowledge Required:Description:
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:
CustomTabControlLayout.zip
Level: Intermediate
Knowledge Required:
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,
8 comments:
awesome, thanks!!
How can I add icons on tab label?
@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.
Thanks Arsalan . Ill read your codes now ;)
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.
How do i declare the
DrawMode = OwnerDrawFixed please
it becomes error " Saying " Declaration expected
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.
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.: http://arsalantamiz.blogspot.com.ar/2008/07/custom-tab-control-layout.html
//
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);
}
Post a Comment