Non-square layout

Question

I'm trying to make a certain layout in wpf, the best way to explain is to show you:

This is what it looks like now:

And it should look like this:

Does anyone have an idea on how to accomplish this in wpf? The borders need to be exactly like in the image.

Thanks.

Answer 1

If these are grids you can fake it 99.9% of the way with two Borders which have their Width set to the CornerRadius and bind their height to the ActualHeight of the top right panel:

<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="3*" />
    <ColumnDefinition Width="2*" />
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="9*" />
  </Grid.RowDefinitions>
  <Border Background="Red" Grid.RowSpan="2" CornerRadius="5" Margin="2"/>
  <Border x:Name="TopRight" Background="Red" Grid.Column="1"
          CornerRadius="5" Margin="2"/>
  <Border Background="Yellow" Width="5"
          Height="{Binding ActualHeight, ElementName=TopRight}"
          HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,2,0,2"/>
  <Border Background="Yellow" Width="5" HorizontalAlignment="Left"
          Height="{Binding ActualHeight, ElementName=TopRight}"
          VerticalAlignment="Top" Grid.Column="1" Margin="0,2,2,0"/>
  <Border Background="Green" Grid.Column="1" Grid.Row="1"
          CornerRadius="5" Margin="2"/>
</Grid>

The colors in this are for example of the overlaying only.