Click here to Skip to main content
15,895,777 members
Articles / .NET / .NET4

MBTab Control With Custom Visual Styles

Rate me:
Please Sign up or sign in to vote.
4.33/5 (5 votes)
8 Sep 2013CPOL1 min read 32K   2.8K   10   11
MBTab Control With Custom Visual Styles using VB.NET
650295/MBTabControl_Demo.JPG

Introduction

Why another Tab Control? The standard Tab Control is too limited in functionality and I couldn't find a custom control written that did all that I wanted. This is a User Control with lots of properties and versatility. It is simple to use, just drop it on the form, adjust the design time properties, and use it like the normal Tab Control.

Background

MBTabControl is a Control which inherits all the properties of a simple TabControl control. I added some extra functionalities in MBTabControl like Glow, Tabs with Rounded Corners, Tabs with Images etc. The language used is VB.NET.

Control Properties

Here is the list of some properties available in MBTabControl:
  • SelectedTabBorderColor: This property is used to set Border Color of selected Tab.
  • TabCloseButton: This property is used to display Close Button on Tab.
  • TabTextColor: This property is used to set the Text Color of Tab.
  • Radius: This property is used to set corner radius of Tab.
  • CloseButtonColor: This property is used to set the Close Button color of Tab.

Using the code

The concept for this MBTabControl came from "Microsoft Ribbons". I organized my control events and functions into layers like this:

This method draw Tab Page for MBTabControl:

VB.NET
''' <summary>
''' Draw TabPage for MBTabControl
''' </summary>
Private Sub DrawTabPage(ByVal index As Integer, ByVal graphics As Graphics)
        graphics.SmoothingMode = SmoothingMode.HighSpeed
        Using tabPageBorderPath As GraphicsPath = Me.GetTabPageBorder(index)
            Using fillBrush As Brush = Me._StyleProvider.GetPageBackgroundBrush(index)
                graphics.FillPath(fillBrush, tabPageBorderPath)
            End Using
            If Me._Style <> MBTabStyle.None Then
                Me._StyleProvider.PaintTab(index, graphics)
                Me.DrawTabImage(index, graphics)
                Me.DrawTabText(index, graphics)
            End If
            Me.DrawTabBorder(tabPageBorderPath, index, graphics)
        End Using
End Sub  
This method draw Images on Tab for MBTabControl:
VB.NET
''' <summary>
''' Draw TabImage for MBTabControl
''' </summary>
Private Sub DrawTabImage(ByVal index As Integer, ByVal graphics As Graphics)
        Dim tabImage As Image = Nothing
        If Me.TabPages(index).ImageIndex > -1 AndAlso Me.ImageList IsNot Nothing AndAlso Me.ImageList.Images.Count > Me.TabPages(index).ImageIndex Then
            tabImage = Me.ImageList.Images(Me.TabPages(index).ImageIndex)
        ElseIf (Not String.IsNullOrEmpty(Me.TabPages(index).ImageKey) AndAlso Not Me.TabPages(index).ImageKey.Equals("(none)", StringComparison.OrdinalIgnoreCase)) AndAlso Me.ImageList IsNot Nothing AndAlso Me.ImageList.Images.ContainsKey(Me.TabPages(index).ImageKey) Then
            tabImage = Me.ImageList.Images(Me.TabPages(index).ImageKey)
        End If
        If tabImage IsNot Nothing Then
            If Me.RightToLeftLayout Then
                tabImage.RotateFlip(RotateFlipType.RotateNoneFlipX)
            End If
            Dim imageRect As Rectangle = Me.GetTabImageRect(index)
            If Me.TabPages(index).Enabled Then
                graphics.DrawImage(tabImage, imageRect)
            Else
                ControlPaint.DrawImageDisabled(graphics, tabImage, imageRect.X, imageRect.Y, Color.Transparent)
            End If
        End If
End Sub 
This method draw Close Button on Tab for MBTabControl:
VB.NET
Protected Overridable Sub DrawTabCloseButton(ByVal index As Integer, ByVal graphics As Graphics)
        If Me._ShowTabCloser Then
            Dim closerRect As Rectangle = Me._TabControl.GetTabCloserRect(index)
            graphics.SmoothingMode = SmoothingMode.AntiAlias
            Using closerPath As GraphicsPath = MBTabStyleProvider.GetCloserPath(closerRect)
                If closerRect.Contains(Me._TabControl.MousePosition) Then
                    Using closerPen As New Pen(Me._CloserColorActive)
                        graphics.DrawPath(closerPen, closerPath)
                    End Using
                Else
                    Using closerPen As New Pen(Me._CloserColor)
                        graphics.DrawPath(closerPen, closerPath)
                    End Using

                End If
            End Using
        End If
End Sub

Points of Interest

650295/MBTabControlPOI.JPG

It is very easy to use the MBTabControl in your application. Simply add the reference of the provided DLL to your application and just drag and drop.

650295/MBTabControl.JPG

History

  • 8/9/2013: MBTabControlVersion 1.0

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer
India India
It always seems good to hear about me, but the thing I do is I code. I'm Interested in Designing Windows Based Application, Web Applications and building Mobile Applications. Currently restricting it to Android 4.0 applications, building Internet Based Applications using ASP.NET and contributing to bring the student community to a position which will help technology to reach the greatest heights ever. A very Big fan of Microsoft & Android..!!

Comments and Discussions

 
PraiseThe most useful tool Pin
Member of Code Project :)26-Jul-17 3:36
Member of Code Project :)26-Jul-17 3:36 
QuestionVisual Studio designer lock up Pin
dungeon_dave9-Jun-16 5:00
dungeon_dave9-Jun-16 5:00 
If you encounter some lockup in the Visual Studio designer, like I did, please have a look at the post by Eduardo Tagle on this page :
Painting Your Own Tabs - Second Edition[^]

That resolved my issue
BugOnPaint problem Pin
BazE3020-Jul-15 23:00
BazE3020-Jul-15 23:00 
GeneralGood Work Pin
AbdulRahman A. Badry2-Jan-15 8:56
professionalAbdulRahman A. Badry2-Jan-15 8:56 
GeneralRe: Good Work Pin
Manoj K Bhoir3-Jan-15 2:22
professionalManoj K Bhoir3-Jan-15 2:22 
QuestionChanging Tab color Pin
Member 1134522731-Dec-14 21:54
Member 1134522731-Dec-14 21:54 
AnswerRe: Changing Tab color Pin
Manoj K Bhoir31-Dec-14 22:16
professionalManoj K Bhoir31-Dec-14 22:16 
QuestionAll this work and we can't change the color of the tabs? Pin
DotusLeg13-Jul-14 13:17
DotusLeg13-Jul-14 13:17 
QuestionZip downloads are corrupt... Pin
supersystems23-Jun-14 6:37
supersystems23-Jun-14 6:37 
GeneralMy vote of 1 Pin
splinterz15-Dec-13 11:59
splinterz15-Dec-13 11:59 
QuestionDuplicate Pin
splinterz11-Dec-13 0:22
splinterz11-Dec-13 0:22 

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.