Click here to Skip to main content
13,589,266 members
Click here to Skip to main content
Add your own
alternative version


30 bookmarked
Posted 11 Apr 2006

Applying Visual Styles to the TabControl in .NET 2.0

, 11 Apr 2006
Rate this:
Please Sign up or sign in to vote.
Applying the XP-look style with the hot key feature to the TabControl.

Sample Image


I had faced a big problem with the TabControl included in Visual Studio 2005. So I applied a "Mnemonic" (hot key) feature to the TabControl, and for this reason I had set the DrawMode property to OwnerDrawFixed. But setting this property removed the XP-look style for the button.

So I tried to implement the DrawItem event for re-drawing the button, but it did not seem to work. I even tried the "Sky Bound component" which is freely available on the net, but it did not match my requirement.

So, finally I decided to build my own control. I browsed the internet for some resources concerning this, but I was not satisfied with what I found.

So here is the control, in which I have applied the XP-look style with the hot key feature.


First of all, we need to set the double buffering technique to improve painting and to allow the control to change its appearance:

Me.SetStyle(ControlStyles.UserPaint, True)
Me.SetStyle(ControlStyles.AllPaintingInWmPaint, True)
Me.SetStyle(ControlStyles.DoubleBuffer, True)
Me.SetStyle(ControlStyles.ResizeRedraw, True)
Me.SetStyle(ControlStyles.SupportsTransparentBackColor, True)

Then, you need to override the OnPaint event and draw your own control. The basic steps involved are:

Protected Overrides Function ProcessMnemonic(ByVal charCode As Char) As Boolean
    For Each p As TabPage In Me.TabPages
        If Control.IsMnemonic(charCode, p.Text) Then
            Me.SelectedTab = p
            Return True
        End If
    Next p
    Return False
End Function 'ProcessMnemonic
Protected Overrides Sub OnPaint(ByVal e As _
End Sub

Friend Sub DrawControl(ByVal g As Graphics)
    If Not Visible Then
    End If
    Dim render As New VisualStyleRenderer(VisualStyleElement.Tab.Pane.Normal)
    Dim TabControlArea As Rectangle = Me.ClientRectangle
    Dim TabArea As Rectangle = Me.DisplayRectangle
    TabArea.Y = TabArea.Y + 1
    TabArea.Width = TabArea.Width + 1
    Dim nDelta As Integer = SystemInformation.Border3DSize.Width
    TabArea.Inflate(nDelta, nDelta)
    render.DrawBackground(g, TabArea)
    Dim i As Integer = 0
    While i < Me.TabCount
        DrawTab(g, Me.TabPages(i), i)
        i += 1
    End While
End Sub
Friend Sub DrawTab(ByVal g As Graphics, ByVal tabPage _
           As TabPage, ByVal nIndex As Integer)
    Dim recBounds As Rectangle = Me.GetTabRect(nIndex)
    Dim tabTextArea As RectangleF = _
        CType(Me.GetTabRect(nIndex), RectangleF)
    Dim bSelected As Boolean = (Me.SelectedIndex = nIndex)
    Dim render As New VisualStyleRenderer(VisualStyleElement.Tab.Pane.Normal)
    render = New VisualStyleRenderer(VisualStyleElement.Tab.TabItem.Pressed)
    If bSelected Then
        recBounds.Height = recBounds.Height + 10
        render = New VisualStyleRenderer(VisualStyleElement.Tab.TabItem.Pressed)
        render.DrawBackground(g, recBounds)
        render.DrawEdge(g, recBounds, Edges.Diagonal, _
               EdgeStyle.Sunken, EdgeEffects.Flat)
        recBounds.Y = recBounds.Y + 1
        render = New VisualStyleRenderer(VisualStyleElement.Tab.TabItem.Normal)
        render.DrawBackground(g, recBounds)
        render.DrawEdge(g, recBounds, Edges.Diagonal, _
               EdgeStyle.Sunken, EdgeEffects.Flat)
    End If
    If (tabPage.ImageIndex >= 0) AndAlso _
                (Not (ImageList Is Nothing)) _
                AndAlso (Not (ImageList.Images(tabPage.ImageIndex) _
                Is Nothing)) Then
        Dim nLeftMargin As Integer = 8
        Dim nRightMargin As Integer = 2
        Dim img As Image = ImageList.Images(tabPage.ImageIndex)
        Dim rimage As Rectangle = New Rectangle(recBounds.X + _
                   nLeftMargin, recBounds.Y + 1, img.Width, img.Height)
        Dim nAdj As Single = CType((nLeftMargin + _
                    img.Width + nRightMargin), Single)
        rimage.Y += (recBounds.Height - img.Height) / 2
        tabTextArea.X += nAdj
        tabTextArea.Width -= nAdj
        g.DrawImage(img, rimage)
    End If
    Dim stringFormat As StringFormat = New StringFormat
    stringFormat.Alignment = StringAlignment.Center
    stringFormat.LineAlignment = StringAlignment.Center
    If FlagControl Then
        stringFormat.HotkeyPrefix = Drawing.Text.HotkeyPrefix.Show
        stringFormat.HotkeyPrefix = Drawing.Text.HotkeyPrefix.Hide
    End If
    Dim br As Brush
    br = New SolidBrush(tabPage.ForeColor)
    g.DrawString(tabPage.Text, Font, br, tabTextArea, stringFormat)
End Sub

Using the Code

To use the code, simply add a reference to the TabControl into the new project and drag the TabControl to your form.


Make your comments, corrections, or additions for credits. Your feedback is most welcome.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Web Developer
India India
No Biography provided

You may also be interested in...


Comments and Discussions

GeneralSetTabRect Pin
Discofunk5-Mar-08 10:28
memberDiscofunk5-Mar-08 10:28 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web04 | 2.8.180615.1 | Last Updated 11 Apr 2006
Article Copyright 2006 by Pankaj.Patel
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid