MBTab Control With Custom Visual Styles

This article provides an extended Tab Control with custom Visual Styles using VB.NET.

 

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 many properties and versatility. It is simple to use, just drop it onto the form, adjust the design time properties and use it like the normal Tab Control.

Background

MBTabControl is a Control that 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 and so on. The language used is VB.NET.

Control Properties

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

Code

The concept for this MBTabControl came from "Microsoft Ribbons". I organized my control events and functions into layers as in the following.

The following method draws a tab page for MBTabControl:

  1. ''' <summary>  
  2. ''' Draw TabPage for MBTabControl  
  3. ''' </summary>  
  4. Private Sub DrawTabPage(ByVal index As IntegerByVal graphics As Graphics)  
  5.         graphics.SmoothingMode = SmoothingMode.HighSpeed  
  6.         Using tabPageBorderPath As GraphicsPath = Me.GetTabPageBorder(index)  
  7.             Using fillBrush As Brush = Me._StyleProvider.GetPageBackgroundBrush(index)  
  8.                 graphics.FillPath(fillBrush, tabPageBorderPath)  
  9.             End Using  
  10.             If Me._Style <> MBTabStyle.None Then  
  11.                 Me._StyleProvider.PaintTab(index, graphics)  
  12.                 Me.DrawTabImage(index, graphics)  
  13.                 Me.DrawTabText(index, graphics)  
  14.             End If  
  15.             Me.DrawTabBorder(tabPageBorderPath, index, graphics)  
  16.         End Using  
  17. End Sub    
The following method draws images on the tab for the MBTabControl:
  1. ''' <summary>  
  2. ''' Draw TabImage for MBTabControl  
  3. ''' </summary>  
  4. Private Sub DrawTabImage(ByVal index As IntegerByVal graphics As Graphics)  
  5.         Dim tabImage As Image = Nothing  
  6.         If Me.TabPages(index).ImageIndex > -1 AndAlso Me.ImageList IsNot Nothing AndAlso Me.ImageList.Images.Count > Me.TabPages(index).ImageIndex Then  
  7.             tabImage = Me.ImageList.Images(Me.TabPages(index).ImageIndex)  
  8.         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  
  9.             tabImage = Me.ImageList.Images(Me.TabPages(index).ImageKey)  
  10.         End If  
  11.         If tabImage IsNot Nothing Then  
  12.             If Me.RightToLeftLayout Then  
  13.                 tabImage.RotateFlip(RotateFlipType.RotateNoneFlipX)  
  14.             End If  
  15.             Dim imageRect As Rectangle = Me.GetTabImageRect(index)  
  16.             If Me.TabPages(index).Enabled Then  
  17.                 graphics.DrawImage(tabImage, imageRect)  
  18.             Else  
  19.                 ControlPaint.DrawImageDisabled(graphics, tabImage, imageRect.X, imageRect.Y, Color.Transparent)  
  20.             End If  
  21.         End If  
  22. End Sub  
The following method draws a Close button on the tab for the MBTabControl:
  1. Protected Overridable Sub DrawTabCloseButton(ByVal index As IntegerByVal graphics As Graphics)  
  2.         If Me._ShowTabCloser Then  
  3.             Dim closerRect As Rectangle = Me._TabControl.GetTabCloserRect(index)  
  4.             graphics.SmoothingMode = SmoothingMode.AntiAlias  
  5.             Using closerPath As GraphicsPath = MBTabStyleProvider.GetCloserPath(closerRect)  
  6.                 If closerRect.Contains(Me._TabControl.MousePosition) Then  
  7.                     Using closerPen As New Pen(Me._CloserColorActive)  
  8.                         graphics.DrawPath(closerPen, closerPath)  
  9.                     End Using  
  10.                 Else  
  11.                     Using closerPen As New Pen(Me._CloserColor)  
  12.                         graphics.DrawPath(closerPen, closerPath)  
  13.                     End Using  
  14.   
  15.                 End If  
  16.             End Using  
  17.         End If  
  18. 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

  • MBTabControl Version 1.0