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.

I think an image that shows what you ask for will help – Erez Dec 15 '10 at 20:51 — Erez, Dec 15 '10 at 20:51

Fredrik Hedblad · Accepted Answer · 2010-12-16T13:35:29.090

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}"/>

alt text

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>

Well, a little bit sad that it is this complicated, but ok. Thanks — Tokk, Dec 16 '10 at 13:18
@Tokk: Yes, it's a little bit complicated. The Styles that are in DataGrid.Resources can go anywhere, a ResourceDictionary for example. There you could also create the Style for the DataGrid and then all you have to do to get a Gap column is to add a — Fredrik Hedblad, Dec 16 '10 at 13:26
So finaly I created a DataGridGapColumn, derived from DataGridColumn, made your suggestions a standard style for it. This makes it a bit more easy. — Tokk, Dec 16 '10 at 14:16
@Tokk: Right, subclassing was one thing I didn't consider :) Good thinking — Fredrik Hedblad, Dec 16 '10 at 14:18

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

1 Answers1

Linked