WPF DockPanel Layout

Question

I want to change the alignment of my dockPanel, and I'm having some trouble. I'm relatively new to WPF, so that may explain it.

Anyways, here is the current layout:

    <theme:bottomPanel DockPanel.Dock="Bottom" x:Name="bottomPanel" ClipToBounds="False" SnapsToDevicePixels="False" HorizontalAlignment="Center" Height="145" />
    <theme:rightPanel DockPanel.Dock="Right" x:Name="rightPanel" ClipToBounds="False" SnapsToDevicePixels="False"/>
    <theme:leftPanel DockPanel.Dock="Left" x:Name="leftPanel" ClipToBounds="False" SnapsToDevicePixels="False" />
    <theme:MapPanel DockPanel.Dock="Top" x:Name="mapPanel" ClipToBounds="False" SnapsToDevicePixels="False" />

Visualized in Paint (lol) :

I would like to change the layout to something like the following:

Is this possible? If so, what approach would you recommend? Any guidance would be helpful! Thank you.

As an aside: is there any application that allows me to see my application layout as the app runs (i.e. add gridlines to each panel or something)?

Anyways, thanks!

Answer 1

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>

    <Border Background="Gray" Grid.ColumnSpan="3">
        <TextBlock Text="Top Area"/>
    </Border>

    <Border Background="Magenta" Grid.Row="1" Height="200">
        <TextBlock Text="Left Area"/>
    </Border>

    <Border Background="Red" Grid.Row="1" Grid.Column="1" Height="200">
        <TextBlock Text="Bottom Area"/>
    </Border>

    <Border Background="Cyan" Grid.Column="2" Grid.RowSpan="2" Margin="0,200,0,0" Width="200">
        <TextBlock Text="Right Area"/>
    </Border>
</Grid>