WPF网格布局与堆栈面板对比

Question

在WPF/Silverlight布局中，使用大量的行和列构成的网格(Grid)还是使用大量的堆栈(StackPanel)更好？

- Shane Blazek

Answer 1

如果您需要让东西在水平和垂直方向上对齐，则应使用网格(Grid)。如果这些东西不需要与其他任何东西对齐，则可以使用StackPanel创建一排或一列。

然而，不要限制自己只使用这两个选项。特别是要看看DockPanel。它比StackPanel更复杂，但其标记不像Grid那样混乱。以下是关于DockPanel的好文章：

在Silverlight 2中使用DockPanel

- Kyralessa

Answer 2

您使用的容器应基于内容，而不是其中一种方法是否比另一种更好。 如果您需要使水平和垂直方向上的内容对齐，您确实应该使用网格。 但除此之外，它真的取决于您打算显示的内容。

- Rich

Answer 3

我认为网格布局不是一个更好的选择。

例如，如果您想要在现有的网格布局文档中插入一行（在中间）

现有的行是1、2、3、4，那么要求是在1和2之间插入新行。

然后您必须将2、3、4更改为3、4、5（查找所有标记并更改...）

想象一下，如果一行有3-5列...重新排序所有数字是一项繁琐的工作！！！

- ariso

Answer 4

我认为网格布局是更好的选择。通常我会使用网格布局来设置整体布局，并在需要时使用一些堆栈面板来完成一些特定的任务。我也有一种感觉，使用网格布局可以获得更好的性能和更多的灵活性。

- texmex5

Answer 5

我更喜欢使用StackPanel，因为我发现在插入新元素、行或列时更容易进行更改。使用网格时，需要阅读行号和列号才能确定位置。使用StackPanel只需按照嵌套即可，这比网格更易用且更整洁。

例如，在XAML页面中，我使用水平StackPanel作为父网格，然后如果我需要一个列，则嵌套具有单独“垂直”StackPanel。这样，水平StackPanel就变成了“网格”，而嵌套的垂直StackPanel就成为列。相比在网格中使用行和列，我发现这种方式更易于阅读和修改。

- SonicVader

Answer 6

两者都有优势（Grid/Stackpanel）。 Grid 的问题在于线条重构。 Stackpanel 的问题在于没有表格结构（固定列宽）。 因此，我认为这是解决这些问题的好方法 :-)

定义样式

<Page.Resources>
    <Style x:Key="LabelCol1" TargetType="Label">
        <Setter Property="Width" Value="200" />
    </Style>
    <Style x:Key="EditCol2" TargetType="TextBox">
        <Setter Property="Width" Value="250" />
        <Setter Property="TextWrapping" Value="Wrap" />
        <Setter Property="Margin" Value="3" />
    </Style>
    <Style x:Key="ButtonCol3" TargetType="Button">
        <Setter Property="Width" Value="120" />
        <Setter Property="Margin" Value="3" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="HorizontalContentAlignment" Value="Center" />
    </Style>
</Page.Resources>

将样式应用到 Stackpanel 中

<StackPanel>
    <StackPanel Orientation="Horizontal">
        <Label Style="{StaticResource LabelCol1}" Content="Solution path"  />
        <TextBox Style="{StaticResource EditCol2}" />
        <Button Style="{StaticResource ButtonCol3}" Content="Open..." />
    </StackPanel>
    <StackPanel Orientation="Horizontal">
        <Label Style="{StaticResource LabelCol1}" Content="Solution name"  />
        <TextBox Style="{StaticResource EditCol2}" />
    </StackPanel>
</StackPanel>

- Franz

Answer 7

我对这种布局没有经验，但我敢打赌，相比于大量嵌套的StackPanels，网格更容易呈现。

- ChaosSpeeder