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

Collapsible Group Box

, 5 Jan 2006
Rate this:
Please Sign up or sign in to vote.
An introduction to the ExpandingPanel and CollapsibleGroupBox controls.

Introduction

I am working on a project that needs to display groups/containers of editable data (data not just for display), and I came up with the idea for this library of controls. I looked into using a PropertyGrid control but it didn't have the elegance I was looking for, so here are the fruits of my labor.

Background

Years ago, I worked on a project for the Macintosh using Symantec's TCL (Think Class Library, not Tcl/Tk). TCL has a view and pane architecture where one would create a pane containing controls (or anything for that matter) and add the panes to a CScroller. While searching CodeProject for something suitable, I came across Rollup Control and 3D Studio Max like Slidable DialogBar, but both are written in C++/MFC, and my project is in C#.

Using the code

After opening your C# Windows Application solution, open a Form, right-click in the Toolbox, and select the "Add/Remove Items..." menu item. After the "Customize Toolbox" dialog comes up, select the "Browse..." button, and navigate to the \CollapsibleGroupBox_1_2\bin\Release directory, and select UIToolbox.dll. If you navigate to the "My User Controls" group in the Toolbox, you will notice that several items have been added.

Go back to the Solution Explorer, right-click on your project, and select the menu item Add\Add New Item. Select a user control and edit its code. Change the base class from System.Windows.Forms to UIToolbox.CollapsibleGroupBox, save it, and then switch back to its design view.

At this point, you should see something that looks like the following:

Feel free to resize it and add some controls.

Go back to the form you wish to add an ExpandingPanel to (in the design view), and add an ExpandingPanel (from the "My User Controls" group of the Toolbox), and you should see something like this:

Switch to the form's code and add supporting code to add the CollapsibleGroupBox to the ExpandingPanel:

   public Form1()
    {
        //
        // Required for Windows Form Designer support
        //
        InitializeComponent();

        // UserControl1 is a CollapsibleGroupBox
        expandingPanel1.AddGroup(new UserControl1());
    }

That's it. You're ready to build and run it now. The controls automatically take care of collapsing, expanding, deleting themselves, and scrolling.

Points of interest

If you explore CollapsibleGroupBox.cs, you will notice that although it contains a control for the collapse button and a control for the trash can button, it doesn't contain a GroupBox control. Instead, it 'fakes' a group box and draws it itself. Why? The first draft used a GroupBox control, and everything seemed to work fine. That is, until I created a panel derived from ExpandingPanel, added some controls, and then built it. When the project was built, the derived panel seemed to 'eat' the controls. It turns out that the bug had to do with the embedded group box and the ownership of the controls, so now the CollapsibleGroupBox draws the group box itself.

Known issues

  • Fonts - I've only used the default 8.25pt Microsoft Sans Serif with the controls. It __should__ work correctly with any font, but it uses Graphics.MeasureString() to get the width, and I've noticed MeasureString() doesn't always work correctly.
  • ExpandingPanels and CollapsibleGroupBoxes are sometimes missing - If a form contains an ExpandingPanel or CollapsibleGroupBox control, I've noticed that sometimes they disappear the next time I open the project. A workaround that I've found that usually works is to close the form (both designer and code) and then reopen it. I haven't figured out why, but this seems to fix the problem.
  • Trash can layout - When playing with the Caption and ContainsTrashCan properties of a CollapsibleGroupBox, I've noticed that the trash can icon doesn't always appear in the correct position. Usually building the project solves this.

Future enhancements

Here are some potential enhancements I may make in the future:

Drag & Drop: It would be cool if ExpandingPanel supported drag and drop and allowed you to d&d within an ExpandingPanel to resort its items, or d&d to move a CollapsibleGroupBox from one ExpandingPanel to another. The UI would look something like this:

Add panes instead of CollapsibleGroupBoxes: For my project, I only needed group boxes, but for a more general purpose, I might change ExpandingPanel to add a more generic type (Pane?):

public class Pane : System.Windows.Forms.UserControl
{
    .
    .
    .
}

