Aligning and Spacing Components
In Design View, you can arrange and resize components by dragging them on the
canvas, or you can use the tools available in the Canvas tab of the toolstrip.
App Designer provides alignment hints to help you align components as you drag them in
the canvas. Orange dotted lines passing through the centers of multiple components
indicate that their centers are aligned. Orange solid lines at the edges indicate that the
edges are aligned. Perpendicular lines indicate that a component is centered in its parent
container.
As an alternative to dragging components on the canvas, you can align components using
the tools in the Align section of the toolstrip.
When you use an alignment tool, the selected components align to an anchor component.
The anchor component is the last component selected, and it has a thicker selection
border than the other components. To select a different anchor, hold down the Ctrl or
Shift key and click the desired component twice (once to deselect the component, and a
second time to select it again). For example, in the following image, the Format Options
label is the anchor. Clicking the Align left button aligns the left edges of the drop-
down and check box to the left edge of the label.
Lay Out Apps in App Designer