Question

How would I set a custom grid line style on just one column of a DataGrid? In particular, I’d like one column to have a double line as its left border.

Example:

| Col1 | Col2 || Col3 (w/ Double Left Border) |

Thank you,
Ben

Answer 1

It depends on where you want this double line. The vertical GridLines is drawn in OnRender for DataGridCell and the horizontal GridLines is drawn in OnRender for DataGridCellsPresenter. The border for the DataGridColumnHeader is more complicated however. It’s a Rectangle that’s drawn in the RenderTheme method in DataGridHeaderBorder and I don’t think that there is a direct way to change its width without re-templating the entire DataGridColumnHeader. Also, the border thickness for the Headers are twice as thick as the Cells in the DataGrid to begin with (1px vs 2px), because the Headers draw their Separators on both sides.

So, to get double line thickness which just affects the Cells you can add a special DataGridCell style where you want this to apply. All this cellstyle does is to draw a 1px border to the left in the same colour as the GridLines. It’ll look something like this

<DataGrid ...
          HorizontalGridLinesBrush="Black">
    <DataGrid.Resources>
        <Style x:Key="DoubleLeftBorderCell" TargetType="DataGridCell">
            <Setter Property="BorderThickness" Value="1,0,0,0"/>
            <Setter Property="BorderBrush" Value="{Binding ElementName=dataGrid, Path=HorizontalGridLinesBrush}"/>
        </Style>
    </DataGrid.Resources>
    <DataGrid.Columns>
        <DataGridTextColumn Header="Double left Border"
                            CellStyle="{StaticResource DoubleLeftBorderCell}"
                            Binding="{Binding TextProperty}"/>
    </DataGrid.Columns>
</DataGrid>

There is no mouseover effect or anything on the cells to worry about. If you do something similar for a DataGridColumnHeader however, you’ll lose the sorting arrows, mouseover effect, mousedown effect etc. so a you’ll have to create an entire template for it