Merge grid columns

Question

Hi I've been searching for a solution with no success ...

I want a grid that resembles:

+-------+----------------+
|       |                |
+-------+----------------+
|                        |
|                        |
|                        |
+-------+----------------+
|       |                |        
+-------+----------------+

Thank you in advance!

Solution 1

It looks like a 3-row, 2-column Grid with proportional sizes:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="2*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="3*" />
    </Grid.ColumnDefinitions>
</Grid>

The 5 cells would be like:

• Top-left: Grid.Column="0", Grid.Row="0"
• Top-right: Grid.Column="1", Grid.Row="0"
• Center: Grid.Column="0", Grid.Row="1", Grid.ColumnSpan="2"
• Bottom-left: Grid.Column="0", Grid.Row="2"
• Bottom-right: Grid.Column="1", Grid.Row="2"

Solution 2

Now, that is a very simple grid. Two columns and three rows with the second row content spanning two columns... it doesn't get much simpler than that...

  <Grid Width="640" Height="480">  
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="3*"/>
      <ColumnDefinition Width="7*"/>  
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="25*"/>
      <RowDefinition Height="50*"/>
      <RowDefinition Height="25*"/>
    </Grid.RowDefinitions>
  <Border Grid.Column="0" Grid.Row="0" BorderBrush="Red" Margin="1" BorderThickness="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
  <Border Grid.Column="1" Grid.Row="0" BorderBrush="Green" Margin="1" BorderThickness="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
  <Border Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" Margin="1" BorderThickness="2" BorderBrush="Blue" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
  <Border Grid.Column="0" Grid.Row="2" BorderBrush="Red" Margin="1" BorderThickness="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
  <Border Grid.Column="1" Grid.Row="2" BorderBrush="Green" Margin="1" BorderThickness="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
  </Grid>

Solution 3

Super late answer, sorry. Hopefully it will help someone who is looking for it in the future, like I am. In looking for an answer to the same question, I stumbled across this:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="3*"/>
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="2*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Border Grid.Row="1"
            Grid.ColumnSpan="2">
        <!-- Code -->
    </Border>
</Grid>

The main portion of that being 'Grid.ColumnSpan="2"'