Click here to Skip to main content
15,868,141 members
Articles / Desktop Programming / Windows Forms
Article

XP Style Collapsible GroupBox

Rate me:
Please Sign up or sign in to vote.
4.84/5 (33 votes)
31 Jan 20063 min read 245K   8.1K   160   65
This article describes an XP style collapsible GroupBox.

Sample Image

Introduction

Sometimes, there is the need to display information in a container that can be collapsed. Sure there are controls like the XP Sidebar et all, but for my requirements, I wanted something that looked and worked exactly like a standard GroupBox. So, I simply extended the GroupBox control to provide this functionality.

Background

I searched the web for existing controls and came across one by jeffb42 which was pretty much what I wanted, however I have been developing in .NET 2.0 only for some time now, and the old format design did not sit well with the normal GroupBoxes on my forms. Also, that version did not allow me to easily add other controls to the box for some reason. So, I created my own based on the one by jeffb42.

Using the code

This control is so simple that it barely warrants instructions. It can be used as a normal GroupBox is. Full design time support is provided so simply drag & drop the control onto your form and add what you wish to it.

Behind the control

Looking through the code, one can see that not much was required to create this control. The usual suspects were overridden to control the paint and the handling of the mouse clicking the Collapsed state toggle button.

C#
protected override void OnMouseUp(MouseEventArgs e)
{
    if (m_toggleRect.Contains(e.Location))
        ToggleCollapsed();
    else
        base.OnMouseUp(e);
}

protected override void OnPaint(PaintEventArgs e)
{
    HandleResize();
    DrawGroupBox(e.Graphics);
    DrawToggleButton(e.Graphics);
}

For the painting, I used a method found in System.Windows.Forms called DrawGroupBox. This takes away all need to draw arcs and lines or worry about matching the colour of the normal GroupBox. However, when the GroupBox text is drawn on this box, you will get a strikeout effect. To overcome this, I draw a line the same length as the measured text in the colour of the control so that it will not be seen.

C#
void DrawGroupBox(Graphics g)
{
    // Get windows to draw the GroupBox
    Rectangle bounds = new Rectangle(ClientRectangle.X, 
       ClientRectangle.Y + 6, ClientRectangle.Width, 
       ClientRectangle.Height - 6);
    GroupBoxRenderer.DrawGroupBox(g, bounds, Enabled ? 
       GroupBoxState.Normal : GroupBoxState.Disabled);

    // Text Formating positioning & Size
    StringFormat sf = new StringFormat();
    int i_textPos = (bounds.X + 8) + m_toggleRect.Width + 2;
    int i_textSize = (int)g.MeasureString(Text, this.Font).Width;
    i_textSize = i_textSize < 1 ? 1 : i_textSize;
    int i_endPos = i_textPos + i_textSize + 1;

    // Draw a line to cover the GroupBox
    // border where the text will sit
    g.DrawLine(SystemPens.Control, i_textPos, 
               bounds.Y, i_endPos, bounds.Y);

    // Draw the GroupBox text
    using (SolidBrush drawBrush = new 
               SolidBrush(Color.FromArgb(0, 70, 213)))
        g.DrawString(Text, this.Font, drawBrush, i_textPos, 0);
}

void DrawToggleButton(Graphics g)
{
    if(IsCollapsed)
        g.DrawImage(Properties.Resources.plus, m_toggleRect);
    else
        g.DrawImage(Properties.Resources.minus, m_toggleRect);
}

Points of Interest

If you are using this control in a DockStyle state of Fill then you will notice the control does not collapse. This is because the parent control forces the control to fill its space. Therefore, there is an event on the control which fires when the collapsed state changes. This can be used by the parent control to resize itself to the size of the GroupBox.

History

