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

Question

我正在尝试为我的 ListView 标头设置样式，但我遇到了一个问题： 柱子的侧面有一些白线，我不知道如何删除它们。 Image showing the problem.

这是我风格的 XAML：

   <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>

这是我的列表视图中的代码：

<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>

如何去除白线？我已经尝试通过将粗细设置为 0 来去除边框，但是白线还在。

Answer 1

在您的 GridViewColumnHeaderStyle 中将边距设置器更改为

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

将以下代码添加到您的 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>

这会覆盖模板（从 Blend 获得此模板）。

在资源中的样式上方，放置以下代码

        <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>

这些是前面模板中引用的样式和资源。请注意，注释掉的 GridViewColumnHeaderBorderBackground 被替换为颜色设置为透明的 SolidColorBrush。这将使白线完全消失。更改该笔刷资源以使其成为您想要的任何颜色。

Answer 2

给您带来麻烦的区域是允许用户调整列大小的“夹子”区域。

如果您不需要能够调整列的大小，您可以覆盖 GridViewColumnHeader 的模板来移除它们。我能想到的最简单的版本如下：

    <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>