Click here to Skip to main content
15,867,686 members
Articles / Programming Languages / C#
Article

Custom Tab control - Revised

Rate me:
Please Sign up or sign in to vote.
2.54/5 (5 votes)
3 Oct 2007CPOL2 min read 90.2K   2.3K   25   6
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

C#
//----------------------------------------------------------------------
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)


Written By
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

 
QuestionControl Pin
jdg2k526-Apr-16 6:53
jdg2k526-Apr-16 6:53 
GeneralBugs Pin
Nader Al Khatib26-Oct-07 17:05
Nader Al Khatib26-Oct-07 17:05 
GeneralRe: Bugs Pin
sreejith ss nair27-Oct-07 5:10
sreejith ss nair27-Oct-07 5:10 
QuestionRe: Bugs Pin
Nader Al Khatib27-Oct-07 10:25
Nader Al Khatib27-Oct-07 10:25 
GeneralRe: Bugs Pin
Marco Bertschi4-Feb-14 3:14
protectorMarco Bertschi4-Feb-14 3:14 
GeneralNot cool Pin
dethtroll3-Oct-07 22:42
dethtroll3-Oct-07 22:42 
subj

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

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