28

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

I want a grid that resembles:

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

Thank you in advance!

C1rdec
  • 1,647
  • 1
  • 21
  • 46

3 Answers3

50

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"
McGarnagle
  • 101,349
  • 31
  • 229
  • 260
23

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>

enter image description here

Dean Kuga
  • 11,878
  • 8
  • 54
  • 108
1

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"'

broffutt
  • 86
  • 2