Sunday, March 23, 2014

Unaligned Column Header with Data

I am very happy today that I solves a problem that I have been facing for a long time.
:->

When you have a custom control template, column headers will be shifted to the left unshowing the Select All button while the DataGrid cells manage to recognize the row header and shift correctly. Resulting in a column header that is not aligned with its corresponding cells.

CAUSE : some people would think it is the Visibility of the select all button but this is very untrue. The truth is that Width of this button is bound to an un-updated-properly property CellsPanelHorizontalOffset . Simply put , DataGrid fails to update this property accurately , ending up with value (most of the time) equals ZERO.

SOLUTION : bind the Select All button Width to RowHeaderActualWidth and enjoy the magic ;-)


3 comments:

Anonymous said...

Can you please give me a sample code to do this?

Unknown said...

Sorry, I just saw your comment.

When you define your SelectAll button in your DataGrid's template.

I am not able to put it here so I am going to add the script to the end of the post.

Anonymous said...

Hey,
I know that this is a old post but I found an easier solutions that worked for me.
Try to set the DataGrid.HeadersVisibility to "Column"
Like this:

(I can't type < or > in here)

DataGrid
DataGrid.Style
Style TargetType="DataGrid"
Setter Property="HeadersVisibility" Value="Column"
Style
DataGrid.Style
DataGrid