Adding Icon and increasing width of tabpages to show the close button in a tabcontrol

Question

I have this code right now,
Public Class FSMTabControl
Inherits TabControl
#Region "Declarations"
Private _TextColour As Color = Color.FromArgb(255, 255, 255)
Private _BackTabColour As Color = Color.FromArgb(54, 54, 54)
Private _BaseColour As Color = Color.FromArgb(35, 35, 35)
Private _ActiveColour As Color = Color.FromArgb(47, 47, 47)
Private _BorderColour As Color = Color.FromArgb(30, 30, 30)
Private _UpLineColour As Color = Color.FromArgb(0, 160, 199)
Private _HorizLineColour As Color = Color.FromArgb(23, 119, 151)
Private CenterSF As New StringFormat With {.Alignment = StringAlignment.Center, .LineAlignment = StringAlignment.Center}
#End Region
#Region "Properties"
<Category("Colours")> _
Public Property BorderColour As Color
Get
Return _BorderColour
End Get
Set(value As Color)
_BorderColour = value
End Set
End Property
<Category("Colours")> _
Public Property UpLineColour As Color
Get
Return _UpLineColour
End Get
Set(value As Color)
_UpLineColour = value
End Set
End Property
<Category("Colours")> _
Public Property HorizontalLineColour As Color
Get
Return _HorizLineColour
End Get
Set(value As Color)
_HorizLineColour = value
End Set
End Property
<Category("Colours")> _
Public Property TextColour As Color
Get
Return _TextColour
End Get
Set(value As Color)
_TextColour = value
End Set
End Property
<Category("Colours")> _
Public Property BackTabColour As Color
Get
Return _BackTabColour
End Get
Set(value As Color)
_BackTabColour = value
End Set
End Property
<Category("Colours")> _
Public Property BaseColour As Color
Get
Return _BaseColour
End Get
Set(value As Color)
_BaseColour = value
End Set
End Property
<Category("Colours")> _
Public Property ActiveColour As Color
Get
Return _ActiveColour
End Get
Set(value As Color)
_ActiveColour = value
End Set
End Property
Protected Overrides Sub CreateHandle()
MyBase.CreateHandle()
Alignment = TabAlignment.Bottom
End Sub
#End Region
#Region "Draw Control"
Sub New()
SetStyle(ControlStyles.AllPaintingInWmPaint Or ControlStyles.UserPaint Or _
ControlStyles.ResizeRedraw Or ControlStyles.OptimizedDoubleBuffer, True)
DoubleBuffered = True
Font = New Font("Segoe UI", 10)
SizeMode = TabSizeMode.FillToRight
ItemSize = New Size(240, 32)
End Sub
Protected Overrides Sub OnPaint(e As PaintEventArgs)
Dim g = e.Graphics
With G
.SmoothingMode = SmoothingMode.HighQuality
.PixelOffsetMode = PixelOffsetMode.HighQuality
.TextRenderingHint = TextRenderingHint.ClearTypeGridFit
.Clear(_BaseColour)
Try : SelectedTab.BackColor = _BackTabColour : Catch : End Try
Try : SelectedTab.BorderStyle = BorderStyle.FixedSingle : Catch : End Try
.DrawRectangle(New Pen(_BorderColour, 2), New Rectangle(0, 0, Width, Height))
For i = 0 To TabCount - 1
Dim Base As New Rectangle(New Point(GetTabRect(i).Location.X, GetTabRect(i).Location.Y), New Size(GetTabRect(i).Width, GetTabRect(i).Height))
Dim BaseSize As New Rectangle(Base.Location, New Size(Base.Width, Base.Height))
If i = SelectedIndex Then
.FillRectangle(New SolidBrush(_BaseColour), BaseSize)
.FillRectangle(New SolidBrush(_ActiveColour), New Rectangle(Base.X + 1, Base.Y - 3, Base.Width, Base.Height + 5))
.DrawString(TabPages(i).Text, Font, New SolidBrush(_TextColour), New Rectangle(Base.X + 7, Base.Y, Base.Width - 3, Base.Height), CenterSF)
.DrawLine(New Pen(_HorizLineColour, 2), New Point(Base.X + 3, CInt(Base.Height / 2 + 2)), New Point(Base.X + 9, CInt(Base.Height / 2 + 2)))
.DrawLine(New Pen(_UpLineColour, 2), New Point(Base.X + 3, Base.Y - 3), New Point(Base.X + 3, Base.Height + 5))
Else
.DrawString(TabPages(i).Text, Font, New SolidBrush(_TextColour), BaseSize, CenterSF)
End If
Next
.InterpolationMode = InterpolationMode.HighQualityBicubic
End With
End Sub
Private Declare Auto Function SetParent Lib "user32" (ByVal hWndChild As IntPtr, ByVal hWndNewParent As IntPtr) As IntPtr
Protected CloseButtonCollection As New Dictionary(Of Button, TabPage)
Private _ShowCloseButtonOnTabs As Boolean = True
<Browsable(True), DefaultValue(True), Category("Behavior"), Description("Indicates whether a close button should be shown on each TabPage")> _
Public Property ShowCloseButtonOnTabs() As Boolean
Get
Return _ShowCloseButtonOnTabs
End Get
Set(ByVal value As Boolean)
_ShowCloseButtonOnTabs = value
For Each btn In CloseButtonCollection.Keys
btn.Visible = _ShowCloseButtonOnTabs
Next
RePositionCloseButtons()
End Set
End Property
Protected Overrides Sub OnCreateControl()
MyBase.OnCreateControl()
RePositionCloseButtons()
End Sub
Protected Overrides Sub OnControlAdded(ByVal e As System.Windows.Forms.ControlEventArgs)
MyBase.OnControlAdded(e)
Dim tp As TabPage = DirectCast(e.Control, TabPage)
Dim rect As Rectangle = Me.GetTabRect(Me.TabPages.IndexOf(tp))
Dim btn As Button = AddCloseButton(tp)
btn.Size = New Size(CInt(rect.Height / 2), CInt(rect.Height / 2))
btn.Location = New Point(rect.X + rect.Width - rect.Height + 11, CInt(rect.Y + 7))
SetParent(btn.Handle, Me.Handle)
AddHandler btn.Click, AddressOf OnCloseButtonClick
CloseButtonCollection.Add(btn, tp)
End Sub
Protected Overrides Sub OnControlRemoved(ByVal e As System.Windows.Forms.ControlEventArgs)
Dim btn As Button = CloseButtonOfTabPage(DirectCast(e.Control, TabPage))
RemoveHandler btn.Click, AddressOf OnCloseButtonClick
CloseButtonCollection.Remove(btn)
SetParent(btn.Handle, Nothing)
btn.Dispose()
MyBase.OnControlRemoved(e)
End Sub
Protected Overrides Sub OnLayout(ByVal levent As System.Windows.Forms.LayoutEventArgs)
MyBase.OnLayout(levent)
RePositionCloseButtons()
End Sub
Public Event CloseButtonClick As CancelEventHandler
Protected Overridable Sub OnCloseButtonClick(ByVal sender As Object, ByVal e As EventArgs)
If Not DesignMode Then
Dim btn As Button = DirectCast(sender, Button)
Dim tp As TabPage = CloseButtonCollection(btn)
Dim ee As New CancelEventArgs
RaiseEvent CloseButtonClick(sender, ee)
If Not ee.Cancel Then
Me.TabPages.Remove(tp)
RePositionCloseButtons()
End If
End If
End Sub
Protected Overridable Function AddCloseButton(ByVal tp As TabPage) As Button
Dim closeButton As New Button
With closeButton
'' TODO: Give a good visual appearance to the Close button, maybe by assigning images etc.
'' Here I have not used images to keep things simple.
.Text = "X"
.FlatStyle = FlatStyle.Flat
.BackColor = _BaseColour
.ForeColor = Color.White
.Font = New Font("Microsoft Sans Serif", 6, FontStyle.Bold)
End With
Return closeButton
End Function
Public Sub RePositionCloseButtons()
For Each item In CloseButtonCollection
RePositionCloseButtons(item.Value)
Next
End Sub
Public Sub RePositionCloseButtons(ByVal tp As TabPage)
Dim btn As Button = CloseButtonOfTabPage(tp)
If btn IsNot Nothing Then
Dim tpIndex As Integer = Me.TabPages.IndexOf(tp)
If tpIndex >= 0 Then
Dim rect As Rectangle = Me.GetTabRect(tpIndex)
If Me.SelectedTab Is tp Then
btn.BackColor = Color.Red
btn.Size = New Size(CInt(rect.Height / 2), CInt(rect.Height / 2))
btn.Location = New Point(rect.X + rect.Width - rect.Height + 11, CInt(rect.Y + 7))
Else
btn.BackColor = _BaseColour
btn.Size = New Size(CInt(rect.Height / 2), CInt(rect.Height / 2))
btn.Location = New Point(rect.X + rect.Width - rect.Height + 11, CInt(rect.Y + 7))
End If
btn.Visible = ShowCloseButtonOnTabs
btn.BringToFront()
End If
End If
End Sub
Protected Function CloseButtonOfTabPage(ByVal tp As TabPage) As Button
Return (From item In CloseButtonCollection Where item.Value Is tp Select item.Key).FirstOrDefault
End Function
#End Region
End Class
This code shows a perfect tabcontrol as in the picture below,
I managed to get this code working by combining three other VB themes I found. Right now, I just want to increase the width of the tab so the close button doesn't hides the text. And I want to add a icon to the left of the tab and be able to change it on
runtime.
The icons name will be on, off, 1, 2, plus .ico 
Is it possible ? and is it possible to make the tabs curved at the corner like in chrome.

