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

Question

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

顺便说一句，我的所有列都是 TemplateColumns，但我更喜欢一个解决方案，其中我不必为每个列设置样式，并且标题的一侧有一个空白。 也许类似于 ，但不幸的是，这样的东西并不存在。

Answer 1

这需要一些步骤。首先，我们需要关闭 DataGrid 中的网格线，以便我们可以获得“间隙单元格”。我们将把 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>