Custom Tab control - Revised

• Download source files and demo project - 50.2 KB

Introduction

This article is an updated version of Coloring tab control. The idea behind this article is to have a tab control which is drawn while overriding the native style. As we know, Visual Studio IDE helps to enhance user experience through the rich set of controls that can be dragged and dropped in the container. Tab control is one such control that communicates enriched user experience. But there are some areas where we must break our head to get it our own way. This article is all about that, on how to customize the tab control and its visual style properties.

Background

As we discussed in the above abstract, this is a reusable piece of code which helps to implement Normal as well as OwnerDrawn in tab control. In essence, the first release of this article deals with windows tab control and overriding the DrawItem event to enhance the appearance of tab control. And the current release encapsulates this code block in a custom control called ColorTabControl. Exploiting the current release will ease your task through dragging and dropping the custom control from the control box and will help you to change the appearance, font, color, caption, back color, etc. Thanks to Alan Gerber for all his valuable support.

Let's Get to Business

The DrawMode property of the tab control decides how the individual tab pages are drawn in your application. The property value can be set through the DrawMode enumeration. The enumeration contains two values Normal and OwnerDrawnFixed.

• Normal: This enumerated value will specify that the operating system will decide to draw on behalf of developers.
• OwnerDrawnFixed: This enumerated value will specify that the developer is responsible for drawing the appearance of the tab page. Suppose if you want to draw by yourself then you need to define event handler for TabControl's DrawItem Event.

The first release enclosed with a DrawItem event handler draws the tab pages as and when the operating system will decide to draw the tab pages. To make your life a bit simpler, I added three more properties InactiveFGColor, InactiveBGColor, InactiveColorOn to set the foreground and background colors. Here, setting the value of InactiveColorOn to false will cause the unselected tabs to display the colors of their individual pages. In addition to the above, now we have the facility to set the font style of active as well as inactive tab pages, which was missing in the first release.

Source Code

//----------------------------------------------------------------------

private void RepaintControls(object sender, DrawItemEventArgs e)
{
    try
    {
        Font _Fnt;
        Brush _BackBrush;
        Brush _ForeBrush;
        Rectangle _Rec = e.Bounds;

        if (e.Index == this.SelectedIndex)
        {
            // Remove the comment below if you want the font style 

            // of selected tab page as normal.

            // _Fnt = new Font(e.Font, e.Font.Style & ~FontStyle.Bold);


            // Remove the comment below if you want the font style of 

            // selected tab page as bold.

            _Fnt = new Font(e.Font, e.Font.Style);

            _BackBrush = new SolidBrush(this.SelectedTab.BackColor);
            _ForeBrush = new SolidBrush(this.SelectedTab.ForeColor);
            _Rec = new Rectangle(_Rec.X + (this.Padding.X / 2),
                    _Rec.Y + this.Padding.Y, _Rec.Width - this.Padding.X,
                    _Rec.Height - (this.Padding.Y * 2));
        }
        else
        {
            // Remove the comment below if you want the font style 

            // of inactive tab page as normal.

            _Fnt = new Font(e.Font, e.Font.Style & ~FontStyle.Bold);

            // Remove the comment below if you want the font style 

            // of inactive tab page as bold.

            //_Fnt = new Font(e.Font, e.Font.Style);


            if (this._InactiveColorOn == true)
            {
                _BackBrush = new SolidBrush(this.InactiveBGColor);
                _ForeBrush = new SolidBrush(this.InactiveFGColor);
            }
            else
            {
                _BackBrush = new SolidBrush(this.TabPages[e.Index].BackColor);
                _ForeBrush = new SolidBrush(this.TabPages[e.Index].ForeColor);
            }
            _Rec = new Rectangle(_Rec.X + (this.Padding.X / 2),
                    _Rec.Y + this.Padding.Y, _Rec.Width - this.Padding.X,
                    _Rec.Height - this.Padding.Y);
        }

        _TabName = this.TabPages[e.Index].Text;
        StringFormat _SF = new StringFormat();
        _SF.Alignment = StringAlignment.Center;

        e.Graphics.FillRectangle(_BackBrush, _Rec);
        e.Graphics.DrawString(_TabName, _Fnt, _ForeBrush, _Rec, _SF);

        _SF.Dispose();
        _BackBrush.Dispose();
        _ForeBrush.Dispose();
        _Fnt.Dispose();
    }
    catch (Exception Ex)
    {
        MessageBox.Show(Ex.Message, "Error Occured",
            MessageBoxButtons.OK, MessageBoxIcon.Information);
    }
}

//------------------------------------------------------------------------

//Continue.........

Note

The full source code along with an example is available for download at the top of this article.

History

• 1.0.0.1: 27 September, 2007: Custom tab control
• 1.0.0.0: 15 September, 2004: Base