Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Designing Resizable Windows Forms in Visual Studio .NET : Page 5

Are you sick of wasting time writing resizing code for your Windows forms? .NET's new anchoring and docking properties enable form controls to automatically resize or reposition themselves as the form resizes. This article explains how to create resizable Windows forms automatically, or with just a few lines of code.

Figure 8: Here, the Yellow Panel is not resizing because it's docked to Left, and not set to Fill.

Notice that in Figure 8, the Yellow Panel is not getting resized at all. The Yellow Panel should resize horizontally just like the Cyan one. It doesn't because it's docked to Left (and not set to Fill).

The Yellow and Cyan Panels are not resizing vertically because the container of both these Panels (the Red Panel) is docked to Top and not set to Fill.

This is where a little code comes into play. Programmatically increase or decrease the width of the Yellow Panel in proportion to the change in the width of the form.

Put the following code in the Form's resize event:

' VB.NET Private Sub Form1_Resize(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles MyBase.Resize pnlYellow.Size = New System.Drawing.Size(Me.Size.Width * _ 0.4225, pnlYellow.Size.Height) End Sub //C# private void Form1_Resize (object sender, System.EventArgs e) { pnlYellow.Size = new System.Drawing.Size((int) (this.Size.Width * 0.4225), pnlYellow.Size.Height ) ; }

To get the correct width of the Yellow Panel at runtime, multiply the width of the Form by a ratio calculated using the formula:

Ratio = WidthOfYellowPanel / WidthOfTheForm

In this case the ratio is 0.4225, which means the width of the Yellow Panel is 42.25% of the width of the Form. Hence, at runtime multiply the current width of the Form by 0.4225 and set that value as the new width of the Yellow Panel in the Form's resize event. Now try it again:

Figure 9: The final version of the sample form.

  1. Put in all controls as shown in Figure 9. Start anchoring the controls within the panels. Start with the Yellow panel. You want all the ComboBox controls in the Yellow panel to maintain the same constant distance from all the four edges of the panel and also to expand horizontally as the form/panel expands.
  2. Select all the DropDown controls and in the properties window, dropdown the Anchor property and anchor the selected controls to Left and Right.
  3. Dock all the Labels in the Yellow panel to the Left edge of the Yellow Panel.
  4. Note: You won't anchor the controls of the Yellow Panel to Top or Bottom, because the Yellow Panel will not resize vertically.

  5. Dock the controls in the Cyan panel the same as in the Yellow Panel.
  6. The TextBox (set Multiline property of the TextBox to True) in the Green Panel should expand both horizontally as well as vertically when the form expands. So set the anchor property of the TextBox to all four edges, Top, Bottom, Left, and Right.
  7. Anchor the label 'Remarks:' only to the left, so that it sticks to the left edge and also repositions itself vertically at proportional distances from the top and bottom edges of the panel.
  8. Next the two buttons 'Save' and 'Cancel' need to be anchored to the bottom-right corner.
  9. Hit F5. The controls should resize along with the form.
  10. Now set the BackColor property of the panels back to their default values. Also set the MinimumSize property of the form such that all controls are visible and usable when the window is shrunk.

As you can see, Panels play a very important role in the layout design. And thankfully, the amount of coding needed to resize/reposition controls has been greatly reduced—if not totally eliminated—in .NET.

Benny K. Mathew has been programming with a passion since high school. He completed his Master's Degree in Computer Applications (M.C.A.) at the University of Mysore in Mysore, India. He began his professional career in Bangalore, India at Delphi Software. Presently, he is a programmer for Thomson Financial Research in Bangalore. You can reach him by e-mail at benny_k_mathew@yahoo.com.
Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date