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.

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.

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

About the Author

jordanhammond

Web Developer

United Kingdom

Member

I write code.

Article Top

Poor

Excellent

Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

You must Sign In to use this message board. (secure sign-in)

Search this forum
	Profile popups Noise Layout Per page

Nicely done [modified]

Mike Hankey

7:25 1 Jun '12

Exactly what I needed, thanks!

There is one problem though, there is a problem if you want the GroupBox to start out collapsed. In this case the FullHeight property is undefined to solve this problem add;

        
protected override void OnSizeChanged(EventArgs e)
{
   HandleResize();
}

VS2010/Atmel Studio 6.0 ToDo Manager Extension
Version 3.0 now available.
There is no place like 127.0.0.1

modified yesterday.

Bug with AutoSizeMode, but very good control.

thilitium

12:26 27 May '12

Hi ! Very good control, simple and clean. Although, I noticed a bug when you put the CollapsibleGroupBox in AutoSize with

.AutoSizeMode=Windows.Forms.AutosizeMode.GrowAndShrink

In this case, when you collapse the GroupBox, the text and the "+/-" button totally disappears, but are still active (when you randomly click around the empty label and get the "+/-" button zone by chance, the groupbox does expand and the label and button are back).
After removing the AutoSizeMode, it works perfectly !

Thanks for the great code!! One question though ...

Marek.bucki

0:46 21 Feb '11

How come this thing still works when I comment out the event handling lines as show below ?? I'm new to .Net and a bit puzzled how event handling can function without a body for the CollapseBoxClickedEventHandler method...

