WPF ListView 列标题在两侧显示白线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23809323/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
WPF ListView column header showing white lines on sides
提问by Killzoneone
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.
我正在尝试为我的 ListView 标题设置样式，但我遇到了一个问题：列的侧面有一些白线，我不知道如何删除它们。 显示问题的图像。
This is the XAML from my style:
这是我风格的 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>
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.
如何去除白线？我已经尝试通过将粗细设置为 0 来移除边框，但是白线仍然在这里。
回答by Kik
In your GridViewColumnHeaderStyle change the margin setter to
在您的 GridViewColumnHeaderStyle 中，将边距设置器更改为
<Setter Property="Margin" Value="0,0,0,0"/>
Add the following code to your GridViewColumnHeaderStyle
将以下代码添加到您的 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).
这将覆盖模板（从 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.
这些是前面模板中引用的样式和资源。请注意，注释掉的 GridViewColumnHeaderBorderBackground 被替换为 SolidColorBrush，并将 Color 设置为 Transparent。这将使白线完全消失。更改画笔资源以使其成为您想要的任何颜色。
回答by Richard J Foster
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:
如果您不需要能够调整列的大小，您可以覆盖 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>
