none
how do i change selected tab header color vb.net ?? RRS feed

  • Question

  • hello.I have created a custom tabcontrol myself.Now the problem is, i want the active tab's header color to be blue and the inactive tab's header color to be black

    Here's my code:

    Imports System.Drawing
    Imports System.Windows.Forms
    Imports System.Drawing.Drawing2D

    Public Class mytab
        Inherits TabControl

        Dim MainColor As Color
        Dim TextColor As Color
        Dim LightTheme As Boolean

        Public Property UseLightTheme() As Boolean
            Get
                Return LightTheme
            End Get
            Set(state As Boolean)
                LightTheme = state
                Refresh()
            End Set
        End Property

        Public Property TabColor As Color
            Get
                Return MainColor
            End Get
            Set(col As Color)
                MainColor = col
                Refresh()
            End Set
        End Property

        Public Property FontColor As Color
            Get
                Return TextColor
            End Get
            Set(col As Color)
                TextColor = col
                Refresh()
            End Set
        End Property

        Sub New()
            SetStyle(ControlStyles.AllPaintingInWmPaint Or ControlStyles.ResizeRedraw Or ControlStyles.UserPaint Or ControlStyles.OptimizedDoubleBuffer, True)
            DoubleBuffered = True
            SizeMode = TabSizeMode.Fixed
            ItemSize = New Size(100, 28)
            Size = New Size(400, 250)
            MainColor = Color.Azure
            TextColor = Color.Black
            LightTheme = False
            Alignment = TabAlignment.Top
        End Sub

        Function ToPen(ByVal color As Color) As Pen
            Return New Pen(color)
        End Function

        Function ToBrush(ByVal color As Color) As Brush
            Return New SolidBrush(color)
        End Function

        Protected Overrides Sub OnPaint(ByVal e As PaintEventArgs)
            Dim B As New Bitmap(Width, Height)
            Dim G As Graphics = Graphics.FromImage(B)

            'tabpage color
            If LightTheme = False Then
                Try : SelectedTab.BackColor = Color.FromArgb(255, 249, 250, 250) : Catch : End Try
                G.Clear(Color.FromArgb(255, 249, 250, 250))
            Else
                Try : SelectedTab.BackColor = Color.FromArgb(255, 220, 220, 220) : Catch : End Try
                G.Clear(Color.FromArgb(255, 220, 220, 220))
            End If

            'tab bar
            If LightTheme = False Then
                If Alignment = TabAlignment.Top Then
                    G.FillRectangle(New SolidBrush(Color.FromArgb(255, 255, 255, 255)), New Rectangle(0, 0, Width, ItemSize.Height))
                ElseIf Alignment = TabAlignment.Bottom Then
                    G.FillRectangle(New SolidBrush(Color.FromArgb(255, 255, 255, 255)), New Rectangle(0, Height - ItemSize.Height, Width, ItemSize.Height))
                ElseIf Alignment = TabAlignment.Left Then
                    G.FillRectangle(New SolidBrush(Color.FromArgb(255, 255, 255, 255)), New Rectangle(0, 0, ItemSize.Height, Height))
                ElseIf Alignment = TabAlignment.Right Then
                    G.FillRectangle(New SolidBrush(Color.FromArgb(255, 255, 255, 255)), New Rectangle(Width - ItemSize.Height, 0, ItemSize.Height, Height))
                End If
            Else
                If Alignment = TabAlignment.Top Then
                    G.FillRectangle(New SolidBrush(Color.FromArgb(255, 200, 200, 200)), New Rectangle(0, 0, Width, ItemSize.Height))
                ElseIf Alignment = TabAlignment.Bottom Then
                    G.FillRectangle(New SolidBrush(Color.FromArgb(255, 200, 200, 200)), New Rectangle(0, Height - ItemSize.Height, Width, ItemSize.Height))
                ElseIf Alignment = TabAlignment.Left Then
                    G.FillRectangle(New SolidBrush(Color.FromArgb(255, 200, 200, 200)), New Rectangle(0, 0, ItemSize.Height, Height))
                ElseIf Alignment = TabAlignment.Right Then
                    G.FillRectangle(New SolidBrush(Color.FromArgb(255, 200, 200, 200)), New Rectangle(Width - ItemSize.Height, 0, ItemSize.Height, Height))
                End If
            End If

            'tab bar \ panel separator
            If LightTheme = False Then
                If Alignment = TabAlignment.Top Then
                    G.DrawLine(ToPen(Me.MainColor), New Point(0, ItemSize.Height + 3), New Point(Width, ItemSize.Height + 3))
                ElseIf Alignment = TabAlignment.Bottom Then
                    G.DrawLine(ToPen(Me.MainColor), New Point(0, Height - ItemSize.Height), New Point(Width, Height - ItemSize.Height))
                ElseIf Alignment = TabAlignment.Left Then
                    G.DrawLine(ToPen(Me.MainColor), New Point(ItemSize.Height, 0), New Point(ItemSize.Height, Height))
                ElseIf Alignment = TabAlignment.Right Then
                    G.DrawLine(ToPen(Me.MainColor), New Point(Width - ItemSize.Height, 0), New Point(Width - ItemSize.Height, Height))
                End If
            Else
                If Alignment = TabAlignment.Top Then
                    G.DrawLine(New Pen(Color.FromArgb(255, 218, 218, 218)), New Point(0, ItemSize.Height), New Point(Width, ItemSize.Height))
                ElseIf Alignment = TabAlignment.Bottom Then
                    G.DrawLine(New Pen(Color.FromArgb(255, 218, 218, 218)), New Point(0, Height - ItemSize.Height), New Point(Width, Height - ItemSize.Height))
                ElseIf Alignment = TabAlignment.Left Then
                    G.DrawLine(New Pen(Color.FromArgb(255, 218, 218, 218)), New Point(ItemSize.Height, 0), New Point(ItemSize.Height, Height))
                ElseIf Alignment = TabAlignment.Right Then
                    G.DrawLine(New Pen(Color.FromArgb(255, 218, 218, 218)), New Point(Width - ItemSize.Height, 0), New Point(Width - ItemSize.Height, Height))
                End If
            End If

            'selected tab stuff

            For i = 0 To TabCount - 1
                If i = SelectedIndex Then

                    Dim x2 As Rectangle = New Rectangle(GetTabRect(i).Location.X, GetTabRect(i).Location.Y, GetTabRect(i).Width, GetTabRect(i).Height)
                    Dim myblend As New ColorBlend()
                    myblend.Colors = {Me.MainColor, Me.MainColor, Me.MainColor} 'colors
                    myblend.Positions = {0.0F, 0.5F, 1.0F}
                    Dim lgBrush As New LinearGradientBrush(x2, Color.Black, Color.Black, 90.0F)
                    lgBrush.InterpolationColors = myblend
                    G.FillRectangle(lgBrush, x2)
                    If LightTheme = False Then
                        G.DrawRectangle(New Pen(Color.FromArgb(255, 255, 255, 255)), x2)
                    Else
                        G.DrawRectangle(New Pen(Color.FromArgb(255, 35, 220, 210)), x2)
                    End If

                    'pointer (triange)
                    G.SmoothingMode = SmoothingMode.HighQuality

                    Dim pt As New Point
                    Dim pc As New Point
                    Dim pb As New Point

                    If Alignment = TabAlignment.Top Then
                        pt = New Point(GetTabRect(i).Location.X + ItemSize.Width / 2 - 5, ItemSize.Height + 2)
                        pc = New Point(GetTabRect(i).Location.X + ItemSize.Width / 2, ItemSize.Height - 5)
                        pb = New Point(GetTabRect(i).Location.X + ItemSize.Width / 2 + 5, ItemSize.Height + 2)
                    ElseIf Alignment = TabAlignment.Bottom Then
                        pt = New Point(GetTabRect(i).Location.X + ItemSize.Width / 2 - 5, Height - ItemSize.Height - 2)
                        pc = New Point(GetTabRect(i).Location.X + ItemSize.Width / 2, Height - ItemSize.Height + 5)
                        pb = New Point(GetTabRect(i).Location.X + ItemSize.Width / 2 + 5, Height - ItemSize.Height - 2)
                    ElseIf Alignment = TabAlignment.Left Then
                        pt = New Point(ItemSize.Height + 2, GetTabRect(i).Location.Y + ItemSize.Width / 2 - 5)
                        pc = New Point(ItemSize.Height - 5, GetTabRect(i).Location.Y + ItemSize.Width / 2)
                        pb = New Point(ItemSize.Height + 2, GetTabRect(i).Location.Y + ItemSize.Width / 2 + 5)
                    ElseIf Alignment = TabAlignment.Right Then
                        pt = New Point(Width - ItemSize.Height - 2, GetTabRect(i).Location.Y + ItemSize.Width / 2 - 5)
                        pc = New Point(Width - ItemSize.Height + 5, GetTabRect(i).Location.Y + ItemSize.Width / 2)
                        pb = New Point(Width - ItemSize.Height - 2, GetTabRect(i).Location.Y + ItemSize.Width / 2 + 5)
                    End If

                    Dim p() As Point = {pt, pc, pb}

                    If LightTheme = False Then
                        G.FillPolygon(ToBrush(Color.FromArgb(255, 255, 255, 255)), p) ' pointer color
                        G.DrawPolygon(New Pen(Color.FromArgb(255, 255, 255, 255)), p)
                    Else
                        G.FillPolygon(ToBrush(Color.FromArgb(255, 220, 220, 220)), p) ' pointer color
                        G.DrawPolygon(New Pen(Color.FromArgb(255, 220, 220, 220)), p)
                    End If

                    ' AREA 1
                    'paste here.........................................................................................
                    If ImageList IsNot Nothing Then
                        Try
                            If ImageList.Images(TabPages(i).ImageIndex) IsNot Nothing Then

                                G.DrawImage(ImageList.Images(TabPages(i).ImageIndex), New Point(x2.Location.X + 8, x2.Location.Y + 6))
                                G.DrawString("      " & TabPages(i).Text, Font, Me.ToBrush(Me.TextColor), x2, New StringFormat With {.LineAlignment = StringAlignment.Center, .Alignment = StringAlignment.Center})
                            Else
                                G.DrawString(TabPages(i).Text, New Font(Font.FontFamily, Font.Size, FontStyle.Bold), Me.ToBrush(Me.TextColor), x2, New StringFormat With {.LineAlignment = StringAlignment.Center, .Alignment = StringAlignment.Center})
                            End If
                        Catch ex As Exception
                            G.DrawString(TabPages(i).Text, New Font(Font.FontFamily, Font.Size, FontStyle.Bold), Me.ToBrush(Me.TextColor), x2, New StringFormat With {.LineAlignment = StringAlignment.Center, .Alignment = StringAlignment.Center})
                        End Try
                    Else
                        G.DrawString(TabPages(i).Text, New Font(Font.FontFamily, Font.Size, FontStyle.Bold), Me.ToBrush(Me.TextColor), x2, New StringFormat With {.LineAlignment = StringAlignment.Center, .Alignment = StringAlignment.Center})
                    End If
                    '...................................................................................................

                    If LightTheme = False Then
                        G.DrawLine(New Pen(Color.FromArgb(255, 255, 255, 255)), New Point(x2.Location.X - 1, x2.Location.Y - 1), New Point(x2.Location.X, x2.Location.Y))
                        G.DrawLine(New Pen(Color.FromArgb(255, 255, 255, 255)), New Point(x2.Location.X - 1, x2.Bottom - 1), New Point(x2.Location.X, x2.Bottom))
                    Else
                        G.DrawLine(New Pen(Color.FromArgb(255, 255, 255, 255)), New Point(x2.Location.X - 1, x2.Location.Y - 1), New Point(x2.Location.X, x2.Location.Y))
                        G.DrawLine(New Pen(Color.FromArgb(255, 255, 255, 255)), New Point(x2.Location.X - 1, x2.Bottom - 1), New Point(x2.Location.X, x2.Bottom))
                    End If

                Else
                    Dim x1 As Rectangle = New Rectangle(GetTabRect(i).Location.X, GetTabRect(i).Location.Y, GetTabRect(i).Width, GetTabRect(i).Height)
                    ' unselected tab color
                    If LightTheme = False Then
                        G.FillRectangle(New SolidBrush(Color.FromArgb(255, 255, 255, 255)), x1)

                    Else
                        G.FillRectangle(New SolidBrush(Color.FromArgb(255, 255, 255, 255)), x1)

                    End If

                    'tab borders
                    If Alignment = TabAlignment.Top Then
                        G.DrawLine(New Pen(MainColor), New Point(x1.Left, x1.Bottom), New Point(x1.Right, x1.Bottom))
                    ElseIf Alignment = TabAlignment.Bottom Then
                        G.DrawLine(New Pen(MainColor), New Point(x1.Left, x1.Top), New Point(x1.Right, x1.Top))
                    ElseIf Alignment = TabAlignment.Left Then
                        G.DrawLine(New Pen(MainColor), New Point(x1.Right, x1.Top), New Point(x1.Right, x1.Bottom))
                    ElseIf Alignment = TabAlignment.Right Then
                        G.DrawLine(New Pen(MainColor), New Point(x1.Left, x1.Top), New Point(x1.Left, x1.Bottom))
                    End If

                    ' AREA 2
                    'paste here......................................................................................
                    If LightTheme = False Then
                        If ImageList IsNot Nothing Then
                            Try
                                If ImageList.Images(TabPages(i).ImageIndex) IsNot Nothing Then
                                    G.DrawImage(ImageList.Images(TabPages(i).ImageIndex), New Point(x1.Location.X + 8, x1.Location.Y + 6))
                                    G.DrawString("      " & TabPages(i).Text, Font, Brushes.Black, x1, New StringFormat With {.LineAlignment = StringAlignment.Center, .Alignment = StringAlignment.Center})
                                Else
                                    G.DrawString(TabPages(i).Text, Font, Brushes.Black, x1, New StringFormat With {.LineAlignment = StringAlignment.Center, .Alignment = StringAlignment.Center})
                                End If
                            Catch ex As Exception
                                G.DrawString(TabPages(i).Text, Font, Brushes.Black, x1, New StringFormat With {.LineAlignment = StringAlignment.Center, .Alignment = StringAlignment.Center})
                            End Try
                        Else
                            G.DrawString(TabPages(i).Text, Font, Brushes.Black, x1, New StringFormat With {.LineAlignment = StringAlignment.Center, .Alignment = StringAlignment.Center})
                        End If
                    ElseIf LightTheme = True Then
                        If ImageList IsNot Nothing Then
                            Try
                                If ImageList.Images(TabPages(i).ImageIndex) IsNot Nothing Then
                                    G.DrawImage(ImageList.Images(TabPages(i).ImageIndex), New Point(x1.Location.X + 8, x1.Location.Y + 6))
                                    G.DrawString("      " & TabPages(i).Text, Font, ToBrush(Color.FromArgb(255, 64, 64, 64)), x1, New StringFormat With {.LineAlignment = StringAlignment.Center, .Alignment = StringAlignment.Center})
                                Else
                                    G.DrawString(TabPages(i).Text, Font, ToBrush(Color.FromArgb(255, 64, 64, 64)), x1, New StringFormat With {.LineAlignment = StringAlignment.Center, .Alignment = StringAlignment.Center})
                                End If
                            Catch ex As Exception
                                G.DrawString(TabPages(i).Text, Font, ToBrush(Color.FromArgb(255, 64, 64, 64)), x1, New StringFormat With {.LineAlignment = StringAlignment.Center, .Alignment = StringAlignment.Center})
                            End Try
                        Else
                            G.DrawString(TabPages(i).Text, Font, ToBrush(Color.FromArgb(255, 64, 64, 64)), x1, New StringFormat With {.LineAlignment = StringAlignment.Center, .Alignment = StringAlignment.Center})
                        End If
                        '................................................................................................

                    End If
                End If
            Next

            e.Graphics.DrawImage(B.Clone, 0, 0)
            G.Dispose() : B.Dispose()

        End Sub
    End Class

    What am i doing wrong??

    Monday, September 18, 2017 4:01 PM

