在 WPF 中重新创建 WinForms 布局答案

【问题标题】：Recreating WinForms layout in WPF在 WPF 中重新创建 WinForms 布局
【发布时间】：2012-02-21 22:03:10
【问题描述】：

我刚刚继承了一个旧的 WinForms 应用程序，其 UI 布局如下：

我的任务是更新有关该软件的几件事，其中之一是将它移植到我以前没有使用过的 WPF。我还被告知新的 WPF UI 必须看起来与现有的 UI 布局相同，所以我试图弄清楚如何在 WPF 中创建该布局。我需要一个横跨窗口顶部的工具栏，它可以延伸固定大小窗口的整个宽度。我可以在默认网格中执行此操作还是需要停靠面板来执行此操作？另外，我假设我会使用 2 列和 3 行的网格来布局六个组框？

【问题讨论】：

标签： wpf winforms layout

【解决方案1】：

你可以用DockPanel 做的任何事情也可以用Grid 做——DockPanel 只是一个捷径。所以是的，您可以使用默认的Grid 完成所有这些操作。

至于如何进行布局：这取决于您希望如何调整大小。调整大小时，一切都保持成比例吗？如果是这样，带有三列的单个Grid（以及ColumnDefinitions 的百分比大小）就可以了。您实际上需要四行，而不是三行 - 第一个 RowDefinition 将用于 ToolBar（使用 ColumnSpan="3"）并且需要 Height="Auto"，因此它使用 @987654331 @的默认大小；剩余的行将是百分比大小的。

尝试一下，看看它是否适合您。如果调整大小需要比仅按比例更复杂，请发布第二张不同大小的窗口屏幕截图，我们可以进一步帮助您。

【讨论】：

非常感谢乔的建议。我很感激！

【解决方案2】：

我个人会为菜单/内容区域使用DockPanel，然后在内容区域中使用网格来定义组框

<DockPanel>
    <Grid x:Name="MenuRegion" DockPanel.Dock="Top" />
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
    </Grid>

    <Grid Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" />
    <Grid Grid.Row="0" Grid.Column="2" />

    <Grid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" />
    <Grid Grid.Row="1" Grid.Column="2" />

    <Grid Grid.Row="2" Grid.Column="0" />
    <Grid Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" />
</DockPanel>

当然，您也可以将菜单区域设置为网格的一部分并将其设置为跨越所有行，但我个人喜欢将它们分开。

【讨论】：

【解决方案3】：

3 行网格（一个用于菜单）。由于行间距不均匀，因此主网格上只有一列。然后在网格中网格为两列间距。

【讨论】：