Articles in this section
Category / Section

How to custom draw TabPageAdv header in the WinForms TabControlAdv?

2 mins read

Customize the appearance of TabControlAdv

You can custom draw TabPageAdv header by handling the event, DrawItem in the TabControlAdv.

C#

//Initializes the Close button rectangle.
Rectangle closebutton;
//Initializes the LinearGradientBrush.
LinearGradientBrush gradientBrush;
//Draws the Tab item.
this.tabControlAdv1.DrawItem += new DrawTabEventHandler(tabControlAdv1_DrawItem);
void tabControlAdv1_DrawItem(object sender, DrawTabEventArgs drawItemInfo)
{
   // The function GetTabRect helps to get the rectangle of the tab item.
   if (drawItemInfo.Index != this.tabControlAdv1.SelectedIndex)
   {
      // For the non-selected tabs.
      gradientBrush = new System.Drawing.Drawing2D.LinearGradientBrush(this.tabControlAdv1.GetTabRect(drawItemInfo.Index), Color.FromArgb(197, 197, 173), Color.FromArgb(228, 228, 212), LinearGradientMode.Horizontal);
   }
   else
   {
      // For the selected tab.
      gradientBrush = new System.Drawing.Drawing2D.LinearGradientBrush(this.tabControlAdv1.GetTabRect(drawItemInfo.Index), Color.White, Color.WhiteSmoke, LinearGradientMode.Horizontal);
   }
   float[] positions = { 0.0f, 0.05f, 0.95f, 1.0f };
   float[] factors = { 0.4f, 1.0f, 0.05f, 0.04f };
   // Blends settings.
   Blend blend = new Blend();
   blend.Factors = factors;
   blend.Positions = positions;
   gradientBrush.Blend = blend;
   drawItemInfo.Graphics.FillRectangle(gradientBrush, this.tabControlAdv1.GetTabRect(drawItemInfo.Index));
   gradientBrush.Dispose();
   //Draws the default borders and interior (text and image).
   drawItemInfo.DrawBorders();
   //Draws the text of the Tab item.
   drawItemInfo.Graphics.DrawString(this.tabControlAdv1.TabPages[drawItemInfo.Index].Text, drawItemInfo.Font, Brushes.Black, drawItemInfo.Bounds.X + 5, drawItemInfo.Bounds.Y + 5);
   closebutton = new Rectangle(drawItemInfo.Bounds.X + drawItemInfo.Bounds.Width - 15, drawItemInfo.Bounds.Y + 6, 10, 10);
   drawItemInfo.Graphics.DrawLine(new Pen(Brushes.Black), new Point(closebutton.X, closebutton.Y), new Point(closebutton.X + closebutton.Width, closebutton.Y + closebutton.Height));
   drawItemInfo.Graphics.DrawLine(new Pen(Brushes.Black), new Point(closebutton.X, closebutton.Y + closebutton.Height), new Point(closebutton.X + closebutton.Width, closebutton.Y));
   //Draws the close button rectangle.
   drawItemInfo.Graphics.DrawRectangle(new Pen(Brushes.Black), closebutton);
}

VB

'Initializes the Close button rectangle.
Private closebutton As Rectangle
'Initializes the LinearGradientBrush.
Private gradientBrush As LinearGradientBrush
'Draws the Tab item.
AddHandler tabControlAdv1.DrawItem, AddressOf tabControlAdv1_DrawItem
Private Sub tabControlAdv1_DrawItem(ByVal sender As Object, ByVal drawItemInfo As DrawTabEventArgs)
   'The function GetTabRect helps to get the rectangle of the tab item.
   If drawItemInfo.Index <> Me.tabControlAdv1.SelectedIndex Then
     ' For the non-selected tabs
     gradientBrush = New System.Drawing.Drawing2D.LinearGradientBrush(Me.tabControlAdv1.GetTabRect(drawItemInfo.Index), Color.FromArgb(197, 197, 173), Color.FromArgb(228, 228, 212), LinearGradientMode.Horizontal)
   Else
     'For the selected tab.
     gradientBrush = New System.Drawing.Drawing2D.LinearGradientBrush(Me.tabControlAdv1.GetTabRect(drawItemInfo.Index), Color.White, Color.WhiteSmoke, LinearGradientMode.Horizontal)
   End If
   Dim positions() As Single = { 0.0f, 0.05f, 0.95f, 1.0f }
   Dim factors() As Single = { 0.4f, 1.0f, 0.05f, 0.04f }
   'Blends settings.
   Dim blend As New Blend()
   blend.Factors = factors
   blend.Positions = positions
   gradientBrush.Blend = blend
   drawItemInfo.Graphics.FillRectangle(gradientBrush, Me.tabControlAdv1.GetTabRect(drawItemInfo.Index))
   gradientBrush.Dispose()
   'Draws the default borders and interior (text and image).
   drawItemInfo.DrawBorders()
   'Draws the text of the Tab item.
   drawItemInfo.Graphics.DrawString(Me.tabControlAdv1.TabPages(drawItemInfo.Index).Text, drawItemInfo.Font, Brushes.Black, drawItemInfo.Bounds.X + 5, drawItemInfo.Bounds.Y + 5)
   closebutton = New Rectangle(drawItemInfo.Bounds.X + drawItemInfo.Bounds.Width - 15, drawItemInfo.Bounds.Y + 6, 10, 10)
   drawItemInfo.Graphics.DrawLine(New Pen(Brushes.Black), New Point(closebutton.X, closebutton.Y), New Point(closebutton.X + closebutton.Width, closebutton.Y + closebutton.Height))
   drawItemInfo.Graphics.DrawLine(New Pen(Brushes.Black), New Point(closebutton.X, closebutton.Y + closebutton.Height), New Point(closebutton.X + closebutton.Width, closebutton.Y))
   'Draws the close button rectangle.
   drawItemInfo.Graphics.DrawRectangle(New Pen(Brushes.Black), closebutton)
End Sub

Before customizing the TabControlAdv

Figure 1: Before customizing the TabControlAdv

After customizing the TabControlAdv

Figure 2: After customizing the TabControlAdv

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please sign in to leave a comment
Access denied
Access denied