Click here to Skip to main content
15,918,889 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 32.4K   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 
BugOnPaint problem Pin
BazE3020-Jul-15 23:00
BazE3020-Jul-15 23:00 
Hi,

I've been using this control a few months now and I really like it. However, I've been able to track down a serious issue of CPU usage going to 100% that renders this unusable. Originally I thought it was my code or some other control I had but a few days of stack tracing, testing and redesign it still comes back to this control.

The problem arises when the form, with this tab control, is partially or fully hidden by another screen. The best way to test this is to use task manager and have it completely cover your form. Click away from the screen and watch the CPU rise to 100%. You can recover the usage by hiding task manager and clicking on the screen to invoke the 'onpaint' event. This happens regardless of any other control being on the MBtabcontrol but seems to only happen when there is a tab page. i.e. tabpage count > 0.

The below code is what is looped continuously. I have not been able to resolve this myself so I have to stop using this control. I hope the issue gets resolved soon.

Regards
Barry

VB
''' <summary>
   ''' Handles Paint for MBTabControl.
   ''' </summary>
   ''' <param name="e">e As EventArgs</param>
   Protected Overrides Sub OnPaint(ByVal e As PaintEventArgs)

       If e.ClipRectangle.Equals(Me.ClientRectangle) Then
           Me.CustomPaint(e.Graphics)
       Else
           Me.Invalidate()
       End If

   End Sub

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.