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

Question

我有一个WPF数据网格(从标题指示的WPF工具包),我想要一些列之间的差距,甚至没有标题在上面,你可以看到之间的背景.我不知道如何管理这个.

顺便说一句,我的所有列都是TemplateColumns,但我更喜欢一个解决方案,我不需要为每一列设置样式,而且它的标题在一侧有一个gab.也许是类似的东西<DataGridGapColum Width="5" />,不幸的是,这样的事情并不存在.

Answer 1

这将需要一些步骤.首先,我们需要关闭DataGrid中的GridLines,以便我们可以获得"Gap Cells".我们将把GridLines留给DataGridCells.我们还必须指定GridLinesBrush.我们无法为DataGridColumn创建"DataGridGapColumn"样式,因为它不是派生自FrameworkElement,因此我们必须满足GapCellStyle和GapHeaderStyle.然后我们可以像这样创建一个"DataGridGapColumn"

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

一些Columns和Gap列的示例

<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>