Click here to Skip to main content
Click here to Skip to main content
Go to top

Another collapsible panel (ultra simple)

, 12 Feb 2011
Rate this:
Please Sign up or sign in to vote.
A very simple and quick way to manage collapsible Panels and GroupBoxes.

CollapsePanel

Introduction

One of my last projects required a large amount of info to be displayed in categories. Due to the unbalanced population of each group, the Tab control was not an option. So, I turned to collapsible panels and groupboxes so the user could hide or show the information he needed.

There are many and wonderful collapsible controls available in CodeProject, but I needed something very simple and, most importantly, the possibility of nesting the "collapsers". The ones I tested had strange interactions both with the FlowLayoutPanel and the AutoSize feature.

I had no time to develop a custom control, and nearly by chance, I came with this simple solution.

Using the code

Two elements were needed: a GroupBox (or a Panel) and a collapsing/expanding Button. The solution is simple, but what happens if you need a dozen or more collapsers? Copy and paste is not elegant and can lead to tedious debugging.

Can a "universal collapsing button" be made? Yes. Here it is.

Private Sub chkbCollapser_CheckedChanged(ByVal sender As System.Object, _
        ByVal e As System.EventArgs) Handles chkbCollapser.CheckedChanged
 
    If Not Me.Created Then Exit Sub
    
    Dim ctrl As Control = CType(sender, Control).Parent
    Dim chk As CheckBox = CType(sender, CheckBox)

    If chk.Checked Then
        ctrl.AutoSize = True
        chk.Text = "-"
    Else
        ctrl.AutoSize = False
        ctrl.Height = 18
        chk.Text = "+"
    End If
End Sub

Only three points of interest in the code:

  • The Me.Created test to avoid code execution when loading the form.
  • The ctrl reference to the button's parent (both Panel or GroupBox work fine). This means that the button must obviously be inside the Panel or GroupBox. I uses to place it at the upper right corner and change the Anchor property from the default Top,Left value to Top,Right.
  • The chk reference to the button itself. This allows to place the same code into as many buttons as needed. It's time to say that I don't use a Button, but a CheckBox with Button Appearance.

You only need to copy the code to the first collapsing button you need. Then just copy-paste it as required. The Sub header automatically will be added with the Handle elements for the copies.

Private Sub chkbCollapser_CheckedChanged(ByVal sender As System.Object, _
        ByVal e As System.EventArgs) _
        Handles chkbCollapser.CheckedChanged, CheckBox1.CheckedChanged, _
            CheckBox5.CheckedChanged, CheckBox4.CheckedChanged, _
            CheckBox3.CheckedChanged, CheckBox2.CheckedChanged, _
            CheckBox8.CheckedChanged, CheckBox9.CheckedChanged, _
            CheckBox13.CheckedChanged, CheckBox12.CheckedChanged, _
            CheckBox11.CheckedChanged, CheckBox10.CheckedChanged

The sample project allows to see how I manage with FlowLayoutPanels together with my collapsible Panel/GroupBox.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

ea1ii
Engineer
Spain Spain
I'm into programming since Secondary.
 
Nowadays, I work as a PLC and PC programmer for local machinery manufacturer.
 
Last programming projects relate to real-time image processing, for stone slabs cutting optimization.

Comments and Discussions

 
GeneralGood article PinmemberCIDev9-Mar-11 3:19 
GeneralBig Blue Buttons PinmemberAlex Essilfie7-Mar-11 7:38 
GeneralRe: Big Blue Buttons Pinmemberea1ii15-Mar-11 9:00 
GeneralCool Alternative PinmemberAllenR14-Feb-11 20:29 
GeneralRe: Cool Alternative Pinmemberea1ii15-Feb-11 6:27 

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 | Mobile
Web04 | 2.8.140921.1 | Last Updated 12 Feb 2011
Article Copyright 2011 by ea1ii
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid