How to: Size Rows and Columns in a Grid Control

The Windows Presentation Foundation (WPF) Grid control enables you to quickly and easily position and align controls by creating grid-based layouts. At design time, you can size rows and columns in the WPF Designer. By default, new rows and columns use Star sizing.

Important

If you set the size of a row or column to Auto before you add content to it, you cannot see it in the designer. This can make it hard to position controls in the correct row or column. To avoid this, you can use star sizing while you work, and change to Auto when you are finished.

This topic shows how to size rows and columns in a Grid by using designer gestures.

Setting Row Height by Using the Designer

In the WPF Designer, when you select a Grid control, rails appear on the top and left sides.

Note

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

To set the height of a row by using the designer

1. In the WPF Designer, select a Grid control that has at least two rows.

2. 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.

3. Move the pointer over the sizing bar to select the sizing options. The sizing options are fixed, star, and Auto.

4. 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).

5. 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*****).

6. 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.

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

Setting Column Width by Using the Designer

The procedure for setting the width of a column is exactly analogous to setting the height of a row.

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.

See Also

Tasks

How to: Add Rows and Columns to a Grid

Walkthrough: Constructing a Dynamic Layout

Concepts

Alignment in the WPF Designer

Layout with Absolute and Dynamic Positioning

Other Resources

WPF Container Controls