BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Layout Controls - Grid

The sixth part of the Windows Presentation Foundation Fundamentals tutorial continues to look at the important subject of layout controls. This article examines the WPF Grid layout control, which organises its children into parallel columns and rows.

Automatic Cell Sizing

Another option for sizing cells is to set the height or width to Auto. A row with an automatic height is resized to the smallest possible height that will not clip its child controls. Similarly, an automatic width resizes the column to the smallest possible width that will still display the content of child controls. This type of sizing for fixed dimensions can be much easier that specifying a pixel size and is automatically updated if the child controls are altered. For example, when a column's width is defined by text that varies according to the user's locale.

Adjust the row and column definitions in the sample window as follows:

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

The results of the above XAML are shown below. You can see that the first column has been narrowed so that the labels just fit. The first two rows are the minimum height required to correctly render the text boxes. Resizing the window does not affect the automatically sized elements.

WPF Grid Column and Row Automatic Sizing

Proportional Cell Sizing

One of the reasons behind the use of WPF layout controls, rather than the simple co-ordinate and size system often used with Windows Forms, is to cater for different screen resolutions and window sizes. Sometimes this means that you will design a grid without specific dimensions, preferring to indicate the desired ratio of sizes. For example, you may decide that the second column in a grid should always be twice the size of the first, regardless of the overall size of the grid.

You can achieve this type of layout using proportional sizing or star sizes. A star size is entered as a number followed by an asterisk (*). When rendered, WPF automatically arranges the columns or rows so that the relative sizes are maintained. As an example, we might set the widths of our two columns to 1* and 2*. This states that the second column is double the size of the first.

You can mix star sizes with fixed or automatic sizes. When you do, the fixed and automatic sizes remain fixed. Only the columns or rows with star sizes are adjusted to ensure the correct ratios.

The XAML below adds the star sizes for the column widths that force the second column to be double the width of the first. It also specifies that the second row will be 50% greater in height than the first. The third row is fixed in height at eighty pixels, demonstrating that it is acceptable to mix star sizes and fixed sizes.

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="1*" />
    <ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
    <RowDefinition Height="1*"/>
    <RowDefinition Height="1.5*"/>
    <RowDefinition Height="80"/>
</Grid.RowDefinitions>

When executed the window is as shown below. Try running the program and resizing the window to see how the proportional sizing affects the child controls.

WPF Grid Column and Row Proportional Sizing

11 March 2013