WPF开发快速入门【5】DataGrid的使用

概述

DataGrid是最常用的一种列表数据展现控件，本文介绍DataGrid的一些常用操作，包括：展示、新增、删除、修改等。以下代码基于Stylet框架实现。

数据展示

DataGrid用于对象列表的展示，我们先定义一个对象DataRecord

    public class DataRecord
    {
        public bool IsChecked { get; set; }
        public DateTime Time { get; set; }
        public string Title { get; set; }
        public RecordType RecordType { get; set; }
        public string ImagePath => RecordType == RecordType.File ? "/Images/File.png" : "/Images/Folder.png";
        public double Size { get; set; }
        public bool IsTooLarger => Size > 100;
        public object Tag { get; set; }
        public override string ToString()
        {
            return Title;
        }
    }

后台我们要建两个对象，一个是DataRecord的列表，一个是被选中的DataRecord对象。

public class PageDataGridViewModel : Screen
    {
        protected override void OnInitialActivate()
        {
            base.OnInitialActivate();
            InitList();
        }

        public BindableCollection<DataRecord> DataRecordList { get; set; }
        public DataRecord SelectedDataRecord { get; set; }
    }

注意DataRecordList 的类型为BindableCollection<DataRecord> 而不是List<DataRecord>,BindableCollection类是Stylet框架自带的一个列表类型，当用户在操作该控件时，它会发NotifyOfPropertyChange事件给View端。

InitList代码如下：

      private void InitList()
        {
            DataRecordList = new BindableCollection<DataRecord>()
            {
                new DataRecord()
                {
                    Title="Hello",
                    Size=10,
                    RecordType= RecordType.Folder
                },
                new DataRecord()
                {
                    Title="World",
                    Size=100.122323232,
                    RecordType= RecordType.Folder
                },
                new DataRecord()
                {
                    Title="Hehe",
                    Size=200,
                    RecordType= RecordType.File,
                    IsChecked=true
                }
            };
        }

设计端代码如下：

               <DataGrid  AutoGenerateColumns="False"
                          ItemsSource="{Binding DataRecordList}"
                          SelectedItem="{Binding SelectedDataRecord}">
                    <DataGrid.Columns>
                        <DataGridTextColumn Width="150" Header="Reocrd Time" Binding="{Binding Time,StringFormat='yyyy-MM-dd HH:mm:ss'}" IsReadOnly="True"/>
                        <DataGridTextColumn Width="150" Header="Title" Binding="{Binding Title}"/>
                    </DataGrid.Columns>
                </DataGrid>

这样，一个简单的列表就完成了。

新增、删除、修改

        public void AddNew()
        {
            DataRecordList.Add(new DataRecord()
            {
                Time = DateTime.Now,
                Title="New Item",
            });
        }

        public void Remove()
        {
            DataRecordList.Remove(SelectedDataRecord);
        }       

        public void Update()
        {
            SelectedDataRecord.Title = "Updated";
            SelectedDataRecord.Time = DateTime.Now;
            DataRecordList.Refresh();
        }

当新增或删除数据时，前端会直接变化，如果是修改数据，需要人为调用BindableCollection类的Refresh()方法。

一些常用操作

1、通过数据控制字段显示样式

                        <DataGridTextColumn Width="80" Header="Size" Binding="{Binding Size,StringFormat='0.00'}">
                            <DataGridTextColumn.CellStyle>
                                <Style  TargetType="{x:Type DataGridCell}" BasedOn="{StaticResource MahApps.Styles.DataGridCell}">
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding IsTooLarger}" Value="True">
                                            <Setter Property="Foreground" Value="Red" />
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </DataGridTextColumn.CellStyle>
                        </DataGridTextColumn>

2、通过数据模板显示图片

                        <DataGridTemplateColumn Width="30">
                            <DataGridTemplateColumn.CellTemplate>
                                <DataTemplate>
                                    <Image Source="{Binding ImagePath}" Width="25" Height="25" Margin="2"/>
                                </DataTemplate>
                            </DataGridTemplateColumn.CellTemplate>
                        </DataGridTemplateColumn>

3、通过数据模板显示CheckBox

                        <DataGridTemplateColumn Header="">
                            <DataGridTemplateColumn.CellTemplate>
                                <DataTemplate>
                                    <CheckBox IsChecked="{Binding IsChecked, UpdateSourceTrigger=PropertyChanged}" />
                                </DataTemplate>
                            </DataGridTemplateColumn.CellTemplate>
                        </DataGridTemplateColumn>

当用户修改了CheckBox状态后，后台也能读取到选中的状态。

4、显示下拉框

<DataGridComboBoxColumn Header="Type" Width="80" 
　　　　　　　　　　　　　　SelectedItemBinding="{Binding RecordType}" 
　　　　　　　　　　　　　　ItemsSource="{Binding Source={StaticResource RecordTypeEnumKey}}" />

资源

系列目录：WPF开发快速入门【0】前言与目录

代码下载：Learn WPF: WPF学习笔记 (gitee.com)