Alignment in the WPF Designer
The WPF Designer for Visual Studio provides a variety of visual cues to help the developer with the alignment and layout of controls on the user interface. Margins are useful for maintaining distance between the edge of a control and the edges of the window. Snaplines provide visual cues that indicate when a control is aligned with other controls. Gridlines are useful for aligning and laying out large groups of controls into a grid-like pattern. This topic introduces margins, snaplines, and gridlines in the WPF Designer.
.png "Alignment in the WPF Designer")
Margins
In the WPF Designer, the term margin refers to the amount of space between the edge of a control and the edge of its host container. When a control is selected in the WPF Designer, margins are indicated by black lines between the control edges and the container edges. When a margin line appears all the way from a control to the edge of the window, it indicates that margin is fixed. When the window is resized, the distance between that edge of the control and that window edge will remain constant. In contrast, when a margin line is shown as a stub that does not stretch to the edge of the window, it indicates that the margin is not fixed and that the distance between that edge of the control and that edge of the window can change. For example, if the top and left margins of a control are fixed, the control will maintain its position relative to the upper-left corner of the window when the window is resized. On the other hand, if the bottom and right margins are fixed, a control's position relative to the upper-left corner of the window will change as the window is resized. If opposite margins, such as the top and bottom margins, are fixed, the control will stretch when the window is resized. For information about how to set the margins for a control, see How to: Set Margins for a Control in the WPF Designer.
Snaplines
Snaplines are a visual cue that help with the alignment of a control relative to other controls on a window. When you drag a control on a window, snaplines will appear when the control is aligned with another control. Snaplines appear as red lines connecting the control being dragged with the control it is aligned with. Snaplines appear when the top, bottom, left, or right edge of the control being dragged is aligned with the same edge of a control in the window. With some controls, snaplines also appear when the text baselines are aligned. For more information about using snaplines, see How to: Align to Both Text Baselines and Margins and How to: Turn Off Snaplines.
Gridlines
Gridlines can be used to align controls in the WPF Designer that are laid out using the Grid container control. Gridlines represent the divisions between the rows and columns of a Grid. When controls are positioned within a Grid row, column, or cell, the margins shown are relative to the borders of the Grid row, column, or cell, and snaplines can be used to align the control to the sides of the row or column. For information about using gridlines, see How to: Add Rows and Columns to a Grid.