Keep controls centered on resizable form

When dealing with resizable forms, managing layout can be achieved via the Anchor and Dock properties or using a layout panel. However, sometimes the design requires that certain controls stay centered, regardless of the parent form’s size. Luckily, a simple solution exists that does not involve writing centering code and handling resizing events.

Consider the following design requirement:

  • Form must contain several pages.
  • Each page will be implemented as a user control.
  • Each user control will fill entire tab page

We will create a form with a tab control that will cover entire client area (as seen on the image below). This design is commonly used when designing the options dialog or when creating a wizard.

Each page is created as a separate user control and each page may contain different number of controls. Since form is resizable, there is no fixed page size and layout must be carefully crafted. The design time layout will be resized to fit the parent control (in this case, a tab control page).

When we run this application, the resulting look may not satisfy user expectations (seen on the image below). Certain controls can be stretched to fill entire area (like DataGridView, ListBox, TreeControl, etc.) and they can be set to DockStyle.Fill to maintain a certain look across all sizes since they fill most of the client area. But certain control such as Label, Button or ComboBox look ridiculous when stretched. They can be anchored but doing that may leave the form to look empty.

Centering such controls or set of those controls (e.g. login set of controls) makes more sense. To do that, do the following:

  • Enlarge user control in the design view to make sure that all controls can be placed and that their layout can be designed.
  • Add all controls that are required for the page
  • Resize and reorder all controls to create perfect group layout.
  • Select all controls (either via mouse or via the keyboard shortcut Ctrl+A and:
    1. Click on the “Center Horizontally” button
    2. Click on the “Center Vertically” button.
    3. Set the Anchor property for all controls to None

The final layout can be seen on the following image:

When form is arbitrarily resized, the controls on the page will stay centered.

Layout mechanics can be entirely created in the design view using the supplied set of properties and layout panels. Zero lines of code must be written for certain layouts which is certainly a benefit in the long term.

Advertisements

About programabilan

Profesionalni programer, amaterski programer...

Posted on February 4, 2012, in Tips and tagged , , . Bookmark the permalink. Leave a comment.

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: