Export (0) Print
Expand All

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.

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();
		}

Reference

Concepts

Show:
© 2014 Microsoft