OK, after a request for a 1.1 version of this control, I thought I would give it a shot. After not using Visual Studio 2003 for around a year, it was a shock to switch back to it. Now, a lot of the methods that I used in the 2.0 solution were not available in 1.1, especially drawing a rounded rectangle. Rather than calculating all the points and curves myself, I looked through CodeProject because surely someone had done it before. And of course someone has, Arun Reginald's article provided a simple solution.

The rest is pretty much the same as in the 2.0 solution. I used Barretto VN's idea to add XP theming to all the controls used in the project.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
United Kingdom United Kingdom
I write code.

Comments and Discussions

 
QuestionReally nice ! Pin
fabricedupre@free.fr21-Feb-24 2:30
fabricedupre@free.fr21-Feb-24 2:30 
QuestionVS2015 still working, thanks. Pin
Maciej Dziadowiec30-Mar-17 20:38
Maciej Dziadowiec30-Mar-17 20:38 
QuestionVery useful, even 9 years later! Pin
Marc Clifton29-Jul-15 6:56
mvaMarc Clifton29-Jul-15 6:56 
QuestionNicely done Pin
Mike Hankey1-Jun-12 7:25
mveMike Hankey1-Jun-12 7:25 
QuestionBug with AutoSizeMode, but very good control. Pin
thilitium27-May-12 12:26
thilitium27-May-12 12:26 
QuestionThanks for the great code!! One question though ... Pin
Marek.bucki21-Feb-11 0:46
Marek.bucki21-Feb-11 0:46 
QuestionError when calling IsCollapsed from code? Pin
obcstf27-Aug-10 4:22
obcstf27-Aug-10 4:22 
AnswerRe: Error when calling IsCollapsed from code? Pin
obcstf27-Aug-10 6:16
obcstf27-Aug-10 6:16 
GeneralBroken link Pin
Wolexie22-Jan-10 4:48
Wolexie22-Jan-10 4:48 
QuestionGreat Control but is there a way to disable or hide border Pin
bokee1127-Oct-09 7:12
bokee1127-Oct-09 7:12 
AnswerRe: Great Control but is there a way to disable or hide border Pin
bokee1127-Oct-09 9:21
bokee1127-Oct-09 9:21 
GeneralSome minor changes... Pin
GMan49114-Oct-09 7:27
GMan49114-Oct-09 7:27 
GeneralRe: Some minor changes... Pin
DFDotNet8-Dec-09 1:19
DFDotNet8-Dec-09 1:19 
QuestionCode Usage - Article Pin
stixoffire18-May-09 5:51
stixoffire18-May-09 5:51 
GeneralLicense Pin
Almagnus13-Mar-09 13:40
Almagnus13-Mar-09 13:40 
GeneralInvisible controls Pin
pl_meetom8-Dec-08 3:09
pl_meetom8-Dec-08 3:09 
GeneralRe: Invisible controls Pin
andrea@gmi24-Sep-10 8:08
andrea@gmi24-Sep-10 8:08 
GeneralThe test program crashes if you run it with the "Windows Classic" theme on XP [modified] Pin
bscaer10-Jun-08 5:38
bscaer10-Jun-08 5:38 
GeneralResize parents [modified] Pin
esskar17-Sep-07 2:52
esskar17-Sep-07 2:52 
QuestionRe: Resize parents [modified] Pin
stixoffire10-Jun-08 9:08
stixoffire10-Jun-08 9:08 
AnswerRe: Resize parents Pin
tretererte29-Oct-09 7:37
tretererte29-Oct-09 7:37 
GeneralI like it, small bug (small small) [modified] Pin
bilo814-May-07 2:28
bilo814-May-07 2:28 
GeneralRe: I like it, small bug (small small) Pin
Ross Korsky6-Jun-08 6:22
Ross Korsky6-Jun-08 6:22 
GeneralRe: I like it, small bug (small small) Pin
Greg Olmstead15-Aug-08 4:28
Greg Olmstead15-Aug-08 4:28 
NewsDesign-time enhancement Pin
cDima17-Apr-07 2:48
cDima17-Apr-07 2:48 

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.