Add an expander (collapse/expand) to a Panel WinForm

Question

I have a panel containing a DataGridView and 3 buttons at the bottom of a form. I want to add the possibility to expand and collapse this panel. Is there a way to do it in a Windows Forms application?

Has someone done something similar?

Answer 1

The SplitContainer control has the ability to collapse one of its two panels. You could rig up a button to the Panel1Collapsed property.

Answer 2

Take a look at my WinForm expander control - https://github.com/alexander-makarov/ExpandCollapsePanel

In general, it must meet all the basic requirements for this kind of control.

• Easy editing in Form Designer
• Put any control that you want into the content region
• Apply different styles and sizes

Answer 3

There is another WinForms Expander : http://jfblier.wordpress.com/2011/02/16/window-form-expander/

Answer 4

An alternative to using the SplitContainer collapse is to:

Dock the panel, to where you would like it, and then change it's Visible property to show/hide it. This way other docked items will move to fill the space when it's invisible (depending on their Dock setting).

For example, if the button, panel, and a label are all docked to the top (in that order) when you hide the panel the label will shift up to underneath the button.

Answer 5

I couldn't get «SplitContainer» working (don't remember the details, but I've had troubles), so today I went straight up with this function to do it manually. To collapse the control pass a negative argument as «the_sz».

    /// <summary>
    /// (In|De)creases a height of the «control» and the window «form», and moves accordingly
    /// down or up elements in the «move_list». To decrease size pass a negative argument
    /// to «the_sz».
    /// Usually used to collapse (or expand) elements of a form, and to move controls of the
    /// «move_list» down to fill the appeared gap.
    /// </summary>
    /// <param name="control">control to collapse/expand</param>
    /// <param name="form">form to get resized accordingly after the size of a control
    /// changed (pass «null» if you don't want to)</param>
    /// <param name="move_list">A list of controls that should also be moved up or down to
    /// «the_sz» size (e.g. to fill a gap after the «control» collapsed)</param>
    /// <param name="the_sz">size to change the control, form, and the «move_list»</param>
    public static void ToggleControlY(Control control, Form form, List<Control> move_list, int the_sz)
    {
        //→ Change sz of ctrl
        control.Height += the_sz;
        //→ Change sz of Wind
        if (form != null)
            form.Height += the_sz;
        //*** We leaved a gap(or intersected with another controls) now!
        //→ So, move up/down a list of a controls
        foreach (Control ctrl in move_list)
        {
            Point loc = ctrl.Location;
            loc.Y += the_sz;
            ctrl.Location = loc;
        }
    }

I just put a label over groupBox, and added this function to the «onClick» event of the label. And to make expansion ability clearer for users, I added at the beginning of the text the character ⇘.