WPF 使用 HandyControl 给 ListView 添加漂亮的表头效果

本文将来安利大家一个很好用的 UI 控件库，著名的 HandyControl 库。在想要给 ListView 添加一个表头，同时想要这个 ListView 在没有美工小姐姐的帮助下也能看起来比较好看，此时就特别适合使用 HandyControl 库

大概做出来的效果如下

完成上面的效果很简单，让我一步步告诉大家如何做

第一步是通过 NuGet 安装 HandyControl 库，这是一个在 GitHub 完全开源的项目

Install-Package HandyControl 

如果是 SDK Style 格式的 csproj 项目文件，可以添加下面代码安装

  <ItemGroup>
    <PackageReference Include="HandyControl" Version="2.5.0.2" />
  </ItemGroup>

安装完成之后打开 App.xaml 文件添加引用

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/SkinDefault.xaml"/>
                <ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/Theme.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

添加了上面代码将会给全局添加足够的样式，因此很多控件的默认的样式也就被更改了，如本文的 ListView 控件

完成了第一步的安装库了，下一步就是创建虚拟的数据

我想要在界面显示一个 ListView 加上内容，此时我就需要一些虚拟的数据用来做界面显示。如果小伙伴有自己的数据，那么这一步也可以跳过

先创建一个用来测试的类，如下面代码的 Foo 类

    public class Foo
    {
        public int Index { get; set; }
        public string Name { get; set; }

        public string Remark { get; set; }
    }

接下来在 MainWindow 里面创建 ObservableCollection<Foo> 的一个属性

        public ObservableCollection<Foo> DataList { get; } = new ObservableCollection<Foo>();

注意访问权限哦，想要在界面绑定可需要使用 public 等关键词而不能使用 private 哦

接着添加测试使用的数据，下面代码放在 MainWindow 的构造函数

        public MainWindow()
        {
            InitializeComponent();

            for (int i = 0; i < 10; i++)
            {
                DataList.Add(new Foo()
                {
                    Index = i,
                    Name = "lindexi",
                    Remark = "doubi"
                });
            }

        }

添加测试数据的最后一步是设置 DataContext 为 MainWindow 自身，因为咱没有创建一个 ViewModel 而是在 MainWindow 里面创建一个属性。设置 DataContext 为 MainWindow 将可以绑定 MainWindow 定义的属性

            DataContext = this;

最后一步就是界面啦

打开 MainWindow.xaml 文件，添加下面代码

        <ListView Margin="10,10,10,10" ItemsSource="{Binding DataList}">
            <ListView.View>
                <GridView>
                    <GridViewColumn Width="80" Header="Index" DisplayMemberBinding="{Binding Index}"/>
                    <GridViewColumn Width="100" Header="Name" DisplayMemberBinding="{Binding Name}"/>
                    <GridViewColumn Width="200" Header="Remark" DisplayMemberBinding="{Binding Remark}"/>
                </GridView>
            </ListView.View>
        </ListView>

此时可以尝试运行一下应用，如果和我写得一样，那么可以看到上图的界面

上面代码使用 GridView 和 GridViewColumn 的方式定义了 ListView 的表头

而 Header 里面的内容就是表头显示的文本，可以进行后台代码设置，也可以绑定等

而 DisplayMemberBinding 的值就是实际上期望绑定的元素的属性名

如果想要显示更复杂的内容，那么仅使用 DisplayMemberBinding 是不够的，这个属性仅可以设置文本，复杂的内容需要用到 CellTemplate 属性。这部分请看 WPF 控件【L】ListView(三) ListView+GridView+GridViewColumn+DisplayMemberBinding多列绑定数据的用法_xpj8888的博客-CSDN博客_wpf gridview

如果只是需要简单的定制，如修改颜色等，可以通过重写资源字典的方式更改

        <ListView Margin="10,10,10,10" ItemsSource="{Binding DataList}" Background="#565656">
            <ListView.Resources>
                <!-- 列表项颜色 -->
                <SolidColorBrush x:Key="RegionBrush" Color="#02A2A3"></SolidColorBrush>

                <!-- 列表文本颜色 -->
                <SolidColorBrush x:Key="PrimaryTextBrush" Color="White"></SolidColorBrush>

                <!-- 选中颜色 -->
                <SolidColorBrush x:Key="PrimaryBrush" Color="#A602A5"></SolidColorBrush>
            </ListView.Resources>
            <ListView.View >
                <GridView >
                    <GridViewColumn Width="80" Header="Index" DisplayMemberBinding="{Binding Index}" />
                    <GridViewColumn Width="100" Header="Name" DisplayMemberBinding="{Binding Name}"/>
                    <GridViewColumn Width="200" Header="Remark" DisplayMemberBinding="{Binding Remark}"/>
                </GridView>
            </ListView.View>
        </ListView>