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

【问题标题】：How to create a gap between the columns of a WPFToolkit DataGrid如何在 WPFToolkit DataGrid 的列之间创建间隙
【发布时间】：2010-12-08 15:23:05
【问题描述】：

我有一个 WPF 数据网格（来自 WPF 工具包，如标题所示），我想要一些列之间的间隙，其中甚至没有标题，您可以看到它们之间的背景。我不知道如何管理这个。

顺便说一句，我的所有列都是 TemplateColumns，但我更喜欢这样的解决方案，我不必为每一列设置样式，并且它的标题在一侧有一个噱头。也许像<DataGridGapColum Width="5" /> 这样的东西，但不幸的是，这样的东西并不存在。

【问题讨论】：

我认为显示您要求的图像会有所帮助

标签： .net wpf datagrid wpftoolkit wpfdatagrid

【解决方案1】：

这需要一些步骤。首先，我们需要关闭 DataGrid 中的 GridLines，这样我们才能获得“Gap Cells”。我们将把 GridLines 留给 DataGridCells。我们还必须指定一个 GridLinesBrush。我们无法为 DataGridColumn 创建“DataGridGapColumn”样式，因为它不是从 FrameworkElement 派生的，因此我们必须满足 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>

【讨论】：

嗯，有点难过，它是如此复杂，但还好。谢谢
@Tokk：是的，这有点复杂。 DataGrid.Resources 中的样式可以去任何地方，例如 ResourceDictionary。在那里您还可以为 DataGrid 创建样式，然后获得 Gap 列所需要做的就是添加
所以最后我创建了一个从 DataGridColumn 派生的 DataGridGapColumn，让您的建议成为它的标准样式。这使它更容易一些。
@Tokk：是的，子类化是我没有考虑过的一件事 :) 很好的想法