Uniform resizing of multiple containers in Windows Forms

When dealing with resizable dialogs, anchoring is the best way to ensure that certain controls, like containers or data grids, stretch and resize along with with the form itself. This ensures that the user experience is enhanced when dealing with large quantities of data that are, by default designed, viewed on small window. While this design is sufficient for certain cases, in other, more business like, there are limitations that can be overcome by using different container.

However, the anchor mechanics do not allow for simultaneous uniform resizing for multiple controls. Imagine a form having two large data visualization controls/containers, e.g. a master-detail view, where the interface does not or should not favor either the master or the detail view. By anchoring only one control can stretch both horizontally and vertically, but not both simultaneously.

Consider the default form layout seen on the image below, it is already hard for a programmer/designer to make sure that the upper part is the same size as the lower part. The upper part is anchored at all sides except at the bottom while the bottom part is anchored at all sides.

Once user wants to have a better view at the large data, resizing the form will only expand the lower part downwards. This may or may not be acceptable but it breaks the illusion of having equal data sets. On the image below you can see the stretched form.

How can this be fixed? One solution is to use a splitter control and make sure that when the form is resized both panels are resized proportionally. While the splitter has its use, it may not always be desirable. The perfect solution is to use the TableLayoutPanel container. It empowers you to create a structured grid for your controls and by default keeps cells proportional after resizing. Simply add the the control to the form, add both groups to each cell. Now set Dock.Fill for all three containers.

The result is fully embedded grid where each row takes 50% of the total TableLayoutPanel‘s height. You can create rows and columns of fixed sizes, variable sizes or event auto-sized ones. With the additional help of row and column spanning one can create almost any imaginable grid layout. The options for this example are seen on the image below.
The flexibility of the TableLayoutPanel should not be underestimated. It, together with the FlowLayoutPanel, enables programmers to design forms in a declarative way, much like the way the web designers are already doing. The layout is described in relative terms instead of hard fixing the location and the size for each control. We will tackle the problems associated with the rigid placement of controls in one of the next posts.

The final result enables the following layout after form resizing.


About programabilan

Profesionalni programer, amaterski programer...

Posted on January 30, 2012, in Tips and tagged , , . Bookmark the permalink. 1 Comment.

  1. awsome post, dude…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: