Making Controls Arrange
Themselves
Lesson 2 explained how to add controls to a form and arrange them nicely. Using those tech-
niques, you can create forms like the one shown in Figure 3-1.
FIGURE 31
That form looks okay in Figure 3-1, but what if the user enlarges the form as shown in
Figure 3-2? Pretty lame, huh? Although the form is bigger, the areas that contain data are not.
FIGURE 32
3
596906c03.indd 37 4/7/10 12:31:38 PM
38
LESSON 3 Making Controls arrange theMselves
The URL for the book selected in Figure 3-2 is too long to fit within the GroupBox, so it is truncated
even though the form has extra wasted space on the right. The
ListBox isn’t big enough to display all
of its items even though there’s wasted space at the bottom. It would be nice if the controls rearranged
themselves to use the available space and display the entire URL and more list items.
Figure 3-3 shows another problem with this form.
If the user shrinks the form, the
TextBoxes and
URL
LinkLabel are chopped off, the Year Label
and
TextBox are chopped in half vertically, the
ListBox doesn’t fit, and the cover picture is com-
pletely missing.
The program would look nicer if the controls were
shrunk so you could at least see their edges. Some
of the values still wouldn’t fit but at least the form
wouldn’t look so amateurish. You could even make the form refuse to shrink so it’s too short to dis-
play the Year controls.
This lesson explains some simple ways you can make controls rearrange themselves to take advantage
of whatever space is available, and how to give the form minimum and maximum sizes so the user
can’t make it completely useless.
RESTRICTING FORM SIZE
Forms (and in fact all controls) have MinimumSize and MaximumSize properties that you can use
to restrict the form’s size. Simply set these properties to a width and height (or set their
Width and
Height sub-properties) and the form does the rest.
For example, to prevent the user from making the form shown in Figure 3-3 too small, you can set
the form’s
MinimumSize property to 663, 233.
USING ANCHOR PROPERTIES
The MinimumSize property prevents the user from making a form too small but it doesn’t solve the
problem shown in Figure 3-2. When the user resizes a form, it would be nice for controls to change
their sizes to match.
The
Anchor property lets a control resize itself when its container resizes. This property can take one
or more of the values
Top, Bottom, Left, and Right, in any combination. These values indicate that
the control’s edge should remain the same distance from the corresponding edge of its container.
For example, initially a control’s
Anchor property is set to Top Left so it remains the same distance
from its container’s top and left edges. If you resize the form, the control doesn’t move.
For a more interesting example, suppose you place a
TextBox on a form, set its Multiline property
to
True, arrange it so its edges are 12 pixels from the edges of the form, and set its Anchor property to
Top, Bottom, Left, Right. Then when you resize the form, the TextBox resizes itself so its edges
remain 12 pixels from the form’s edges.
FIGURE 33
596906c03.indd 38 4/7/10 12:31:39 PM
Using Anchor Properties
39
If an Anchor’s values don’t include either Left/Right or Top/Bottom, the con-
trol moves to keep itself the same distance from the middle of the form. For
example, if a
Button’s Anchor property is Bottom, it moves so it remains the
same distance from the horizontal middle of the form.
This fact lets you keep one or more controls centered. For example, place several
Buttons near the bottom of a form and use the Format menu to center them
horizontally. Now if you set their
Anchor properties to Bottom, the group of
Buttons remains centered when the form resizes.
The Anchor property cannot resize a control such as a Label or LinkLabel if
that control has
AutoSize set to True. In that case the control has its own ideas
about how big it should be.
To set the Anchor property at design time, you can type a value like Top, Left, Right into the
Properties window or you can use the Properties window’s
Anchor editor.
To use the editor, click the
Anchor property in the Properties
window. Then click the dropdown arrow to the right to make the
editor shown in Figure 3-4 appear. Click the skinny rectangles to
select or deselect the anchors that you want to use. (In Figure 3-4
the top, bottom, and left anchors are selected.) When you’re
finished, press [Enter] to accept your changes or [Esc] to cancel
them.
Using the
Anchor property, you can solve the problem shown in
Figure 3-2. Table 3-1 gives the
Anchor property values used by the
controls to let them take advantage of the form’s available space.
TABLE 31
CONTROL
Anchor PROPERTY
Books ListBox
Top, Bottom, Left
Details GroupBox
Top, Bottom, Left, Right
Title TextBox
Top, Left, Right
Author TextBox
Top, Left, Right
ISBN TextBox
Top, Left, Right
URL LinkLabel
Top, Left, Right
Cover PictureBox
Top, Right
FIGURE 34
596906c03.indd 39 4/7/10 12:31:39 PM
40
LESSON 3 Making Controls arrange theMselves
Now when the form resizes:
The
ListBox stretches vertically to match the form’s height.
The
GroupBox stretches vertically and horizontally to use as much of the form’s width and
height as possible.
The
TextBoxes and LinkLabel stretch horizontally to be as wide as possible while still fit-
ting inside the
GroupBox.
The
PictureBox moves with the GroupBox’s right edge so it leaves as much room as possible
to the left for the
TextBoxes and LinkLabel.
Figure 3-5 shows the result. Now the
ListBox is big enough to show all of its items and the
LinkLabel is big enough to show the entire URL.
FIGURE 35
Note that the TextBoxes and LinkLabel do not stretch horizontally when the form resizes; they
stretch when the
GroupBox that contains them resizes. In this example, when the form stretches, the
GroupBox stretches, and when the GroupBox stretches the TextBoxes and LinkLabel stretch.
USING DOCK PROPERTIES
The Anchor property can handle most of your arranging needs but some combinations of Anchor
values are so common that Visual C# provides another property to let you handle these situations more
easily:
Dock. The Dock property lets you tell a control to attach itself to one of the edges of its container.
For example, a menu typically attaches to the top of a form and resizes horizontally to fill the form
when the form resizes. You could provide that behavior by setting the menu’s
Anchor property to
Top, Left, Right, but setting Dock to Top is even easier.
The
Dock property can take one of six values. Left, Right, Top, and Bottom attach the control
to the corresponding edge of its container.
Fill makes the control take up any space left over after
any other controls’
Dock properties have had their way, and None detaches the control so its Anchor
property can take over.
The Dock property cannot resize a control such as a Label or LinkLabel if that
control has
AutoSize set to True.
596906c03.indd 40 4/7/10 12:31:40 PM
Using Dock Properties
41
The Dock property processes positioning requests in a first-come-first-served order based on the
controls’ stacking order on the form. In other words, it positions the first control that it draws first,
the second next in whatever space is still available, and so forth.
Normally the stacking order is determined by the order in which you add controls to the form, but
you can change the order by right-clicking a control and selecting Bring to Front or Send to Back.
However, if you’re working with a complicated set of
Dock properties and the stacking order gets
messed up, it’s often easier to delete all of the controls and start over from scratch.
Figure 3-6 shows a form holding five docked
Labels
(with
AutoSize = False). The numbers in the controls’
Text properties give the order in which they were cre-
ated, which is also their stacking order. The following
list explains how the form’s space was divvied up among
the
Labels:
1. The first Label has Dock = Top, so it took the
top part of the form.
2. The second Label has Dock = Left, so it took
the left edge of the remaining area (after the first
Label was positioned).
3. The third Label has Dock = Right, so it took the right edge of the remaining area.
4. The fourth Label has Dock = Bottom, so it took the bottom edge of the remaining area.
5. The final Label has Dock = Fill, so it fills all of the remaining area.
DOCKED MENUS
In one typical docking scenario, a form contains a MenuStrip with Dock = Top
and a container such as a
Panel with Dock = Fill so it takes up the rest of the
form. All of the other controls are placed inside the
Panel.
You can also add
ToolStrips, ToolStripContainers, and StatusBars with the
appropriate
Dock properties to put those controls in their correct places. Figure 3-7
shows a form holding a
MenuStrip (Dock = Top), a ToolStripContainer (Dock
= Top
) containing two ToolStrips, a Panel (Dock = Fill), and a StatusStrip
(
Dock = Bottom).
FIGURE 37
FIGURE 36
596906c03.indd 41 4/7/10 12:31:40 PM
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.