How to: Position the Child Elements of a Grid
This example shows how to use the get and set methods that are defined on Grid to position child elements.
Example
The following example defines a parent Grid element (grid1) that has three columns and three rows. A child Rectangle element (rect1) is added to the Grid in column position zero, row position zero. Button elements represent methods that can be called to reposition the Rectangle element within the Grid. When a user clicks a button, the related method is activated.
<StackPanel Grid.Column="0" Grid.Row="0" HorizontalAlignment="Left" Orientation="Vertical">
<Button Click="setCol0">Move Rectangle to Column 0</Button>
<Button Click="setCol1">Move Rectangle to Column 1</Button>
<Button Click="setCol2" Margin="0,0,0,10">Move Rectangle to Column 2</Button>
<Button Click="setRow0">Move Rectangle to Row 0</Button>
<Button Click="setRow1">Move Rectangle to Row 1</Button>
<Button Click="setRow2" Margin="0,0,0,10">Move Rectangle to Row 2</Button>
<Button Click="setColspan">Span All Columns</Button>
<Button Click="setRowspan">Span All Rows</Button>
<Button Click="clearAll">Clear All</Button>
</StackPanel>
</Grid>
<Grid DockPanel.Dock="Top" Margin="0,10,15,0" HorizontalAlignment="Left" Name="grid1" ShowGridLines="True" Width="400" Height="400" Background="LightSteelBlue">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Rectangle Name="rect1" Fill="Silver" Grid.Column="0" Grid.Row="0"/>
<TextBlock FontSize="15" HorizontalAlignment="Right" VerticalAlignment="Bottom" Grid.Column="0" Grid.Row="0" Margin="5">Column 0, Row 0</TextBlock>
<TextBlock FontSize="15" HorizontalAlignment="Right" VerticalAlignment="Bottom" Grid.Column="1" Grid.Row="0" Margin="5">Column 1, Row 0</TextBlock>
<TextBlock FontSize="15" HorizontalAlignment="Right" VerticalAlignment="Bottom" Grid.Column="2" Grid.Row="0" Margin="5">Column 2, Row 0</TextBlock>
<TextBlock FontSize="15" HorizontalAlignment="Right" VerticalAlignment="Bottom" Grid.Column="0" Grid.Row="1" Margin="5">Column 0, Row 1</TextBlock>
<TextBlock FontSize="15" HorizontalAlignment="Right" VerticalAlignment="Bottom" Grid.Column="1" Grid.Row="1" Margin="5">Column 1, Row 1</TextBlock>
<TextBlock FontSize="15" HorizontalAlignment="Right" VerticalAlignment="Bottom" Grid.Column="2" Grid.Row="1" Margin="5">Column 2, Row 1</TextBlock>
<TextBlock FontSize="15" HorizontalAlignment="Right" VerticalAlignment="Bottom" Grid.Column="0" Grid.Row="2" Margin="5">Column 0, Row 2</TextBlock>
<TextBlock FontSize="15" HorizontalAlignment="Right" VerticalAlignment="Bottom" Grid.Column="1" Grid.Row="2" Margin="5">Column 1, Row 2</TextBlock>
<TextBlock FontSize="15" HorizontalAlignment="Right" VerticalAlignment="Bottom" Grid.Column="2" Grid.Row="2" Margin="5">Column 2, Row 2</TextBlock>
</Grid>
The following code-behind example handles the methods that the button Click events raise. The example writes these method calls to TextBlock elements that use related get methods to output the new property values as strings.
private void setCol0(object sender, RoutedEventArgs e)
{
Grid.SetColumn(rect1, 0);
txt1.Text = "Rectangle is in Column " + Grid.GetColumn(rect1).ToString();
}
private void setCol1(object sender, RoutedEventArgs e)
{
Grid.SetColumn(rect1, 1);
txt1.Text = "Rectangle is in Column " + Grid.GetColumn(rect1).ToString();
}
private void setCol2(object sender, RoutedEventArgs e)
{
Grid.SetColumn(rect1, 2);
txt1.Text = "Rectangle is in Column " + Grid.GetColumn(rect1).ToString();
}
private void setRow0(object sender, RoutedEventArgs e)
{
Grid.SetRow(rect1, 0);
txt2.Text = "Rectangle is in Row " + Grid.GetRow(rect1).ToString();
}
private void setRow1(object sender, RoutedEventArgs e)
{
Grid.SetRow(rect1, 1);
txt2.Text = "Rectangle is in Row " + Grid.GetRow(rect1).ToString();
}
private void setRow2(object sender, RoutedEventArgs e)
{
Grid.SetRow(rect1, 2);
txt2.Text = "Rectangle is in Row " + Grid.GetRow(rect1).ToString();
}
private void setColspan(object sender, RoutedEventArgs e)
{
Grid.SetColumnSpan(rect1, 3);
txt3.Text = "ColumnSpan is set to " + Grid.GetColumnSpan(rect1).ToString();
}
private void setRowspan(object sender, RoutedEventArgs e)
{
Grid.SetRowSpan(rect1, 3);
txt4.Text = "RowSpan is set to " + Grid.GetRowSpan(rect1).ToString();
}
Public Sub setCol0(ByVal sender As Object, ByVal e As RoutedEventArgs)
Grid.SetColumn(rect1, 0)
txt1.Text = "Rectangle is in Column " + Grid.GetColumn(rect1).ToString()
End Sub
Public Sub setCol1(ByVal sender As Object, ByVal e As RoutedEventArgs)
Grid.SetColumn(rect1, 1)
txt1.Text = "Rectangle is in Column " + Grid.GetColumn(rect1).ToString()
End Sub
Public Sub setCol2(ByVal sender As Object, ByVal e As RoutedEventArgs)
Grid.SetColumn(rect1, 2)
txt1.Text = "Rectangle is in Column " + Grid.GetColumn(rect1).ToString()
End Sub
Public Sub setRow0(ByVal sender As Object, ByVal e As RoutedEventArgs)
Grid.SetRow(rect1, 0)
txt2.Text = "Rectangle is in Row " + Grid.GetRow(rect1).ToString()
End Sub
Public Sub setRow1(ByVal sender As Object, ByVal e As RoutedEventArgs)
Grid.SetRow(rect1, 1)
txt2.Text = "Rectangle is in Row " + Grid.GetRow(rect1).ToString()
End Sub
Public Sub setRow2(ByVal sender As Object, ByVal e As RoutedEventArgs)
Grid.SetRow(rect1, 2)
txt2.Text = "Rectangle is in Row " + Grid.GetRow(rect1).ToString()
End Sub
Public Sub setColspan(ByVal sender As Object, ByVal e As RoutedEventArgs)
Grid.SetColumnSpan(rect1, 3)
txt3.Text = "ColumnSpan is set to " + Grid.GetColumnSpan(rect1).ToString()
End Sub
Public Sub setRowspan(ByVal sender As Object, ByVal e As RoutedEventArgs)
Grid.SetRowSpan(rect1, 3)
txt4.Text = "RowSpan is set to " + Grid.GetRowSpan(rect1).ToString()
End Sub
For the complete sample, see Grid Positioning Methods Sample.