Click here to Skip to main content
Click here to Skip to main content

Custom Tab control - Revised

, 3 Oct 2007
Rate this:
Please Sign up or sign in to vote.
A tab control which is drawn while overriding the native style

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.
Screenshot - image001.gif

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.

Screenshot - image0021.gif

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

sreejith ss nair
Software Developer (Senior) Freelance
India India
He is a certified professional in both MCPD and MCTS. He is a mathematics graduate with masters in computer science.He was born and bred in India and happen to spend some time in Europe.

Comments and Discussions

 
GeneralBugs PinmemberNader Al Khatib26-Oct-07 17:05 
Hello,
First try to set the righttoleft to yes and righttoleftlayout property to true. the tab header will be totally distorted.
Second, it would be better in the demo to set the inactive color to something other than black, as black is the font color.
third, the border color is not nice. it would be nice to add the border color property.
thank you
 
Nader

GeneralRe: Bugs Pinmembersreejith ss nair27-Oct-07 5:10 
QuestionRe: Bugs PinmemberNader Al Khatib27-Oct-07 10:25 
GeneralRe: Bugs PinprofessionalMarco Bertschi4-Feb-14 3:14 
GeneralNot cool Pinmembersotona3-Oct-07 22:42 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140827.1 | Last Updated 3 Oct 2007
Article Copyright 2007 by sreejith ss nair
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid