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
Figure 1: Before customizing the TabControlAdv
Figure 2: After customizing the TabControlAdv