Article
11/17/2011

Alignment in the Silverlight Designer

Microsoft Silverlight will reach end of support after October 2021. Learn more.

The Silverlight Designer for Visual Studio provides a variety of visual cues to help you with the alignment and layout of controls on the user interface. Snaplines provide visual cues that indicate when a control is aligned with other controls. Margins are useful for maintaining distance between the edge of a control and the edges of the window. Gridlines are useful for aligning large groups of controls into a grid-like pattern. This topic introduces snaplines, margins, and gridlines in the Silverlight Designer and describes some of the tasks that you can complete using the Silverlight Designer.

Snaplines

Snaplines are a visual cue that helps with the alignment of a control relative to other controls in an application. When you drag a control in the Silverlight Designer, snaplines 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. With some controls, snaplines also appear when the text baselines are aligned.

To align edges of controls

In the Silverlight Designer with at least two controls, drag or resize one of the controls so that the edge is aligned with another control.

When the edges are aligned, a snapline appears indicating alignment. When snaplines appear, you will also see a number near the snapline that changes as you drag the control. The number indicates the distance between the edge of the current control and the edge of the other control.

To align text baselines of text-based controls

In the Silverlight Designer with at least two text-based controls, drag one of the text-based controls so that the text baseline is aligned with the text baseline of another text-based control.

When the text baselines are aligned, a snapline appears indicating alignment.

To turn off snaplines

While dragging a control in the Silverlight Designer, press and hold down the ALT key.

Snaplines will be temporarily disabled and will no longer appear.

Margins

In the Silverlight 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 Silverlight 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 application, it indicates that margin is fixed. When the browser is resized, the distance between that edge of the control and that application edge will remain constant. In contrast, when a margin line is shown as a stub that does not stretch to the edge of the application, it indicates that the margin is not fixed and that the distance between that edge of the control and that edge of the application 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 application when the browser 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 application will change as the browser is resized. If opposite margins, such as the top and bottom margins are fixed, the control will stretch when the browser is resized.

To set or release margins for a control

In the Silverlight Designer, drag a control to its desired location.

Note that on each side of the control there are either lines or stubs. The lines stretch from the edge of the control to the corresponding edge of the container.
To set a margin, move over a stub until the pointer changes to a pointing finger.
Click the stub. The stub expands to form a margin line and the margin is set.
To release a margin, move over a line until the pointer changes to a pointing finger.
Click the margin line. The line contracts to a stub and the margin for that side is released.

Gridlines

Gridlines can be used to align controls in the Silverlight 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.

In the Silverlight Designer, when you select a Grid control, rails appear on the top and left sides. You can use the rails to add, remove or size rows and columns of the grid.

Note:
If the FlowDirection property is set to RighToLeft, the rail for the rows appears on the right side of the Grid.

To add rows and columns to a grid by using the designer

In the Silverlight Designer, select a Grid control.
Move the pointer over the outer edge of the side rail to add a row or over the top edge of the top rail to add a column. The pointer changes to cross hairs and a gridline appears indicating where the row will be added.
Click the rail to set the row or the column.

The gridline is fixed in place and a gridline indicator appears in the rail at the end of the gridline.

To delete a row or a column from a Grid, click and drag the gridline indicator off the Grid. Your pointer will change and include an X to indicate deletion.

To add rows and columns to a grid by using the collection editor

In the Silverlight Designer, select a Grid control.
In the Properties window, locate the RowDefinitions property to add a row or ColumnDefinitions property to add a column.
Click the ellipsis button in the property value column.

The Collection Editor dialog box appears.
Click Add to add a new row or a new column.
If necessary, set the properties of the row or the column.
Click OK.

To add rows and columns to a grid by using the XAML editor

In the XAML editor, locate a Grid element.

Add Grid.RowDefinitions and Grid.ColumnDefinitions elements as a child of the Grid element.

The following markup shows an example:

<Grid>
    <Grid.RowDefinitions>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
    </Grid.ColumnDefinitions>
</Grid>

Add RowDefinition and ColumnDefinition elements.

The following markup shows an example:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="100" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="5*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="5*" />
    </Grid.ColumnDefinitions>
</Grid>

To set the height of a row by using the designer

In the Silverlight Designer, select a Grid control that has at least two rows.
Move the pointer over the side rail.
The pointer changes to cross hairs, and a dimmed sizing bar appears outside the rail for the corresponding row.
Move the pointer over the sizing bar to select the sizing options. The sizing options are fixed, star, and Auto.
To set the row height to a fixed value, click the # button.

In XAML view, the row height is updated to a fixed value (n).
To set the row height to use star sizing, click the * button.

In XAML view, the row height is updated to use star sizing (n*).

To set the row height to use Auto sizing, click the Auto button.

In XAML view, the row height is updated to use Auto sizing (Auto).

Note:
If the row has no content, Auto sizing causes it to collapse to zero height. This can cause difficulties as you continue designing the Grid. To avoid this problem, add content into the row before setting it to Auto size. You can also use star sizing while you work, and change to Auto when you are done.

To exit without selecting a sizing option, press ESC or move the pointer outside the sizing bar.

To set the width of a column by using the designer, follow the previous steps, but move the pointer over the top rail to activate the sizing bar.

Share via