DataGridColumnHeader Style

Question

<Style TargetType="DataGridColumnHeader">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
                <Border x:Name="buttonBorderOuter"
                        BorderBrush="#DBDBDB"
                        BorderThickness="1"
                        Background="#00ECECEC"
                        Padding="2">
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                    <Border.Triggers>
                        <EventTrigger RoutedEvent="MouseEnter">
                            <BeginStoryboard>
                                <Storyboard>
                                    ...
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="MouseLeave">
                            <BeginStoryboard>
                                <Storyboard>
                                    ...
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </Border.Triggers>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The above code shows my Style for the DataGridColumnHeader. It's working fine with the MouseEnter and MouseLeave effect but there are some small things I don't like. There is what I have right now below here.

The problem here is that each Cell in the Header has the rounded border. I want that between 2 Cells in the Header is 1 single straight line. Also, when I click on one of the Cells in the Header, there is no arrow showing for the sorting and also no highlight that it is that column that's sorted.

Does somebody has a template I could edit myself to achieve what I want? Or what are the parts I have to edit?

Answer 1

By default the DataGridColumnHeadersPresenter draws an additional column Header of the full width in the Background of the DataGrid Header. By just leaving out the dummy Header you get what you want. Add that style to your styles:

    <Style TargetType="{x:Type DataGridColumnHeadersPresenter}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type DataGridColumnHeadersPresenter}">
                    <Grid>
                        <ItemsPresenter />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>