Special Gridline Style for Single Column

Question

How would I set my own grid line style to only one DataGrid column? In particular, I would like one column to have a double line as the left border.

Example:

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

Thanks,
Ben

Answer 1

It depends on where you want this double line. Vertical GridLines are drawn in OnRender for DataGridCell , and horizontal GridLines are drawn in OnRender for DataGridCellsPresenter . However, the border for the DataGridColumnHeader more complicated. This is the rectangle that is drawn in the RenderTheme method of the DataGridHeaderBorder , and I don't think there is a direct way to change its width without changing the template of the entire DataGridColumnHeader . In addition, the border thickness for the headers is twice as large as the cells in the DataGrid , starting with (1px versus 2px), because the headers draw their separators on both sides.

So, to get the thickness of the double line, which affects only the cells, you can add a special DataGridCell style where you want it to be applicable. All these cell styles are to draw a 1px border on the left in the same color as the GridLines. It will 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 mouse effect in the cells or anything to worry about. If you do something similar for the DataGridColumnHeader , however, you lose the sort arrows, mouse effect, mousedown effect, etc., so you have to create the whole template for it

Answer 2

Here is what I ended up doing:

 <DataGridTextColumn Header="Header Name"> <DataGridTextColumn.CellStyle> <Style TargetType="{x:Type DataGridCell}"> <Setter Property="Margin" Value="1 0 0 0" /> <Setter Property="BorderThickness" Value="1 0 0 0" /> <Setter Property="BorderBrush" Value="{Binding RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}, Path=HorizontalGridLinesBrush}" /> </Style> </DataGridTextColumn.CellStyle> </DataGridTextColumn> 

This is based on Meleak's answer, but with the addition of a field (to create a double line effect) and the use of RelativeSource for the border brush, which eliminates the need for a DataGrid to have x: Name.