Otherwise it works fine !! I'm using it in a C++ Visual 2008 project under Win7 (looks nice in classic and aero theme). I'm trying to port the control to C++ in order to link to it statically (instead of dragging around the C# dll) ... and yeah, I just discovered that you cannot compile native static libs from C# Sigh | :sigh:

Unnecessary (??) code commented out:

In event handling declaration:



        /// <summary>Fired when the Collapse Toggle button is pressed</summary>

        //public delegate void CollapseBoxClickedEventHandler(object sender);

        //public event CollapseBoxClickedEventHandler CollapseBoxClickedEvent;

and later in the file:



       void ToggleCollapsed()

        {

            IsCollapsed = !IsCollapsed;

 

//if (CollapseBoxClickedEvent != null)

//    CollapseBoxClickedEvent(this);

        }

PS: After placing a break point at CollapseBoxClickedEvent(this); I realized it never gets hit... looks like CollapseBoxClickedEvent is always null.

Error when calling IsCollapsed from code?

obcstf

4:22 27 Aug '10

When calling IsCallapsed = true, in constructor <code> public TestHarness() { InitializeComponent(); this.collapsibleGroupBox4.IsCollapsed = true; } </code> the groupBox is hidden from the next first click (collapse/expand). Any help? obcstf
Sign In·View Thread·Permalink

Re: Error when calling IsCollapsed from code?

obcstf

6:16 27 Aug '10

I see this has been discussed earlier. I like the control. Keep up the good work!! obcstf
Sign In·View Thread·Permalink

Broken link

Wolexie

4:48 22 Jan '10

I am trying to download the demo and source from the link at the top of the page but... Does anyone have a valid link to these documents? Or where I can download them from? Many thanks Heavy givers are light complainers
Sign In·View Thread·Permalink

Great Control but is there a way to disable or hide border

bokee11

7:12 27 Oct '09

Is there any way to to make the border of the GroupBox disappear or change the border color and inner border color to match the BackColor so it disappears? -- thanks B
Sign In·View Thread·Permalink

Re: Great Control but is there a way to disable or hide border

bokee11

9:21 27 Oct '09

I figured out my own question if someone wants the same effect here is the code...
This Hides the GroupBox Border through color (doesn't diasable it)

set SolidBrush to this.BackColor and use same Rectangle as Rectangle bounds

// Get windows to draw the GroupBox
Rectangle bounds = new Rectangle(ClientRectangle.X, ClientRectangle.Y + 14, ClientRectangle.Width, ClientRectangle.Height - 16);
GroupBoxRenderer.DrawGroupBox(g, bounds, GroupBoxState.Normal);

Pen pen = new Pen(BackColor);
g.FillRectangle(new SolidBrush(this.BackColor), g.FillRectangle(new SolidBrush(this.BackColor), bounds););

Some minor changes...

GMan4911

7:27 4 Oct '09

Replace this:

private Rectangle m_toggleRect = new Rectangle(8, 2, 11, 11);

with this:

private Rectangle m_toggleRect = new Rectangle(8, 1, 11, 11);

In DrawGroupBox(), replace this:

Rectangle bounds = new Rectangle(ClientRectangle.X, ClientRectangle.Y + 6, ClientRectangle.Width, ClientRectangle.Height - 6);
GroupBoxRenderer.DrawGroupBox(g, bounds, Enabled ? GroupBoxState.Normal : GroupBoxState.Disabled);
.
.
.

with this:

Rectangle bounds = new Rectangle(ClientRectangle.X, ClientRectangle.Y, ClientRectangle.Width, ClientRectangle.Height);
GroupBoxRenderer.DrawGroupBox(g, bounds, String.Format("    {0}", Text), this.Font, Enabled ? GroupBoxState.Normal : GroupBoxState.Disabled);

Remove everything else in DrawGroupBox().

The original code put too much space between the groupbox and the control above it and the font color should use the GroupBox font color. Also, using the GroupBoxRenderer.DrawGroupBox() to render the text eliminates the line behind the text effect.

Re: Some minor changes...

DominikF

1:19 8 Dec '09

very good. thank you. now the control is suitable for me.
Sign In·View Thread·Permalink

Code Usage - Article

stixoffire

5:51 18 May '09

Hi and thanks for sharing I learned a few things here.

I have merged your code with code from
GroupBox with an icon: the ImageGroupBox control[^]

To Produce the following result:
Collapsible GroupBox With Icon[^]

I hope that this is ok with you. I thought that since the License was COPL that the use would be acceptable. I have not taken any credit for any of the code and simply referred readers back to the two articles..

License

Almagnus1

13:40 3 Mar '09

I really like the control, but I was wondering what license it has? Thanks again!
Sign In·View Thread·Permalink

Invisible controls

pl_meetom

3:09 8 Dec '08

There's a bug in Collapsible Groupbox. After collapsing and uncollapsing, all controls inside groupbox have property Visible set to true (even if before the operation it was set to false).
Sign In·View Thread·Permalink

Re: Invisible controls

andrea@gmi

8:08 24 Sep '10

To solve this problem, simply goto into IsCollapsed property and change:

        public bool IsCollapsed
        {
            get { return m_collapsed; }
            set
            {
                ....
 
                foreach (Control c in Controls)
                    c.Visible = !value;
 
                Invalidate();
            }
        }

into:

        public bool IsCollapsed
        {
            get { return m_collapsed; }
            set
            {
                ....
 
                //foreach (Control c in Controls)
                //    c.Visible = !value;

                // This will invalidate the groupbox OLNY, and the child controls will not redraw
                // This should also improve rendering speed
                Invalidate(false);
            }
        }

Regards,
Andrea

The test program crashes if you run it with the "Windows Classic" theme on XP [modified]

bscaer

5:38 10 Jun '08

The test program throws an exception if you run it with the "Windows Classic" theme on XP as follows:

System.InvalidOperationException: Visual Styles-related operation resulted in an error because no visual style is currently active.

Here is the code that is responsible. It doesn't check to see if a visual style is available before using a VisualStyleRenderer.

        void DrawToggleButton(Graphics g)
        {
            VisualStyleRenderer glyphRender = null;
            if (IsCollapsed)
                glyphRender = new VisualStyleRenderer(VisualStyleElement.TreeView.Glyph.Closed);
            else
                glyphRender = new VisualStyleRenderer(VisualStyleElement.TreeView.Glyph.Opened);
            glyphRender.DrawBackground(g, m_toggleRect);
        }

Here is a fixed version of the function:

        void DrawToggleButton(Graphics g)
        {
            if (Application.RenderWithVisualStyles)
            {
                VisualStyleRenderer glyphRender = null;
                if (IsCollapsed)
                    glyphRender = new VisualStyleRenderer(VisualStyleElement.TreeView.Glyph.Closed);
                else
                    glyphRender = new VisualStyleRenderer(VisualStyleElement.TreeView.Glyph.Opened);
                glyphRender.DrawBackground(g, m_toggleRect);
            }
            else
            {
                if (IsCollapsed)
                    g.DrawImage(PlusImage, m_toggleRect);
                else
                    g.DrawImage(MinusImage, m_toggleRect);
            }
        }

modified on Tuesday, June 10, 2008 11:54 AM

Resize parents [modified]

esskar

2:52 17 Sep '07

Nice control.

i added the following code, to have the parent controls resize on toggle.

HTH,
Sascha Kiefer

void ResizeParent()
{
   int deltaHeight = this.FullHeight - m_collapsedHeight;
   this.ResizeParent(this.Parent, !this.Collapsed, deltaHeight);
}
 
void ResizeParent(Control control, bool collapsed, int deltaHeight)
{
   if (control != null)
   {
      this.ResizeParent(control.Parent, collapsed, deltaHeight);
 
      foreach (Control c in control.Controls)
      {
         if ((c.Anchor & AnchorStyles.Bottom) != 0)
            continue;
 
         Point p = c.Location;
         if (p.Y <= this.Location.Y)
            continue;
 
         if (collapsed)
            p.Y -= deltaHeight;
         else
            p.Y += deltaHeight;
         c.Location = p;                    
      }
 
      Size s = control.Size;
      if (collapsed)
         s.Height -= deltaHeight;
      else
         s.Height += deltaHeight;
      control.Size = s;
   }
}
</code>
 
void ToggleCollapsed()
{
   <code>this.ResizeParent();</code>
   this.Collapsed = !this.Collapsed;
   if (this.CollapseBoxClickedEvent != null)
      this.CollapseBoxClickedEvent(this);
}

Re: Resize parents [modified]

stixoffire

9:08 10 Jun '08

I used your suggestion but have a few problems with it.
When it resizes it has a tendency to relocate components on the form to (-) values for the vertical positioning. One thing I noticed was when I had it in another groupbox - it resized the parent and the parents and changed positioning on the controls that made it unuseable.

It also has a tendency to displace some controls and place others over top of them. - If I have a GroupBox over a Tab Control say 500 pixels wide. I then place the Collapsible GroupBox to the right of the Groupbox (Even into another Collapsible Groupbox - nothing underneath. How can I keep the resize from happening when there is no need to resize parent - or the parents parent. I would rather not add a property to do this - if it could Automagically detect if it needed to resize the parent...

Any ideas ?

modified on Tuesday, June 10, 2008 3:43 PM

Re: Resize parents

tretererte

7:37 29 Oct '09

You need to comment ResizeParent() like this: `if (control != null) { //this.ResizeParent(control.Parent, collapsed, deltaHeight); foreach (Control c in control.Controls) { if ((c.Anchor & AnchorStyles.Bottom) != 0) continue; Point p = c.Location;`
Sign In·View Thread·Permalink

I like it, small bug (small small) [modified]

bilo81

2:28 4 May '07

Great article.
I noted that if you change the backgroud color of the form in your tests, the code to draw a line to cover the GroupBox border where the text will sit doesn't work (the line cover the text)

// 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);

I have only changed with

Pen pen = new Pen(BackColor);
// Draw a line to cover the GroupBox border where the text will sit
g.DrawLine(pen, i_textPos, bounds.Y, i_endPos, bounds.Y);

I think that's all...

Kind regards,
Marco

modified on Wednesday, July 30, 2008 3:20 PM

Re: I like it, small bug (small small)

Ross Korsky

6:22 6 Jun '08

For me i could see the highlight line running through the background of the text so i changed the line to the following as a fix to paint over both the shadow and highlight of the boarder. Brush lBrush = new SolidBrush( BackColor ); g.FillRectangle( lBrush, i_textPos, bounds.Y, i_endPos - i_textPos, 2 );
Sign In·View Thread·Permalink	1.00/5 (1 vote)

Re: I like it, small bug (small small)

maynardflies

4:28 15 Aug '08

I fixed it this way SystemPens.FromSystemColor(Parent.BackColor)
Sign In·View Thread·Permalink

Design-time enhancement

cDima

2:48 17 Apr '07

Hey, nice control.

I've got an improvement for it. By adding a class and some attributes, you can enable design-time collapsing of the group box by a mouse click on the box. It will save the size of the non-collapsed group box and all.

It will probably work only for VS 2005 .Net 2.0, haven't checked.

I can make a short article with the implemented details and post it on code project. Or, if you have the time, update the control with these improvements, if you think they actually improve it.

Quite simple. Add a reference to System.Design.dll in your project.
Then add the CollapsibleGroupBoxDesigner class:

    /// <summary>
    /// CollapsibleGroupBoxDesigner is an control designer for the that 
    /// CollapsibleGroupBox. Allows mouse clicks on the collapse button. 
    /// </summary>
    [System.Security.Permissions.PermissionSet(System.Security.Permissions.SecurityAction.Demand, Name = "FullTrust")]
    public class CollapsibleGroupBoxDesigner : System.Windows.Forms.Design.ParentControlDesigner
    {
        // This boolean state reflects whether the mouse is over the control.
        protected override  bool  GetHitTest(Point point)
        {
            CollapsibleGroupBox me = this.Control as CollapsibleGroupBox;
 
            if (me.m_toggleRect.Contains(me.PointToClient(point)))
            {
                // we can handle that; user clicked on toggle box.
                return true;
            }
            //Nope not interested
            return false;
        }
    }

Then, add the DesignerAttribute atttribute in front of the class itself. Also, you'll need to make the property toggleRect public.

    /// <summary>
    /// GroupBox control that provides functionality to 
    /// allow it to be collapsed.
    /// </summary>
    [ToolboxBitmap(typeof(CollapsibleGroupBox))]
    [DesignerAttribute(typeof(CollapsibleGroupBoxDesigner))]
    public partial class CollapsibleGroupBox : GroupBox
    {
 
        ....
        public Rectangle m_toggleRect = new Rectangle(8, 2, 11, 11); // not private
        ....
 
        /// <summary>
        /// Save the size if control is collapsed. VS will serialize the attribute for us. 
        /// It is also shown in properties.
        /// </summary>
        [DefaultValue(false), Browsable(true), DesignerSerializationVisibility(DesignerSerializationVisibility.Visible)]
        public Size FullSize
        {
            get
            {
                return m_FullSize;
            }
            set
            {
                m_FullSize = value;
            }
        }

That's probably all, if I'm not missing anything.
Now recompile the project, drop the collapsable group box control on a form in the designer, and click on the toggle box. It should toggle collapse and save it's original size in it's FullSize property.

Works for me quite nicely. Get back to me if you will update the control, please.

Good luck,
Dmitry Sadakov

Re: Design-time enhancement

stixoffire

9:10 10 Jun '08

I used this in the control - Nice - it lets me know what the thing will look like . I use it in conjunction with the resize parent from another poster. I am not sure if his resize parent is an issue or if this one is the issue - as I get (-) values on the vertical positioning of some of my other components, during design time.
Sign In·View Thread·Permalink

Re: Design-time enhancement

stixoffire

0:28 18 Apr '09

I have noticed something in Design time - my control changes namespaces , the system can not find it any more and requests I put Global.Indigo.CollapsibleGroupBox for the namespace - it then works until I click the designer to collapse the control, at that point it disappears. Any hints, tips or ideas on how to fix this one ?
Sign In·View Thread·Permalink

Localization messes up the control

Bo K

7:12 8 Feb '07

Anyone have an idea why localization (ie: use resource manager and reex files) changes the control to width of 503 in the Designer
Sign In·View Thread·Permalink	1.00/5 (1 vote)