WPF DockPanel布局

Question

我想改变我的dockPanel的排列方式，而且我遇到了一些麻烦。我对WPF比较陌生，所以这可以解释这一点。

无论如何，下面是当前的布局：

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

在油漆(lol)中可视化：

​

​

我想将布局更改为以下内容：

​

​

这个是可能的吗？如果是的话，你会推荐什么方法？任何指导都是有帮助的！谢谢。

顺便提一句:是否有任何应用程序允许我在应用程序运行时看到我的应用程序布局(即向每个面板添加网格线或其他东西)？

不管怎样，谢谢！

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>

​

​