How to create a gap between the columns of a WPFToolkit DataGrid

Question

I have a WPF Data Grid (From the WPF Toolkit as the title indicates) and I want a gap between some Columns, where not even a header is above and you can see the background between. I don't have any idea how to manage this.

By the way all my Columns are TemplateColumns, but I would prefer a Solution where I don't have to style every single column and it's header to have a gab on one side. Perhaps something like <DataGridGapColum Width="5" />, but something like this does not exist unfortunately.

Answer 1

This will require some steps. First we need to turn off the GridLines in the DataGrid so we can get "Gap Cells". We will leave the GridLines to the DataGridCells instead. We also have to specifiy a GridLinesBrush. We can't create a "DataGridGapColumn" Style for a DataGridColumn since it doesn't derive from FrameworkElement so we will have to settle for a GapCellStyle and a GapHeaderStyle. Then we can create a "DataGridGapColumn" like this

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

Example with some Columns and Gap columns

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

Update
You could put the Styles in a ResourceDictionary or in Window.Resouces. Example

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