WPF用于UI布局,使用一个网格或嵌套网格更好

Question

我在WPF中创建UI,我有一堆功能区域,我使用Grid来组织它.

现在我想要的网格不一致,因为一些功能区域将跨越网格中的多个单元格.我想知道解决这个问题的最佳做法是什么.我应该创建一个网格,然后为每个功能区域设置它跨越多个单元格,或者我应该将其拆分为多个嵌套网格.

在此图像中,最左边的面板(由灰色条分隔的面板)是我想要的.中间面板显示一个网格,其中蓝线与功能区域重叠.最右边的面板显示了我如何使用嵌套网格来完成它.您可以看到绿色网格有一个水平分割.底部单元格是黄色网格,垂直分割.在左侧,单元格是红色网格,再次是水平分割. 网格http://www.freeimagehosting.net/uploads/08f2711bae.jpg

我只是想知道什么是最佳实践,中间或右侧面板.

更新:只是为了澄清,一个更"代码导向"的例子:

中间面板

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="25" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions> 

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Menu          Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" />
    <uc:Info       Grid.Row="1" Grid.Column="0" />
    <uc:Control    Grid.Row="2" Grid.Column="0" />
    <uc:Simulation Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" />
</Grid>

右侧小组:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="25" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Menu Grid.Row="0"/>

    <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Grid Grid.Column="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <uc:Info    Grid.Row="0" />
            <uc:Control Grid.Row="1" />
        </Grid>

        <uc:Simulation Grid.Column="1" />
    </Grid>
</Grid>

更新:我必须承认,既然我已经为这两种方法编写了代码,那么"span"解决方案看起来要好得多.

Answer 1

我个人会采用中间布局，使用具有列和行跨度的单个网格来构建 UI 的整体布局，然后在每个部分中放置一个面板以包含实际的控件（以及可能的进一步详细布局）。