MOVING AND SIZING CONTROLS

Moving controls in the WPF Designer is easy. Simply click and drag the control to its new position.

To move a group of controls, select the controls that you want to move. Then click one of the controls and drag to move the whole group.

Note that you can drag controls in and out of container controls such as the Grid or StackPanel. When you drag a control over a new container, the designer draws a box around the container and displays a tooltip that says “Press Alt to place inside container” where container is the name of the container. If the container doesn’t have a name, the tooltip shows the container’s control type in braces as in [Grid]. As the tooltip indicates, if you press Alt and then drop the control, it goes into the new container. If you drop the control without pressing Alt, the control lands above or below the container.

As you drag a control, the designer displays snap lines to show how the control lines up with other controls. It displays lines when the control’s edges align with another control’s edges. For some controls, it displays lines when the control’s text baseline aligns with the text baselines of other controls.

Figure 4-2 shows the designer dragging the lower button. Four red dashed snap lines show that this control’s edges line up with the left and right edges of the upper button, the left edge of the Rectangle control at the bottom, and the upper edge of the Ellipse control to the right.

FIGURE 4-2: Snap lines show how moving controls align with other controls.

Resizing a control is almost as easy as moving one. Click a control to select it. Then click and drag one of the light gray boxes surrounding the control to change its size.

If you hover the mouse near but not over a gray box at one of the control’s corners, the cursor changes to a curved arrow. You can then click and drag to rotate the control.

If you hover the mouse near but not over a gray box on one of the control’s edges, the cursor changes to two arrow heads separated by a slash. Then you can click and drag to skew the control. For example, if you drag the top of a TextBlock to the right, the result looks italicized.

WPF controls provide a fairly complex set of properties to determine how they are anchored to their containers. Fortunately, the WPF Designer provides aids to make understanding control anchoring easier.

When you select a control, the designer displays symbols next to the container’s edges showing how the control is anchored. A thin solid line ending in two closed chain links on the container’s edge means the control’s edge remains the same distance from the container’s edge even when the container resizes. In Figure 4-2, the selected button’s bottom and right edges are connected to its container’s bottom and right edges. When the window resizes, the button moves to stay the same distance from those edges.

If you look closely at Figure 4-2, you can also see small numbers on the lines connecting the button’s bottom and right edges to those of its container. In this example the numbers indicate that the button will remain 164 pixels from the container’s right edge and 109 pixels from the container’s bottom edge.

Broken chain links near the container’s edge mean that edge is free to float if the container resizes. In Figure 4-2, the button’s left and top edges are not anchored to the container’s edges so the button will move and keep its original size if the container resizes.

If a control’s opposite sides are both attached to the container, the control will grow and shrink as the container resizes so it can keep both edges the same distance from those of the container.

You can easily change a control’s edge anchors by simply clicking the symbol. If you click joined links, the designer breaks the links and vice versa.