Section 4.4. Grid

4.4. Grid

The Grid element is useful for relative, automatic positioning strategies in which some control over element placement is required. Grid is similar to Table (just like the HTML Table) and provides individual cells in which elements can be positioned. Grid is more complex than Table, however, and should not be treated as a simple Table element. Grid cell sizes can be explicitly declared as a number of device-independent pixels, as a percentage of the overall available Width and Height, or as auto-size factors based on their content by using the enumeration Auto.

Grid, like DockPanel, uses attached attributes to position child elements. Grid uses two attached attributes, Row and Column, to determine placement of child elements within its cells.

Grid uses zero-based indexing when specifying Row and Column placement.

A sample Grid might appear as follows:

Column 0, Row 0	Column 1, Row 0	Column 2, Row 0
Column 0, Row 1	Column 1, Row 1	Column 2, Row 1

To add elements to the Grid, specify which row and column the element is being added to. For example, to add an element to the cell in Column 1, Row 1, you would declare the element like this: <ElementName Grid.Column="1" Grid.Row="1" ... />. Example 4-5 shows the positioning of elements in our user-login interface using a Grid.

Example 4-5. Positioning elements using a Grid

 <Page     xmlns="http://schemas.microsoft.com/winfx/avalon/2005">     <Grid         ShowGridLines="true " >         <ColumnDefinition             Width="Auto " />         <RowDefinition             Height="Auto " />         <RowDefinition             Height="Auto " />         <RowDefinition             Height="Auto " />         <RowDefinition             Height="Auto " />         <RowDefinition             Height="Auto " />         <RowDefinition             Height="Auto " />         <Label             Grid.Row ="0 "             Grid.Column ="0 "             Width="100 ">Username </Label>         <TextBox             Grid.Row ="1 "             Grid.Column ="0 "             Width="150 ">[e-mail]</TextBox>         <Label             Grid.Row ="2 "             Grid.Column ="0 "             Width="100 ">Password </Label>         <PasswordBox             Grid.Row ="3 "             Grid.Column ="0 "             Width="150 "></PasswordBox>         <Button             Grid.Row ="4 "             Grid.Column ="0 "             Width="100 "             Content="Submit " />     </Grid> </Page> 

It's not a very exciting layout because there aren't many child elements, but you can see how to specify the attached attributes of a Grid, Row, and Column to position elements within a Grid. There is no need to declare specific cells within the Grid, but elements contained in the Grid must be declared within the opening and closing tags for the Grid element. Though the elements have been declared in order here, there is actually no need to do so. The elements are added based on the declaration of the Grid's Row and Column attached attributes.