Question

How can I hide the vertical lines between the columns in a WPF ListView header?

To illustrate: by default, it looks like the top picture; I want it to look like the bottom picture instead.

_{(source: excastle.com)}

Answer 1

Unfortunately, there’s no a easy property you can set and you’d have to restyle the GridViewColumnHeader. If you include the following in your application or window resources then it will accomplish what you want for the Aero theme:

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

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

<LinearGradientBrush x:Key="GridViewColumnHeaderHoverBackground"
                        StartPoint="0,0"
                        EndPoint="0,1">
    <LinearGradientBrush.GradientStops>
        <GradientStop Color="#FFBDEDFF"
                        Offset="0" />
        <GradientStop Color="#FFB7E7FB"
                        Offset="1" />
    </LinearGradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="GridViewColumnHeaderPressBackground"
                        StartPoint="0,0"
                        EndPoint="0,1">
    <LinearGradientBrush.GradientStops>
        <GradientStop Color="#FF8DD6F7"
                        Offset="0" />
        <GradientStop Color="#FF8AD1F5"
                        Offset="1" />
    </LinearGradientBrush.GradientStops>
</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 Path=ActualHeight,RelativeSource={RelativeSource TemplatedParent}}" />
    <Setter Property="Padding"
            Value="0" />
    <Setter Property="Background"
            Value="Transparent" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Thumb}">
                <Border Padding="{TemplateBinding Padding}"
                        Background="Transparent">
                    <Rectangle HorizontalAlignment="Center"
                                Width="1"
                                Fill="{TemplateBinding Background}" />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="{x:Type GridViewColumnHeader}"
        TargetType="{x:Type GridViewColumnHeader}">
    <Setter Property="HorizontalContentAlignment"
            Value="Center" />
    <Setter Property="VerticalContentAlignment"
            Value="Center" />
    <Setter Property="Background"
            Value="{StaticResource GridViewColumnHeaderBackground}" />
    <Setter Property="BorderBrush"
            Value="{StaticResource GridViewColumnHeaderBorderBackground}" />
    <Setter Property="BorderThickness"
            Value="0" />
    <Setter Property="Padding"
            Value="2,0,2,0" />
    <Setter Property="Foreground"
            Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
                <Grid SnapsToDevicePixels="true">
                    <Border Name="HeaderBorder"
                            BorderThickness="0,1,0,1"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            Background="{TemplateBinding Background}">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition MaxHeight="7" />
                                <RowDefinition />
                            </Grid.RowDefinitions>
                            <Rectangle Name="UpperHighlight"
                                        Visibility="Collapsed"
                                        Fill="#FFE3F7FF" />
                            <Border Grid.RowSpan="2"
                                    Padding="{TemplateBinding Padding}">
                                <ContentPresenter Name="HeaderContent"
                                                    Margin="0,0,0,1"
                                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                    RecognizesAccessKey="True"
                                                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                            </Border>
                        </Grid>
                    </Border>
                    <Border Name="HeaderHoverBorder"
                            BorderThickness="1,0,1,1"
                            Margin="1,1,0,0" />
                    <Border 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 TargetName="HeaderBorder"
                                Property="Background"
                                Value="{StaticResource GridViewColumnHeaderHoverBackground}" />
                        <Setter TargetName="HeaderHoverBorder"
                                Property="BorderBrush"
                                Value="#FF88CBEB" />
                        <Setter TargetName="UpperHighlight"
                                Property="Visibility"
                                Value="Visible" />
                        <Setter TargetName="PART_HeaderGripper"
                                Property="Background"
                                Value="Transparent" />
                    </Trigger>
                    <Trigger Property="IsPressed"
                                Value="true">
                        <Setter TargetName="HeaderBorder"
                                Property="Background"
                                Value="{StaticResource GridViewColumnHeaderPressBackground}" />
                        <Setter TargetName="HeaderHoverBorder"
                                Property="BorderBrush"
                                Value="#FF95DAF9" />
                        <Setter TargetName="HeaderPressBorder"
                                Property="BorderBrush"
                                Value="#FF7A9EB1" />
                        <Setter TargetName="UpperHighlight"
                                Property="Visibility"
                                Value="Visible" />
                        <Setter TargetName="UpperHighlight"
                                Property="Fill"
                                Value="#FFBCE4F9" />
                        <Setter TargetName="PART_HeaderGripper"
                                Property="Visibility"
                                Value="Hidden" />
                        <Setter TargetName="HeaderContent"
                                Property="Margin"
                                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>
    <Style.Triggers>
        <Trigger Property="Role"
                    Value="Floating">
            <Setter Property="Opacity"
                    Value="0.4082" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
                        <Canvas Name="PART_FloatingHeaderCanvas">
                            <Rectangle Opacity="0.4697"
                                        Fill="#FF000000"
                                        Width="{TemplateBinding ActualWidth}"
                                        Height="{TemplateBinding ActualHeight}" />
                        </Canvas>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Trigger>
        <Trigger Property="Role"
                    Value="Padding">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
                        <Border Name="HeaderBorder"
                                BorderThickness="0,1,0,1"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                Background="{TemplateBinding Background}" />
                        <ControlTemplate.Triggers>
                            <Trigger Property="Height"
                                        Value="Auto">
                                <Setter Property="MinHeight"
                                        Value="20" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Trigger>
    </Style.Triggers>
</Style>

The Style is copied from the default system Styles provided by Microsoft with a single line changed (the setting of the Background property in the GridViewColumnHeaderGripper Style).