WPF ListView列标题在侧面显示白线

Question

I'm trying to set a style for my ListView header, and I have a problem: There are some white lines on the sides of the columns and I dont know how to remove them. Image showing the problem.

This is the XAML from my style:

   <Style x:Key="ColumnHeader" TargetType="{x:Type GridViewColumnHeader}">
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="Height"  Value="45"  />
        <Setter Property="Background">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FF1B405D" Offset="1"/>
                    <GradientStop Color="#FF2F7CA8" Offset="0"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="BorderBrush" Value="Black"/>
        <Setter Property="Margin" Value="0,0,3,0"/>
    </Style>

And this is the code from my listview:

<ListView Height="520" Margin="0,130,10,0" FontSize="28" 
          FontFamily="/WpfApplication2;component/Resources/#Purista SemiBold" 
          Background="{x:Null}" BorderBrush="{x:Null}" 
          SelectionChanged="ListView_SelectionChanged">
     <ListView.View>
          <GridView ColumnHeaderContainerStyle="{StaticResource ColumnHeader}" AllowsColumnReorder="False" >
               <GridViewColumn Header=" Name" Width="500"/>
               <GridViewColumn Header=" ID" Width="100"/>
               <GridViewColumn Header=" Mode" Width="150"/>
               <GridViewColumn Header=" Version" Width="150"/>
         </GridView>
    </ListView.View>
</ListView>

How can I remove the white lines? I already tried to remove the border by setting the thickness to 0, but the white line is still here.

Answer 1

In your GridViewColumnHeaderStyle change the margin setter to

                <Setter Property="Margin" Value="0,0,0,0"/>

Add the following code to your GridViewColumnHeaderStyle

                <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
                        <Grid SnapsToDevicePixels="true">
                            <Border x:Name="HeaderBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,1,0,1" Background="{TemplateBinding Background}">
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition MaxHeight="7"/>
                                        <RowDefinition/>
                                    </Grid.RowDefinitions>
                                    <Rectangle x:Name="UpperHighlight" Fill="#FFE3F7FF" Visibility="Collapsed"/>
                                    <Border Padding="{TemplateBinding Padding}" Grid.RowSpan="2">
                                        <ContentPresenter x:Name="HeaderContent" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="0,0,0,1" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                    </Border>
                                </Grid>
                            </Border>
                            <Border x:Name="HeaderHoverBorder" BorderThickness="1,0,1,1" Margin="1,1,0,0"/>
                            <Border x:Name="HeaderPressBorder" BorderThickness="1,1,1,0" Margin="1,0,0,1"/>
                            <Canvas>
                                <Thumb x:Name="PART_HeaderGripper" Style="{StaticResource GridViewColumnHeaderGripper}"/>
                            </Canvas>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="Background" TargetName="HeaderBorder" Value="{StaticResource GridViewColumnHeaderHoverBackground}"/>
                                <Setter Property="BorderBrush" TargetName="HeaderHoverBorder" Value="#FF88CBEB"/>
                                <Setter Property="Visibility" TargetName="UpperHighlight" Value="Visible"/>
                                <Setter Property="Background" TargetName="PART_HeaderGripper" Value="Transparent"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="true">
                                <Setter Property="Background" TargetName="HeaderBorder" Value="{StaticResource GridViewColumnHeaderPressBackground}"/>
                                <Setter Property="BorderBrush" TargetName="HeaderHoverBorder" Value="#FF95DAF9"/>
                                <Setter Property="BorderBrush" TargetName="HeaderPressBorder" Value="#FF7A9EB1"/>
                                <Setter Property="Visibility" TargetName="UpperHighlight" Value="Visible"/>
                                <Setter Property="Fill" TargetName="UpperHighlight" Value="#FFBCE4F9"/>
                                <Setter Property="Visibility" TargetName="PART_HeaderGripper" Value="Hidden"/>
                                <Setter Property="Margin" TargetName="HeaderContent" Value="1,1,0,0"/>
                            </Trigger>
                            <Trigger Property="Height" Value="Auto">
                                <Setter Property="MinHeight" Value="20"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>

This overrides the template (got this template from Blend).

Above your style in your Resources, place the following code

        <LinearGradientBrush x:Key="GridViewColumnHeaderBackground" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#FFFFFFFF" Offset="0"/>
            <GradientStop Color="#FFFFFFFF" Offset="0.4091"/>
            <GradientStop Color="#FFF7F8F9" Offset="1"/>
        </LinearGradientBrush>

        <!--<LinearGradientBrush x:Key="GridViewColumnHeaderBorderBackground" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#FFF2F2F2" Offset="0"/>
            <GradientStop Color="#FFD5D5D5" Offset="1"/>
        </LinearGradientBrush>-->

        <SolidColorBrush x:Key="GridViewColumnHeaderBorderBackground" Color="Transparent"></SolidColorBrush>

        <LinearGradientBrush x:Key="GridViewColumnHeaderHoverBackground" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#FFBDEDFF" Offset="0"/>
            <GradientStop Color="#FFB7E7FB" Offset="1"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="GridViewColumnHeaderPressBackground" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#FF8DD6F7" Offset="0"/>
            <GradientStop Color="#FF8AD1F5" Offset="1"/>
        </LinearGradientBrush>
        <Style x:Key="GridViewColumnHeaderGripper" TargetType="{x:Type Thumb}">
            <Setter Property="Canvas.Right" Value="-9"/>
            <Setter Property="Width" Value="18"/>
            <Setter Property="Height" Value="{Binding ActualHeight, RelativeSource={RelativeSource TemplatedParent}}"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="Background" Value="{StaticResource GridViewColumnHeaderBorderBackground}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Thumb}">
                        <Border Background="Transparent" Padding="{TemplateBinding Padding}">
                            <Rectangle Fill="{TemplateBinding Background}" HorizontalAlignment="Center" Width="1"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

These are the styles and resources referenced in the preceding template. Notice the commented out GridViewColumnHeaderBorderBackground is replaced with a SolidColorBrush with the Color set to Transparent. This will make the white line go away completely. Change that brush resource to make it whichever color you wish.

Answer 2

The area causing you trouble is the "gripper" areas that would allow users to resize the columns.

If you don't need to be able to resize the columns, you could override the template for the GridViewColumnHeader to remove them. The simplest version I could come up with is as follows:

    <LinearGradientBrush x:Key="HeaderGradientBrush" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF1B405D" Offset="1"/>
        <GradientStop Color="#FF2F7CA8" Offset="0"/>
    </LinearGradientBrush>

    <Style x:Key="ColumnHeader" TargetType="GridViewColumnHeader">
        <Setter Property="HorizontalContentAlignment" Value="Left" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Foreground" Value="White" />
        <Setter Property="Background" Value="{StaticResource HeaderGradientBrush}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="GridViewColumnHeader">
                    <Grid>
                        <Border x:Name="HeaderBorder" Background="{StaticResource HeaderGradientBrush}">
                            <ContentPresenter x:Name="HeaderContent"
                          RecognizesAccessKey="True"
                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>