A simple yet practical expandable group box for Windows Forms

• Download source code - 22.5 KB

The Problem

I recently ran into a problem involving a multi-tab form using standard 2.0 WinForms. The first tab was full of data fields, leaving only the "notes" fields to be placed on the second tab. Conventional practices would have us use as much room as possible for the note text boxes since this allows the most text to be input and displayed. However, what you end up with is a very ugly tab that often conflicts with the layout style and color contrast on other tabs. To make matters worse, there is often little or no data in the text boxes so they are nothing but large white distractions.

The Solution

My solution was to create a simple expandable group box. The class extends the base GroupBox class so all the standard functionality is available. Each group box can have custom (design or runtime) expansion X and Y endpoints based on other controls on the form. Other things such as padding and the expansion images are also customizable from the designer.

Configuration

The control functions as expected "out of the box", and it is very easy to configure the expansion behavior. The screenshot below shows the custom properties that are displayed in Visual Studio.

The Result

The result is a much cleaner interface that will not cause your users to cringe when they see it.

The Code

The code is painfully simple, and basically boils down to one "toggle" method and a number of properties (not shown).

// Add the toggle image and react when it is clicked
public ExpandableGroupBox()
{
    InitializeComponent();

    TogglePicBox = new PictureBox();
    TogglePicBox.Size = new Size(16, 16);
    TogglePicBox.Image = ExpandPicture;
    TogglePicBox.Location = new Point(Width - 20, 0);
    TogglePicBox.Anchor = AnchorStyles.Top | AnchorStyles.Right;
    TogglePicBox.Click += new EventHandler(TogglePicBox_Click);
    Controls.Add(TogglePicBox);
}

private void TogglePicBox_Click(object sender, EventArgs e)
{
    ToggleExpansion();
}

protected void ToggleExpansion()
{
    // Set original size at runtime's first toggle
    // in case other size manipulation has taken place
    if (OriginalSize.Width == 0 && OriginalSize.Height == 0)
    {
        OriginalSize = Size;
    }

    Expanded = !Expanded;
    if (Expanded)
    {
        TogglePicBox.Image = CollapsePicture;

        // Determine whether a right boundary control was used and resize accordingly
        int newWidth = -1;
        if (HorizontalEndPoint != null)
        {
            newWidth = HorizontalEndPoint.Location.X - Location.X - Margin.Right;
        }
        else
        {
            newWidth = Parent.Size.Width - Location.X - Margin.Right - RightMargin;
        }

        if (newWidth < Width)
        {
            newWidth = Width;
        }

        // Determine whether a bottom boundary control was used and resize accordingly
        int newHeight = -1;
        if (VerticalEndPoint != null)
        {
            newHeight = VerticalEndPoint.Location.Y - Location.Y - Margin.Bottom;
        }
        else
        {
            newHeight = Parent.Size.Height - Location.Y - Margin.Bottom - BottomMargin;
        }

        if (newHeight < Height)
        {
            newHeight = Height;
        }

        Size = new Size(newWidth, newHeight);

        // Determine what anchors are needed
        if (AnchorRightOnExpand)
        {
            Anchor |= AnchorStyles.Right;
        }
        if (AnchorBottomOnExpand)
        {
            Anchor |= AnchorStyles.Bottom;
        }
    }
    else
    {
        // Reset
        TogglePicBox.Image = ExpandPicture;
        Size = OriginalSize;
        Anchor = AnchorStyles.Top | AnchorStyles.Left;
    }
}

protected PictureBox TogglePicBox
{
    get
    {
        return _togglePicBox;
    }
    set
    {
        _togglePicBox = value;
    }
}
private PictureBox _togglePicBox = null;

Points of Interest

Remember that once you drag the control onto your form, the default images are now stored in your project and can not be changed by replacing them in the control's project; your form will assume you set them yourself and override the pictures on the new build of the control. The same is true for the other public settings and for most custom controls, in general.

History

• Version 1.