Blog
Placing XAML Controls Onto the Grid
By Ken Getz | November 06, 2012
One of XAML's most important features is its ability to create hierarchies of controls; that is, the ability to nest controls inside other controls.
If you need to arrange content in two dimensions, the Grid control is your best choice. As a matter of fact, when Visual Studio creates a new project, it always places a Grid element as the only child control of the host Window element in the new form.
In this article, we'll investigate programmatically setting the location of controls within the grid.
Placing Controls Onto the Grid
In addition to manually specifying the sizes for rows and columns within the Grid control, you can also allow child controls to determine the necessary sizes. If you like, you can have the grid rows and columns determine the sizes of the controls within the grid. Follow these steps to try out both situations.
1. From the Toolbox window, drag a Button control into the grid, in the middle cell (see below). Set the Name property for the Button to DemoButton. 2. Note the resulting XAML markup, which should look like the following:<Button
x:Name="DemoButton"
Content="Button"
Grid.Column="1"
HorizontalAlignment="Left"
Margin="67,33,0,0"
Grid.Row="1"
VerticalAlignment="Top" />
As you might guess, the Grid.Column and Grid.Row attributes indicate the container for the control, and the Margin attribute indicates how far the control is from the edges of that container.
TIP: The Button control doesn't supply the Grid.Column and Grid.Row properties-the Grid control supplies those properties, extending the set of properties of every control within the Grid.
3. Enlarge the button, and move it so that it spans two rows, as shown below. Note that the margin offsets are now measured from grid cells in two different rows, and that the Button's Grid.RowSpan property has been set to 2.
4. Note that the XAML markup for the button now looks something like this:
<Button
x:Name="DemoButton" Content="Button"
Grid.Column="1" Grid.Row="1"
Margin="86,45,0,0"
VerticalAlignment="Top" HorizontalAlignment="Left"
Height="140" Width="115"
Grid.RowSpan="2"
/>
The markup now includes the Grid.RowSpan attribute (or Grid.ColumnSpan, if your control spans multiple columns). Based on this markup, XAML can determine that your control's upper-left corner is in cell 1, 1; and that the control spans two rows. The Margin attribute's values indicate offsets from the edges of the corresponding region within the grid. Modify the XAML markup for the button, so that the button spans only a single row, and has no margin settings (that is, it fills its entire container), and includes the content Click Me!.
5. The Figure below shows the results after making this change:
<Button
x:Name="DemoButton"
Content="Click Me!"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Grid.Column="1"
Grid.Row="1"
/>
6. Modify the grid column widths, so that they're all equal.
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
7. Again modify the column definitions, specifying a width of Auto for the middle row and column. The Figure below shows the resulting layout:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="Auto" />
<RowDefinition Height="3*" />
</Grid.RowDefinitions>
