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

时间:2010-03-28 11:50:16

标签: c# wpf grid

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

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

在此图像中,最左边的面板(由灰色条分隔的面板)是我想要的。中间面板显示一个网格,其中蓝线与功能区域重叠。最右边的面板显示了如何使用嵌套网格来完成它。您可以看到绿色网格有一个水平分割。底部单元格是黄色网格,垂直分割。在左侧,单元格是红色网格,再次是水平分割。 Grids 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”解决方案看起来会好很多。

4 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:2)

我建议创建一个分为功能区域的主网格,然后在这些区域中创建单独的网格/堆叠面板/等。 您可能不知道每个功能区域的要求,因此您可以自由排列它们的元素并在布局之间切换。当您将所有内容放在一个带有span列和/或行的网格中时 - 您将获得“难以管理”的布局。

答案 2 :(得分:1)

我担心我无法将您的解决方案与不同网格和子网格中的颜色区分开来。

我可以建议为每个功能区域创建一个UserControl,然后有一个网格来安排这些区域。

然后,每个UserControl都可以自由创建自己的布局(使用另一个网格,或更简单的StackPanel,或其他),并负责在自己的区域中显示数据子集/处理用户事件。

然后,外部网格是涉及多个区域的事物的仲裁者(例如,区域之间的事件转发)。

答案 3 :(得分:1)

坦率地说,我会选择一个dockpanel或类似的顶级组合,以及低级别的网格