如何在WPFToolkit DataGrid中创建列之间的间隙

Question

我有一个WPF数据网格（来自WPF工具包，正如标题所示），我想在某些列之间留下间隙，即使没有标题也可以看到它们之间的背景。我不知道如何处理这个问题。

顺便说一下，我的所有列都是TemplateColumns，但我希望有一个解决方案，我不必为每一列和它的标题设置样式，只需在一侧设置间隙。可能像<DataGridGapColum Width="5" />这样的东西，但很遗憾这样的东西并不存在。

- Tokk

---

我认为一张展示你所要求的内容的图片会很有帮助。 - Erez

Answer 1

这需要一些步骤。首先，我们需要关闭DataGrid中的GridLines，以便获取“间隙单元格”。我们将GridLines保留给DataGridCells。我们还必须指定GridLinesBrush。由于DataGridColumn没有继承自FrameworkElement，因此我们无法为其创建“DataGridGapColumn”样式，因此我们只能使用GapCellStyle和GapHeaderStyle。然后，我们可以像这样创建“DataGridGapColumn”：

<DataGridTextColumn Width="100"
                    CellStyle="{StaticResource DataGridGapCell}"
                    HeaderStyle="{StaticResource DataGridGapHeader}"/>

带有一些列和间隔列的示例

<DataGrid x:Name="dataGrid"
          GridLinesVisibility="None"
          HorizontalGridLinesBrush="Black"
          ...>
    <DataGrid.Resources>
        <!-- Regular Cell Style -->
        <Style TargetType="DataGridCell">
            <Setter Property="BorderThickness" Value="0,0,1,1"/>
            <Setter Property="BorderBrush" Value="{Binding ElementName=dataGrid, Path=HorizontalGridLinesBrush}"/>
        </Style>
        <!-- Gap Cell Style -->
        <Style x:Key="DataGridGapCell" TargetType="DataGridCell">
            <Setter Property="Background" Value="{Binding ElementName=dataGrid, Path=Background}"/>
            <Setter Property="BorderThickness" Value="0,0,1,0"/>
            <Setter Property="BorderBrush" Value="{Binding ElementName=dataGrid, Path=HorizontalGridLinesBrush}"/>
        </Style>
        <!-- Gap ColumnHeader Style -->
        <Style x:Key="DataGridGapHeader" TargetType="DataGridColumnHeader">
            <Setter Property="Background" Value="{Binding ElementName=dataGrid, Path=Background}"/>
        </Style>
    </DataGrid.Resources>
    <DataGrid.Columns>
        <DataGridTextColumn Header="Header 1" Binding="{Binding Header1}"/>
        <DataGridTextColumn Width="100" CellStyle="{StaticResource DataGridGapCell}" HeaderStyle="{StaticResource DataGridGapHeader}"/>
        <DataGridTextColumn Header="Header 2" Binding="{Binding Header2}"/>
        <DataGridTextColumn Header="Header 3" Binding="{Binding Header3}"/>
        <DataGridTextColumn Width="50" CellStyle="{StaticResource DataGridGapCell}" HeaderStyle="{StaticResource DataGridGapHeader}"/>
        <DataGridTextColumn Header="Header 4" Binding="{Binding Header4}"/>
        <DataGridTextColumn Header="Header 5" Binding="{Binding Header5}"/>
    </DataGrid.Columns>
</DataGrid>

更新
您可以将样式放在ResourceDictionary或Window.Resouces中。例如：

<Window.Resources>
    <Style x:Key="DataGridGapStyle" TargetType="DataGrid">
        <Setter Property="GridLinesVisibility" Value="None"/>
        <Setter Property="HorizontalGridLinesBrush" Value="Black"/>
    </Style>
    <!-- Regular Cell Style -->
    <Style TargetType="DataGridCell">
        <Setter Property="BorderThickness" Value="1,0,1,1"/>
        <Setter Property="BorderBrush" Value="{Binding ElementName=dataGrid, Path=HorizontalGridLinesBrush}"/>
    </Style>
    <!-- Gap Cell Style -->
    <Style x:Key="DataGridGapCell" TargetType="DataGridCell">
        <Setter Property="Background" Value="{Binding ElementName=dataGrid, Path=Background}"/>
        <Setter Property="BorderThickness" Value="0,0,0,0"/>
        <Setter Property="BorderBrush" Value="{Binding ElementName=dataGrid, Path=HorizontalGridLinesBrush}"/>
    </Style>
    <!-- Gap ColumnHeader Style -->
    <Style x:Key="DataGridGapHeader" TargetType="DataGridColumnHeader">
        <Setter Property="Background" Value="{Binding ElementName=dataGrid, Path=Background}"/>
    </Style>
</Window.Resources>
<Grid>
    <DataGrid x:Name="dataGrid"
              Style="{StaticResource DataGridGapStyle}"
              AutoGenerateColumns="False"
              ItemsSource="{Binding MyCollection}">
        <DataGrid.Columns>
            <DataGridTextColumn Header="Header 1" Binding="{Binding Header1}"/>
            <DataGridTextColumn Width="100" CellStyle="{StaticResource DataGridGapCell}" HeaderStyle="{StaticResource DataGridGapHeader}"/>
            <DataGridTextColumn Header="Header 2" Binding="{Binding Header2}"/>
        </DataGrid.Columns>
    </DataGrid>
</Grid>

- Fredrik Hedblad

---

有点难过，因为它这么复杂，但没关系。谢谢。 - Tokk

@Tokk：是的，这有点复杂。在DataGrid.Resources中的样式可以放在任何地方，例如ResourceDictionary。在那里，您还可以创建DataGrid的样式，然后要获取Gap列，您只需添加<DataGridTextColumn Width="50" CellStyle="{StaticResource DataGridGapCell}" HeaderStyle="{StaticResource DataGridGapHeader}"/>即可。 - Fredrik Hedblad

最终，我创建了一个DataGridGapColumn，它是从DataGridColumn派生而来的，并将您的建议作为其标准样式。这使得它更加容易使用。 - Tokk

@Tokk：没错，子类化是我没有考虑到的一件事情 :) 想得真好。 - Fredrik Hedblad