WPF DockPanel 布局答案

【问题标题】：WPF DockPanel LayoutWPF DockPanel 布局
【发布时间】：2014-06-24 15:01:53
【问题描述】：

我想更改我的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" />

在 Paint 中可视化（笑）：

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

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

顺便说一句：是否有任何应用程序可以让我在应用程序运行时查看我的应用程序布局（即向每个面板添加网格线或其他东西）？

无论如何，谢谢！

【问题讨论】：

你是想坚持使用 DockPanels 还是几个 Grids 就足够了？
内容会增长吗？（即彩色块？）还是一直是固定大小？
始终固定大小。而且我对任何解决方案都持开放态度——dockPanels 不是必需品。
你为什么不使用avalondock.codeplex.com之类的东西？
使用Grid 很容易，但我不得不问一下“旧顶部”的内容应该如何表现？就像灰色的所有东西都漂浮在其他东西后面，或者右上角是否充当自己的单元格，等等。

标签： c# wpf xaml

【解决方案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>

【讨论】：

非常感谢。抱歉，如果您认为我在重复问题 - 无意这样做。感谢您帮助新手:)