Welcome to CSharp Labs

Collapsible Group Box Control with Design Time Support

Monday, December 30, 2013

The .Net Framework GroupBox control displays a frame around a group of controls with a caption. I have created the CollapsibleGroupBox, a parallel control to the GroupBox, which introduces a collapsed state, custom painting and animation.

The CollapsibleGroupBox also includes full design time support in Visual Studio with a customized SmartTag panel.

How it Works

The CollapsibleGroupBox control derives from the Control class and contains similar functionality to the Panel and GroupBox controls, with additional functionality allowing the control to collapse and expand by clicking the caption. Child controls are clipped through their respective Control.Region property if they exceed the CollapsibleGroupBox.DisplayRectangle value, used to denote a child control workspace. Animation is provided through a timer which expands or collapses the control while updating child control regions.


There are numerous properties available to customize the appearance and functionality of the control:

  • AnimationInterval (int): The refresh rate while animating.
  • AnimationStepPercent (int): The percent size change while animating.
  • Collapsed (bool): Determines if the control is collapsed.
  • Collapsible (bool): Determines if the control is collapsible.
  • ControlMargin (Padding): Defines the control margin.
  • DisplayAreaBackgroundColor (Color): Sets the child control workspace background color.
  • ExpandedSize (int): Defines the size to restore the control to.
  • Icon (Bitmap): Defines an optional bitmap to display in the title bar.
  • Selectable (bool): Determines if the control can receive focus.
  • TitleBarBorderEndColor (Color): The title bar border gradient end color.
  • TitleBarBorderStartColor (Color): The title bar border gradient start color.
  • TitleBarEdge (CollapsibleGroupBoxTitleEdge): The edge the title bar is attached to.
  • TitleBarEndColor (Color): The title bar background gradient end color.
  • TitleBarStartColor (Color): The title bar background gradient start color.
  • TitleBarHoverBorderEndColor (Color): The title bar border gradient end color while hovering.
  • TitleBarHoverBorderStartColor (Color): The title bar border gradient start color while hovering.
  • TitleBarHoverEndColor (Color): The title bar background gradient end color while hovering.
  • TitleBarHoverStartColor (Color): The title bar background gradient start color while hovering.
  • TitleBarHoverTextColor (Color): The title bar text color while hovering.
  • TitleBarSize (int): The title bar height or width depending on the TitleBarEdge.
  • TitleBarTopBorderRadius (int): The title bar top rounded edge radius.
  • TitleFont (Font): The title bar text font.

 Several control properties are supported:

  • BackColor (Color): Indicates the color drawn behind the rounded control region.
  • Enabled (bool): Determines if the control accepts user input.
  • Padding (Padding): Specifies interior child control spacing.
  • Text (string): Defines the text to render in the title bar.
Source Code

Download CollapsibleGroupBox and Designer Classes


Add a reference to the System.Design assembly.