All replies

  • You made this code? You don't have to make a bitmap when you have e.graphics to draw upon in a paint event.

                If TabControl1.SelectedIndex = e.Index Then
                    g.FillRectangle(New SolidBrush(Color.Blue), x1)
                Else
                    g.FillRectangle(New SolidBrush(Color.Black), x1)
    
                End If


    Monday, September 18, 2017 6:10 PM
  • Here is another example more like your post yesterday.

    You should draw more like this. Your example is very cumbersome.

    I could not figure how to remove the borders around the tabs maybe someone else can tell us?

    Others know how to do the string format using parameters with the event args e but I don't recall them. Maybe others will add that.

    I would probably only use one try catch for this whole routine, if that many.

    :)

    Public Class Form3
        Private Sub Form3_Load(sender As Object, e As EventArgs) Handles MyBase.Load
            BackColor = Color.AliceBlue
            TabControl1.Appearance = TabAppearance.Normal
            TabControl1.DrawMode = TabDrawMode.OwnerDrawFixed
            TabControl1.ItemSize = New Size(50, 22)
            TabControl1.Padding = New Point(40, 0)
    
            TabPage1.Text = "Page 1"
            TabPage1.BorderStyle = BorderStyle.None
            TabPage2.Text = "Page 2"
            TabPage2.BorderStyle = BorderStyle.None
    
        End Sub
    
        Private Sub TabControl1_DrawItem(sender As Object, e As DrawItemEventArgs) Handles TabControl1.DrawItem
            Dim tabTextArea As Rectangle = TabControl1.GetTabRect(e.Index)
    
            e.Graphics.FillRectangle(Brushes.White, tabTextArea)
    
            Dim rect As Rectangle
    
            Using br As New SolidBrush(Color.White),
                    p As New Pen(Color.Black, 1)
    
                rect = tabTextArea
                rect.Y = rect.Y + (rect.Height - 2)
                rect.Height = 3
    
                If TabControl1.SelectedIndex = e.Index Then br.Color = Color.SkyBlue
    
                e.Graphics.FillRectangle(br, rect)
    
                'draw the text
                TextRenderer.DrawText(e.Graphics, TabControl1.TabPages(e.Index).Text, New Font("Arial", 10), tabTextArea, TabControl1.TabPages(e.Index).ForeColor)
    
            End Using
        End Sub
    End Class

    Monday, September 18, 2017 6:56 PM
  • Hi Aousaf,

    Based on your thread's title, you want to change select tab header color of TabControl, you can do two thing to achieve it.

    First, you could need to set DrawMode as OwnerDrawFixed, then you handle TabControl_DreaItem event:

     Private Sub TabControl1_DrawItem(sender As Object, e As DrawItemEventArgs) Handles TabControl1.DrawItem
            '  Identify which TabPage is currently selected
            Dim SelectedTab As TabPage = TabControl1.TabPages(e.Index)
            'e.Graphics.FillRectangle(New SolidBrush(Color.Blue), e.Bounds)
            '  Get the area of the header of this TabPage
            'Dim HeaderRect As Rectangle = TabControl1.GetTabRect(e.Index)
            Dim HeaderRect As Rectangle = TabControl1.GetTabRect(e.Index)
    
            '  Create two Brushes to paint the Text
            Dim BlackTextBrush As New SolidBrush(Color.Black)
            Dim RedTextBrush As New SolidBrush(Color.Red)
    
            '  Set the Alignment of the Text
            Dim sf As New StringFormat()
            sf.Alignment = StringAlignment.Center
            sf.LineAlignment = StringAlignment.Center
    
            '  Paint the Text using the appropriate Bold and Color setting 
            If Convert.ToBoolean(e.State And DrawItemState.Selected) Then
                e.Graphics.FillRectangle(New SolidBrush(Color.Blue), HeaderRect)
                Dim BoldFont As New Font(TabControl1.Font.Name, TabControl1.Font.Size, FontStyle.Bold)
                e.Graphics.DrawString(SelectedTab.Text, BoldFont, RedTextBrush, HeaderRect, sf)
    
            Else
                e.Graphics.DrawString(SelectedTab.Text, e.Font, BlackTextBrush, HeaderRect, sf)
            End If
    
            '  Job done - dispose of the Brushes
            BlackTextBrush.Dispose()
            RedTextBrush.Dispose()
    
        End Sub

    Then you will achieve like this:

    Best Regards,

    Cherry


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    • Proposed as answer by Stanly Fan Thursday, September 21, 2017 1:15 AM
    Tuesday, September 19, 2017 7:21 AM
    Moderator