Getting rid of the white line at the end of GridViewColumnHeader in xaml

Question

I've had several problems with the GridViewColumnHeaders so far. Originally I had a issue with there being a tiny sliver of white between each of the column headers. Even if we set the borderthickness to 0, the white lines would still exist. After looking around, I found that I had to use a ControlTemplate to change the header to default to having textbox attributes. I used this code:

<Style x:Key="gridHeaderStyle" TargetType="{x:Type GridViewColumnHeader}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
                        <TextBox Text="{TemplateBinding Content}" 
                                 FontWeight="Bold"
                                 FontFamily="Arial"
                                 FontSize="11"
                                 Foreground="#00648D"
                                 Padding="5,0,5,0" 
                                 BorderBrush="#7EB0CC" 
                                 BorderThickness="0,0,2,2"
                                 HorizontalContentAlignment="Center"
                                 VerticalContentAlignment="Center"
                                 IsReadOnly="True"
                                 Background="Transparent"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

This worked and removed the little sliver of white between the header columns and it also prevented the user from moving and resizing the column which messed up the formatting so that was good. However there is still a little sliver of white at the very end of the gridviewcolumnheader as shown in the image below:

enter image description here

Is there a way to remove that too?

I would suggest using a tool like `Snoop` to see what is causing the whitespace. Snoop can be downloaded from http://snoopwpf.codeplex.com/ — Rachel, Dec 16 '11 at 20:23
Neat tool but it didn't really help me figure why the line is still there. Anyone else who can help? — Jay, Dec 19 '11 at 20:16

score 2 · Accepted Answer · answered Jan 03 '12 at 15:44

2

That whitespace is the object you grab and resize the Header with. I believe it exists even if you re-write the header template because it is part of the GridView template, not the header column

I'm not sure if there's a way to overwrite those colors without overwriting the entire GridView template, however you can navigate the Visual Tree once it's loaded and manually set the background color from there.

Here's an example using the Loaded event of the ListView and some Visual Tree Helpers

private void ListView_Loaded(object sender, RoutedEventArgs e)
{
    var thumb = VisualTreeHelpers.FindChild<Thumb>((DependencyObject)sender, "PART_HeaderGripper");
    if (thumb == null) return;
    thumb.Background = Brushes.Transparent;

    var thumbContent = VisualTreeHelpers.FindChild<Border>(thumb);
    if (thumbContent == null) return;
    thumbContent.Background = Brushes.Transparent;
}

Result

Example

If you would rather to overwrite the ListView's ControlTemplate, you can find the default XAML here

answered Jan 03 '12 at 15:44

Rachel

130,264
66
304
490

Can you show me an example of how I would overwrite the ListView's ControlTemplate for just the HeaderGripperThumb. – Jay Jan 03 '12 at 21:44
@Jay You would have to copy the existing template, then just edit the Thumb. You can copy it by either going to the link at the bottom of my answer, or if you have Expression Blend you can right-click on your ListView and select the option to edit a copy of the template, in which case it will copy the existing template into your Resources so you can edit it. – Rachel Jan 04 '12 at 03:07
I understand about copying the whole template and editing just the thumb section. What I'm slightly confused about is where the new template go and how I reference it. – Jay Jan 04 '12 at 16:05
@Jay Usually it goes in your `Resources` somewhere. A simple way would be to include the template in `` and give it a `x:Key` attribute, then binding your ListView's Template using the Key you specified: `` – Rachel Jan 04 '12 at 16:06
How do I incorporate it all together since it consists of several styles. I put it all inside of a but that doesn't work. What do I put it all inside of. – Jay Jan 04 '12 at 17:46
@Jay Put it all inside of `` and only bind the ListView's Template property – Rachel Jan 04 '12 at 18:07
Yes it worked. I actually didn't need to give it a x:Key attribute at all since: – Jay Jan 04 '12 at 19:06

Getting rid of the white line at the end of GridViewColumnHeader in xaml

1 Answers1