A simple yet practical expandable group box for windows forms

• Download ExpandableControls - 22.52 KB

The Problem

This is my first article...be kind! ;-)
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 group box 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.