Wpf – Remove left border grid line for WPF DataGrid header columns to match data grid lines

wpfwpf-controlswpfdatagrid

The border styles for header cells and data cells in a WPF 4.0 DataGrid are inconsistent.. Header cells have a border that includes a left vertical border line and a right vertical border line around the header text. Data grid text column data lines are styled such that only the right side has a vertical border line. The following sample image illustrates this (note that the grid line color has been changed to #D0D0D0):

enter image description here

Here is the same image zoomed in to show the inconsistency:

enter image description here

How do you change the grid headers (perhaps via a templates or styles) to remove the left border, so that the header vertical border lines line up with the data border lines?

Best Answer

To avoid this just add below property setting in DataGridColumnHeader style.

<Setter Property="BorderThickness" Value="1" />
<Setter Property="Margin" Value="-1,-1,0,0" />

The issue in this datagrid is the border drawing is happening inside header cell boundry on left side. This is causing the additional lining as shown in the picture above. If you also set datagrid's broderthickness then issue will appear on for top side of the cell also.

Hope this settings will solve problem when thickness is '1'. For other thicknesses you know now what you have to adjust :)

Related Topic