Answer 1

Hi,
 I have went through your TabControl class and changed it around a little bit to get something similar to what i think you want.  I made it so that the Tabs are resized with the TabControl itself so that they always fill the width of the TabControl. 
I also, made the Text of the tabs have its own rectangle which will automatically adjust it`s width according to weather or not the close buttons are shown so the text will never be under the buttons.
 As for the Icons, you could create another small class that inherits from the TabPage base class and add a public property to it for the Icon image.  You would have to use that class to add TabPages and set the Icon property.  Then in the
TabControl class`s OnPaint overrides sub you would check if the Icon property of the TabPage is set and draw the image if it is.
 I didn`t go that far but, i used the TabPage`s Tag property for the Icon image.  Actually it is just an Image, not an Icon.  So, in the TabControl`s OnPaint overrides sub i check if the TabPage`s Tag property is set to an Image and if it
is i adjust the Text rectangle to avoid the Image and draw the image.
 I moved the StringFormat to the OnPaint sub and set it to keep the text left aligned so it stayed next to the Image.  You can change it back to the Center if you want.  I also set the StringFormat trimming to EllipsisCharacter so it will
cut the text off if it is to long to fit between the Image and the Close button.
 You can test it in a new form project first and to check out how it works and what i changed.
Imports System.ComponentModel
Imports System.Drawing.Drawing2D
Imports System.Drawing.Text
Public Class FSMTabControl
Inherits TabControl
#Region "Declarations"
Private _TextColour As Color = Color.FromArgb(255, 255, 255)
Private _BackTabColour As Color = Color.FromArgb(54, 54, 54)
Private _BaseColour As Color = Color.FromArgb(35, 35, 35)
Private _ActiveColour As Color = Color.FromArgb(47, 47, 47)
Private _BorderColour As Color = Color.FromArgb(30, 30, 30)
Private _UpLineColour As Color = Color.FromArgb(0, 160, 199)
Private _HorizLineColour As Color = Color.FromArgb(23, 119, 151)
#End Region
#Region "Properties"
<Category("Colours")> _
Public Property BorderColour() As Color
Get
Return _BorderColour
End Get
Set(ByVal value As Color)
_BorderColour = value
End Set
End Property
<Category("Colours")> _
Public Property UpLineColour() As Color
Get
Return _UpLineColour
End Get
Set(ByVal value As Color)
_UpLineColour = value
End Set
End Property
<Category("Colours")> _
Public Property HorizontalLineColour() As Color
Get
Return _HorizLineColour
End Get
Set(ByVal value As Color)
_HorizLineColour = value
End Set
End Property
<Category("Colours")> _
Public Property TextColour() As Color
Get
Return _TextColour
End Get
Set(ByVal value As Color)
_TextColour = value
End Set
End Property
<Category("Colours")> _
Public Property BackTabColour() As Color
Get
Return _BackTabColour
End Get
Set(ByVal value As Color)
_BackTabColour = value
End Set
End Property
<Category("Colours")> _
Public Property BaseColour() As Color
Get
Return _BaseColour
End Get
Set(ByVal value As Color)
_BaseColour = value
End Set
End Property
<Category("Colours")> _
Public Property ActiveColour() As Color
Get
Return _ActiveColour
End Get
Set(ByVal value As Color)
_ActiveColour = value
End Set
End Property
Protected Overrides Sub CreateHandle()
MyBase.CreateHandle()
Alignment = TabAlignment.Bottom
End Sub
#End Region
#Region "Draw Control"
Sub New()
SetStyle(ControlStyles.AllPaintingInWmPaint Or ControlStyles.UserPaint Or ControlStyles.ResizeRedraw Or ControlStyles.OptimizedDoubleBuffer, True)
DoubleBuffered = True
Font = New Font("Segoe UI", 10)
SizeMode = TabSizeMode.Fixed
End Sub
Protected Overrides Sub OnPaint(ByVal e As PaintEventArgs)
With e.Graphics
.SmoothingMode = SmoothingMode.HighQuality
.PixelOffsetMode = PixelOffsetMode.HighQuality
.TextRenderingHint = TextRenderingHint.ClearTypeGridFit
.Clear(_BaseColour)
Try : SelectedTab.BackColor = _BackTabColour : Catch : End Try
Try : SelectedTab.BorderStyle = BorderStyle.FixedSingle : Catch : End Try
.DrawRectangle(New Pen(_BorderColour, 2), New Rectangle(0, 0, Width, Height))
If Me.Created AndAlso Me.TabCount > 0 Then
Dim tw As Integer = CInt(Me.ClientSize.Width / Me.TabCount)
Dim offset As Integer = Me.TabCount
If Me.ItemSize.Width <> tw - offset Then Me.ItemSize = New Size(tw - offset, 32)
End If
Using CenterSF As New StringFormat With {.Alignment = StringAlignment.Near, .LineAlignment = StringAlignment.Center, .Trimming = StringTrimming.EllipsisCharacter, .FormatFlags = StringFormatFlags.NoWrap}
For i As Integer = 0 To TabCount - 1
Dim Base As Rectangle = Me.GetTabRect(i)
Dim txtrect As New Rectangle(Base.Left, Base.Top, Base.Width, Base.Height)
Dim img As Image = Nothing
If Me.TabPages(i).Tag IsNot Nothing Then
txtrect.X += Base.Height
txtrect.Width -= Base.Height
img = DirectCast(Me.TabPages(i).Tag, Image)
End If
If ShowCloseButtonOnTabs Then
txtrect.Width -= Base.Height
End If
If i = SelectedIndex Then
.FillRectangle(New SolidBrush(_BaseColour), Base)
.FillRectangle(New SolidBrush(_ActiveColour), New Rectangle(Base.X + 1, Base.Y - 3, Base.Width, Base.Height + 4))
.DrawString(TabPages(i).Text, Font, New SolidBrush(_TextColour), txtrect, CenterSF)
.DrawLine(New Pen(_HorizLineColour, 2), New Point(Base.X + 3, CInt(Base.Height / 2 + 2)), New Point(Base.X + 9, CInt(Base.Height / 2 + 2)))
.DrawLine(New Pen(_UpLineColour, 2), New Point(Base.X + 3, Base.Y - 3), New Point(Base.X + 3, Base.Height + 5))
Else
.DrawString(TabPages(i).Text, Font, New SolidBrush(_TextColour), txtrect, CenterSF)
End If
If img IsNot Nothing Then
.DrawImage(img, Base.Left + 2, Base.Top + 2, Base.Height - 4, Base.Height - 4)
End If
Next
End Using
.InterpolationMode = InterpolationMode.HighQualityBicubic
End With
End Sub
Private Declare Auto Function SetParent Lib "user32" (ByVal hWndChild As IntPtr, ByVal hWndNewParent As IntPtr) As IntPtr
Protected CloseButtonCollection As New Dictionary(Of Button, TabPage)
Private _ShowCloseButtonOnTabs As Boolean = True
<Browsable(True), DefaultValue(True), Category("Behavior"), Description("Indicates whether a close button should be shown on each TabPage")> _
Public Property ShowCloseButtonOnTabs() As Boolean
Get
Return _ShowCloseButtonOnTabs
End Get
Set(ByVal value As Boolean)
_ShowCloseButtonOnTabs = value
For Each btn As Button In CloseButtonCollection.Keys
btn.Visible = _ShowCloseButtonOnTabs
Next
RePositionCloseButtons()
Me.Refresh()
End Set
End Property
Protected Overrides Sub OnCreateControl()
MyBase.OnCreateControl()
RePositionCloseButtons()
End Sub
Protected Overrides Sub OnControlAdded(ByVal e As System.Windows.Forms.ControlEventArgs)
MyBase.OnControlAdded(e)
Dim tp As TabPage = DirectCast(e.Control, TabPage)
Dim rect As Rectangle = Me.GetTabRect(Me.TabPages.IndexOf(tp))
Dim btn As Button = AddCloseButton(tp)
btn.Size = New Size(CInt(rect.Height / 2), CInt(rect.Height / 2))
btn.Location = New Point(rect.X + rect.Width - rect.Height + 11, CInt(rect.Y + 7))
SetParent(btn.Handle, Me.Handle)
AddHandler btn.Click, AddressOf OnCloseButtonClick
'ResizeTabs()
CloseButtonCollection.Add(btn, tp)
End Sub
Protected Overrides Sub OnControlRemoved(ByVal e As System.Windows.Forms.ControlEventArgs)
Dim btn As Button = CloseButtonOfTabPage(DirectCast(e.Control, TabPage))
RemoveHandler btn.Click, AddressOf OnCloseButtonClick
CloseButtonCollection.Remove(btn)
SetParent(btn.Handle, Nothing)
btn.Dispose()
MyBase.OnControlRemoved(e)
'ResizeTabs()
End Sub
Protected Overrides Sub OnLayout(ByVal levent As System.Windows.Forms.LayoutEventArgs)
MyBase.OnLayout(levent)
RePositionCloseButtons()
End Sub
Public Event CloseButtonClick As CancelEventHandler
Protected Overridable Sub OnCloseButtonClick(ByVal sender As Object, ByVal e As EventArgs)
If Not DesignMode Then
Dim btn As Button = DirectCast(sender, Button)
Dim tp As TabPage = CloseButtonCollection(btn)
Dim ee As New CancelEventArgs
RaiseEvent CloseButtonClick(sender, ee)
If Not ee.Cancel Then
Me.TabPages.Remove(tp)
RePositionCloseButtons()
End If
End If
End Sub
Protected Overridable Function AddCloseButton(ByVal tp As TabPage) As Button
Dim closeButton As New Button
With closeButton
'' TODO: Give a good visual appearance to the Close button, maybe by assigning images etc.
'' Here I have not used images to keep things simple.
.Text = "X"
.FlatStyle = FlatStyle.Flat
.BackColor = _BaseColour
.ForeColor = Color.White
.Font = New Font("Microsoft Sans Serif", 6, FontStyle.Bold)
End With
Return closeButton
End Function
Public Sub RePositionCloseButtons()
For Each item As KeyValuePair(Of Button, TabPage) In CloseButtonCollection
RePositionCloseButtons(item.Value)
Next
End Sub
Public Sub RePositionCloseButtons(ByVal tp As TabPage)
Dim btn As Button = CloseButtonOfTabPage(tp)
If btn IsNot Nothing Then
Dim tpIndex As Integer = Me.TabPages.IndexOf(tp)
If tpIndex >= 0 Then
Dim rect As Rectangle = Me.GetTabRect(tpIndex)
If Me.SelectedTab Is tp Then
btn.BackColor = Color.Red
btn.Size = New Size(CInt(rect.Height / 2), CInt(rect.Height / 2))
btn.Location = New Point(rect.Right - rect.Height + 11, CInt(rect.Y + 7))
Else
btn.BackColor = _BaseColour
btn.Size = New Size(CInt(rect.Height / 2), CInt(rect.Height / 2))
btn.Location = New Point(rect.Right - rect.Height + 11, CInt(rect.Y + 7))
End If
btn.Visible = ShowCloseButtonOnTabs
btn.BringToFront()
End If
End If
End Sub
Protected Function CloseButtonOfTabPage(ByVal tp As TabPage) As Button
Return (From item In CloseButtonCollection Where item.Value Is tp Select item.Key).FirstOrDefault
End Function
#End Region
End Class
 In the Form`s code you can set the images for the TabPage icons like this.
Public Class Form1
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
Me.TabPage1.Tag = Image.FromFile("C:\testfolder\img1.png")
Me.TabPage2.Tag = Image.FromFile("C:\testfolder\img2.png")
End Sub
End Class
 Here is an example of what it looks like.
If you say it can`t be done then i`ll try it
Thanks :)) I tried you code and it works perfectly.
Though i don't want the tabs have their width's by the size of form, so i fixed a width,
If Me.Created AndAlso Me.TabCount > 0 Then
'Dim tw As Integer = CInt(Me.ClientSize.Width / Me.TabCount)
'Dim offset As Integer = Me.TabCount
'If Me.ItemSize.Width <> tw - offset Then Me.ItemSize = New Size(tw - offset, 32)
Me.ItemSize = New Size(200, 32)
End If
Here is the screenshot,
I just don't know why the arrows (left and right) aren't full. here is a gif,
Why is that :O Should I paint the arrows as well ?