65.9K
CodeProject 正在变化。 阅读更多。
Home

重塑 WPF ListView 页眉。

starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.14/5 (6投票s)

2009年6月17日

CPOL

2分钟阅读

viewsIcon

84172

重塑 WPF ListView 页眉。

最近,我一直在使用 Infragistics 的 Net Advantage for WPF,但今天,我们实际上并不需要 DataGrid 的全部功能,而需要一个更轻量级的组件(基本上就是简单的排序列表,不需要分页、分组……只需要一个列表),所以我又回过头来关注内置的 WPF 控件(WPF DatagridWPF 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 的关键。基本上,我建议你始终参考现有的控件模板(默认外观和感觉,基本上),你可以在 这里 找到它们,并且只设置/模板化你需要更改的部分。

无论如何,上述代码的结果给了我想要的东西,一个自定义的标题区域

37316/lv-thumb.jpg

这里有一个小型的演示项目。

© . All rights reserved.