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 3

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.

Anchoring maintains a constant distance between the anchored edge of the control and the corresponding edge of the container. The Anchor property determines which edges of the control are anchored to the container's edges. When a particular edge of the control anchors to an edge of it's container, the edge always maintains the same distance even if the form is resized. However, unlike with the Dock property, the edge will not be positioned flush against the edge. The Anchor property of the form control can be set to any combination of the 4 values, Top, Bottom, Left, and Right—or it can be set to None.

Figure 4: Controls can be anchored using the Properties window.

By default, the Anchor property of a control is set to Top, Left, which means controls are always at a constant distance from the top and left edges of their containers.

Controls can be anchored using either the Properties window (Figure 4) or with code:

' VB.NET Me.Button1.Anchor = _ (System.Windows.Forms.AnchorStyles.Bottom Or _ System.Windows.Forms.AnchorStyles.Right) //C# this.button1.Anchor = (System.Windows.Forms.AnchorStyles.Bottom | System.Windows.Forms.AnchorStyles.Right);

If a control is anchored to both Left and Right, or to both Top and Bottom, or to all four edges of the Form, resizes as its container does—in addition to anchoring itself. The result is that the control stretches or shrinks (Figure 5). Additionally, if a control's Anchor property is set to AnchorStyle.None, it repositions itself as the container resizes so that the distance to the edges remains proportional.

Note: Some controls, like ComboBox, which has a fixed height, will not resize/stretch/shrink themselves vertically even if they are anchored to the Top and Bottom edges.

Figure 5: Start a new Windows application and place all the controls as shown.

Now run through it. Start a new Windows application and place all the controls as shown in Figure 5. Note that:

  1. The label 'Select' and the ComboBox stay on top.
  2. The ComboBox resizes horizontally as the form resizes.
  3. The label 'Description' repositions itself to align to the middle of the TextBox and also stays at a constant distance from the left edge of the form.
  4. The TextBox resizes both horizontally and vertically.
  5. The 'Save' and 'Cancel' buttons are always positioned at the bottom right corner of the form.

Anchor the controls in the following manner:

  1. The Label 'Select:' remains unchanged. By default, its Anchor properties are set to Top, Left.
  2. Set the Anchor property of the ComboBox to Top, Left, and Right so it remains at a constant distance from the top, left, and right edges of the form. It will resize itself horizontally.
  3. Anchor the label 'Description' only to the Left. It will reposition itself vertically while sticking to the left edge of the form.
  4. Set the TextBox's Anchor property to all four edges, Top, Bottom, Left, and Right. It should maintain a constant distance from all the four edges of the form and also grow or shrink both vertically as well as horizontally.
  5. Anchor the buttons to Bottom, Right.
  6. Set the MinimumSize Property of the form to an acceptable size, so that the controls do not overlap or go out of the visible area of the form when it is made very small.

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