Offsetting the Column Headers leaves a space where the background shows through

Question

I have a data grid which uses several group styles. This works amazingly well except for one problem.

The column headers were offset from the data columns as i am using expanders and other item containers in the group style.

I solved this problem using the following code:

<!--  Extends the column header style to include a right click event handler and also to align the column headers with the data columns  -->
<DataGrid.ColumnHeaderStyle>
    <Style BasedOn="{StaticResource NormalDataGridColumnHeaderStyle}" TargetType="DataGridColumnHeader">

        <!--  Offset the column headers to match the column data  -->
        <Setter Property="RenderTransform">
            <Setter.Value>
                <TranslateTransform X="26" />
            </Setter.Value>
        </Setter>
    </Style>
</DataGrid.ColumnHeaderStyle>

This worked really well, however I know have a small but no less irritating problem whereby the column headers are offset leaving a small area in the header area on the extreme left where the background shows through

How can I extend the left most column header to cover this space?

In a similar vein when a scrollbar appears there is a similar gap abouve the scrollbar which i think could be a similar issue

maybe you could replace your `TranslateTransform` with a `ScaleTransform` depending your design — WiiMaxx, Oct 16 '15 at 12:44
I believe you asked a similar question http://stackoverflow.com/questions/29964257/column-headers-offset-from-data-in-wpf-datagrid/30173245#30173245 — Domysee, Oct 18 '15 at 13:10

Emmanuel DURIN · Answer 1 · 2015-10-24T17:31:21.477

The margin on the left is caused by the DataGridRowHeaderStyle

I set it in green to make it visible

<Style x:Key="DataGridRowHeaderStyle1" TargetType="{x:Type DataGridRowHeader}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type DataGridRowHeader}">
                <!-- I set Width to 50 to make border visible. Set Width="0" to make it disappear -->
                    <Border BorderThickness="1" BorderBrush="Green" Width="50" >

Here usage of DataGridRowHeaderStyle1 :

<DataGrid x:Name="datagridPersons"  
          RowHeaderStyle="{DynamicResource DataGridRowHeaderStyle1}" >

(Note : to make the DataGridRowHeaderStyle to be created : right Click on the datagrid/Edit additional templates/Edit DataGridRowHeaderStyle/Create a Copy)

To make the margin to disappear,

set the width to 0 as written in the XAML comments above and the margin disappear

When data is grouped some more margins reappear.

Looking in the visual tree with Visual Studio, you see that :

Here is the guilty !

(In order to see that, set a breakpoint in a graphical callback, watch this or a reference to the datagrid. Then click on the magnifier, in the debugger)

The only solution I found is to search for the guilty ItemsPresenter in the visual tree and set its margin to 0

The last problem is that the GroupItems are created dynamically with the item presenters.

So the margins need to be removed when the GroupItems are added. So I subscribed to the CollectionViewSource grouping events

viewSource.View.GroupDescriptions.CollectionChanged += View_CollectionChanged;


async void View_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
{
    // later ...
    await Task.Delay(100);
    RemoveMargins();
}
private void RemoveMargins()
{
    // For FindAllVisualDescendants() function, see my answer to that question : 
    // http://stackoverflow.com/questions/32736265/datagrid-templatecolumn-update-source-trigger-explicit-only-updates-first-row/32741477#32741477
    var allItemsPresenter = datagridPersons.FindAllVisualDescendants()
        .OfType<ItemsPresenter>()
        .Where(elt => elt.Name == "ItemsPresenter")
        .Where(elt => elt.Margin == new Thickness(5, 0, 0, 0));

    foreach (var itemsPresenter in allItemsPresenter)
    {
        itemsPresenter.Margin = new Thickness(0, 0, 0, 0);
    }
}

And I had to made it asynchronous.

This way, it works :

Here is full code :

http://1drv.ms/1VXx9qb

Best coding

Offsetting the Column Headers leaves a space where the background shows through

1 Answers1