重塑 WPF ListView 页眉。






4.14/5 (6投票s)
重塑 WPF ListView 页眉。
最近,我一直在使用 Infragistics 的 Net Advantage for WPF,但今天,我们实际上并不需要 DataGrid
的全部功能,而需要一个更轻量级的组件(基本上就是简单的排序列表,不需要分页、分组……只需要一个列表),所以我又回过头来关注内置的 WPF 控件(WPF Datagrid
在 WPF Toolkit 中以非正式发布的形式发布,如果你想要一个免费的 WPF 网格,可以使用它),我需要一个 ListView
。
我喜欢 ListView
,但一直有点难以将其外观调整成我想要的样子,其中一个我总是遇到问题的地方就是更改标题(显示列名的区域)。
我最初尝试使用 Blend,按照 这里 的说明进行操作,虽然非常准确,但结果是大约 300 行代码,其中大部分我都不想更改。基本上,我想要的就是在标题部分添加一个新的 颜色
。
如果你使用 Blend 并且对它生成的结果感到满意,那很好,我对此没有意见。我只是觉得手动编写的方法对 XAML 内容来说更简洁。你会在设计模式下使用 Expression Blend 并开始编辑控件模板时看到,你会得到创建控件所需的整个 XAML,但你可能只需要设置/模板化一个特定的控件。
为了重新设计 ListView
标题,我需要执行以下操作
1: <LinearGradientBrush x:Key="BlueRinseBrush"
2: EndPoint="0.5,1" StartPoint="0.5,0">
3: <GradientStop Color="#FF223B84" Offset="1"/>
4: <GradientStop Color="#FF57A0F4" Offset="0.5"/>
5: <GradientStop Color="#FF4B94EC" Offset="0.5"/>
6: </LinearGradientBrush>
7:
8:
9: <Style x:Key="GridViewColumnHeaderGripper"
10: TargetType="Thumb">
11: <Setter Property="Width" Value="18"/>
12: <Setter Property="Background" Value="White"/>
13: <Setter Property="Template">
14: <Setter.Value>
15: <ControlTemplate TargetType="{x:Type Thumb}">
16: <Border Padding="{TemplateBinding Padding}"
17: Background="Transparent">
18: <Rectangle HorizontalAlignment="Center"
19: Width="3"
20: Fill="{TemplateBinding Background}"/>
21: </Border>
22: </ControlTemplate>
23: </Setter.Value>
24: </Setter>
25: </Style>
26:
27: <Style x:Key="GridViewColumnHeaderStyle"
28: TargetType="GridViewColumnHeader">
29: <Setter Property="HorizontalContentAlignment"
30: Value="Center"/>
31: <Setter Property="VerticalContentAlignment"
32: Value="Center"/>
33: <Setter Property="Background"
34: Value="{StaticResource BlueRinseBrush}"/>
35: <Setter Property="Foreground"
36: Value="{DynamicResource
37: {x:Static SystemColors.ControlTextBrushKey}}"/>
38: <Setter Property="Template">
39: <Setter.Value>
40: <ControlTemplate
41: TargetType="GridViewColumnHeader">
42: <Grid>
43: <Border Name="HeaderBorder"
44: BorderThickness="0"
45: BorderBrush="{StaticResource BlueRinseBrush}"
46: Background="{StaticResource BlueRinseBrush}"
47: Padding="2,0,2,0">
48: <ContentPresenter Name="HeaderContent"
49: TextElement.Foreground="White"
50: Margin="0,0,0,1"
51: VerticalAlignment="{TemplateBinding
52: VerticalContentAlignment}"
53: HorizontalAlignment="{TemplateBinding
54: HorizontalContentAlignment}"
55: RecognizesAccessKey="True"
56: SnapsToDevicePixels=
57: "{TemplateBinding SnapsToDevicePixels}"/>
58: </Border>
59: <Thumb x:Name="PART_HeaderGripper"
60: HorizontalAlignment="Right"
61: Margin="0,0,-9,0"
62: Style="{StaticResource
63: GridViewColumnHeaderGripper}"/>
64: </Grid>
65: <ControlTemplate.Triggers>
66: <Trigger Property="IsMouseOver" Value="true">
67: <Setter TargetName="HeaderBorder"
68: Property="Background" Value="Yellow"/>
69: <Setter TargetName="HeaderContent"
70: Property="TextElement.Foreground"
71: Value="Black"/>
72: </Trigger>
73: </ControlTemplate.Triggers>
74: </ControlTemplate>
75: </Setter.Value>
76: </Setter>
77: </Style>
现在,这里重要的部分是我的方法……我相信这是成功使用 WPF 的关键。基本上,我建议你始终参考现有的控件模板(默认外观和感觉,基本上),你可以在 这里 找到它们,并且只设置/模板化你需要更改的部分。
无论如何,上述代码的结果给了我想要的东西,一个自定义的标题区域