MBTab Control With Custom Visual Styles

• Download demo - 29 KB
• Download source - 291.9 KB

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:

''' <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:

''' <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:

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

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.

History

• 8/9/2013: MBTabControlVersion 1.0