WPF：如何使用 CellSpacing 实现自定义网格？答案

【问题标题】：WPF: How to implement custom Grid with CellSpacing?WPF：如何使用 CellSpacing 实现自定义网格？
【发布时间】：2011-08-13 19:32:16
【问题描述】：

我想念 WPF 中的 HTML 单元格间距。我试图通过从 Grid 覆盖自定义 Grid 类，然后修改 MeasureOverride 和 ArrangeOverride 来实现我想要的行为，从而在 WPF 的 Grid 中实现类似的东西。也就是说，网格中的每个单元格之间应该有一个固定的间距（不是填充）。这怎么可能？

【问题讨论】：

标签： wpf cellspacing

【解决方案1】：

我发现了这篇关于创建处理单元格间距的自定义网格面板的博文：http://daniel-albuschat.blogspot.dk/2011/07/gridlayout-for-wpf-escape-margin-hell.html

【讨论】：

【解决方案2】：

您可能会编写自己的panel，或者甚至是 Grid 的后代，使用单元格间距进行您自己的布局。这将是一项相当大的工作。

这是我通常做的事情，以实现相同的目标。假设我想要一个 3 像素的单元格间距。您可以通过对每个单元格应用 1.5 像素边距来实现这一点（因此单元格与其邻居之间的总空间为 1.5 + 1.5 = 3 像素），然后在整个 Grid 周围再增加 1.5 像素边距，因此外边距是正确的（单元格周围 1.5 像素边距 + 网格周围 1.5 边距 = 3 像素）。 XAML 如下所示：

<Grid Margin="1.5">
    ...
    <Label Grid.Row="0" Grid.Column="0" Margin="1.5">...</Label>
    <TextBox Grid.Row="0" Grid.Column="1" Margin="1.5">...</TextBox>
    ...
</Grid>

虽然很丑，但是很管用。

如果您的 Grid 中的大多数控件属于同一类型（例如，如果都是标签，或者都是标签和文本框），那么您可以使用样式，而不是在每个元素上声明和重新声明 Margin网格：

<Grid Margin="1.5">
    <Grid.Resources>
        <Style TargetType="Label">
            <Setter Property="Margin" Value="1.5"/>
        </Style>
        <Style TargetType="TextBox">
            <Setter Property="Margin" Value="1.5"/>
        </Style>
    </Grid.Resources>
    ...
    <Label Grid.Row="0" Grid.Column="0">...</Label>
    <TextBox Grid.Row="0" Grid.Column="1">...</TextBox>
    ...
</Grid>

实际上，我在实践中发现我经常需要不均匀的边距 - 例如，我可能希望在顶部、左侧和右侧有 3 像素的边距，但在底部没有边距（因为下面的控件它已经有自己的利润）。所以我通常不会全部使用 1.5 像素；我通常会得到更复杂的东西。所以我可以明白为什么他们没有添加 CellSpacing；它会使简单的情况变得更简单，但在更复杂的布局中将毫无用处。

但 half-margins-all-around 是实现 CellSpacing 的一种快速方法，然后如果您需要更高级的东西，您可以调整边距。

【讨论】：

谢谢，这至少是比 Margin=0,0,3,3 等更好的解决方案。但我仍在寻求更通用的方法。

【解决方案3】：

您可能对我的回答感兴趣，支持自定义网格中每个子项的统一边框和单元格间距：

How could I put a border on my grid control in WPF?

【讨论】：

【解决方案4】：

您正在寻找 Margin 属性。您可以设置 DataGridCell 类的样式。

<Style TargetType="{x:Type toolkit:DataGridCell}">
        <Setter Property="Margin" Value="3" />
    </Style>

【讨论】：

我使用的不是DataGrid，而是Grid-layoutpanel。
抱歉，但是您也可以使用样式在列/行上设置边距。
不，ColumnDefinition 没有边距。而且我不会在每个子元素上使用边距。我想要一个通用的解决方案，这就是为什么我要覆盖 Measure and Arrange。