public class CollapsibleGroupBox : Pane
{
    .
    .
    .
}


public class ExpandingPanel : System.Windows.Forms.Panel
{
    .
    .
    .

    public void AddGroup(UIToolbox.Pane thePane)
    {
        .
        .
        .
    }
    .
    .
    .
}

FAQ

  • I would like to modify and use your code. Are there any restrictions I need to know about, or can I just build on your code at will?

    You may use and modify the original code to your needs, free of charge, provided:

    • I received credit in the products' about box (something along the lines of "Collapsible Group Box by Jeff Beeghly").
    • (Optional) I receive a fully licensed copy of the product (regardless of whether the product is free, shrinkwrap, or commercial).

    You may not:

    • Sell the code (just the code, not as part of an application).
    • "Re-brand" the code as your own.
    • Publicly release modified versions of the code or publicly release works derived from the code without express written authorization.

History

  • 25th June, 2004, 1.0
    • Initial release
  • 3rd January, 2006, 1.2
    • Built with Visual Studio .NET 2003.
    • Added monkfinger's fix for resizing (see message board).
    • Added Doug Case's request to programmatically set a GroupBox to a collapsed state.
    • Removed commented code from CollapsibleGroupBox.cs.

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

Share

About the Author

jeffb42
Software Developer
United States United States
In a nutshell, my forte is Windows, Macintosh, and cross-platform development, and my interests are in UI, image processing, and MIDI application development.

Comments and Discussions

 
QuestionTo add Controls PinmemberRavndra2211-Aug-13 18:58 
GeneralMy vote of 5 Pinmemberneoraltech13-Mar-13 16:11 
GeneralMy vote of 5 Pinmembermanoj kumar choubey21-Feb-12 1:20 
QuestionI'd like to modify this code... PinprotectorMarc Clifton5-Jan-12 5:06 
AnswerRe: I'd like to modify this code... Pinmemberjeffb425-Jan-12 18:30 
GeneralRe: I'd like to modify this code... PinprotectorMarc Clifton6-Jan-12 4:00 
GeneralAdd items in the developer environement PinmemberMember 28774031-Mar-11 10:00 
GeneralDrag and Drop PinmemberEvellyn16-Apr-09 5:46 
GeneralPossible bug or my usage is wrong. PinmemberBKail1-Apr-09 11:36 
GeneralRe: Possible bug or my usage is wrong. Pinmemberjeffb426-Apr-09 7:51 
Generalrequest 2.0 version Pinmemberuzay9113-Jul-07 5:03 
GeneralRe: request 2.0 version Pinmemberjeffb426-Jul-07 14:44 
Generalcollapsible groupbox not acting like a container PinmemberDarchangel10-Feb-06 9:27 
GeneralCollapsible Group Box version 1.2 Pinmemberjeffb426-Jan-06 6:33 
GeneralRe: Collapsible Group Box version 1.2 Pinmembershengcheng_jin8-Jul-08 12:26 
GeneralInitial state Pinmemberdoug@proclarity25-Oct-05 9:24 
GeneralGlitch Fix: CollapsibleGroupBox Resize Pinmembermonkfinger2-May-05 14:52 
QuestionLicense? PinmemberJustin F.13-Jan-05 10:46 
AnswerRe: License? Pinmemberjeffb4213-Jan-05 15:12 
GeneralRe: License? PinmemberJustin F.13-Jan-05 17:07 
Generalwrong download link PinmemberDennis Nusser28-Jun-04 6:47 
GeneralRe: wrong download link Pinmemberjeffb4228-Jun-04 7:27 
GeneralOne little quirk Pinmembermav.northwind26-Jun-04 21:39 
GeneralRe: One little quirk Pinmemberjeffb4227-Jun-04 10:50 
GeneralRe: One little quirk Pinmembermav.northwind27-Jun-04 20:57 

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 | Terms of Use | Mobile
Web03 | 2.8.150302.1 | Last Updated 6 Jan 2006
Article Copyright 2004 by jeffb42
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid