WPF中DataGrid使用自定义列绑定数据

最新推荐文章于 2025-11-19 10:00:11 发布

原创最新推荐文章于 2025-11-19 10:00:11 发布 · 1.5w 阅读

9 ·

CC 4.0 BY-SA版权

WPF 专栏收录该内容

0 篇文章

订阅专栏

本文通过一个实例展示了如何在WPF的DataGrid中实现自定义列绑定，以显示姓名和年龄。内容包括创建数据模型、ViewModel和UI绑定，以及使用转换器实现年龄不同颜色的显示。当年龄大于30岁时显示红色，小于20岁时显示绿色。同时，提到了添加SortMemberPath属性来实现列头排序功能。

本文用一个简单的例子进行演示，显示一个人的姓名和年龄。其中，年龄大于30岁的以红色显示，年龄小于20岁的以绿色显示。功能简单。

1、首先确定显示的表格有几列数据，分别显示为什么形式。建模时，DataGrid中的每一行代表一个对象，每一列代表一个对象中的一个属性。本例中一共有两列数据，姓名和年龄。先建立基本数据模型，代码如下。

2、确定基本数据模型之后，构思VM中的数据模型。这里需要显示多个人的姓名和年龄，所以VM中需要有一个Person类型的属性和一个Person类型的集合。VM中的代码如下所示。

public class MainViewModel : ViewModelBase{
        /// <summary>
        /// Person属性
        /// </summary>
        private Person person;
        public Person Personal {
            get { return person; }
            set {
                if (person != value)
                    person = value;
                RaisePropertyChanged("Personal");
            }
        }
        public ObservableCollection<person> Persons { get; set; }

/// <summary>
        /// Initializes a new instance of the MainViewModel class.
        /// </summary>
        public MainViewModel(){
            InitPerson();
        }
        private void InitPerson() {
            Persons = new ObservableCollection<person>();
            Person person = new Person { Name = "Tom", Age = 25 };
            Persons.Add(person);
            person = new Person { Name = "Jack", Age = 23 };
            Persons.Add(person);
            person = new Person { Name = "Lucy", Age = 32 };
            Persons.Add(person);
            person = new Person { Name = "HanMeimei", Age = 18 };
            Persons.Add(person);
            person = new Person { Name = "Lilei", Age = 18 };
            Persons.Add(person);
            person = new Person { Name = "ZhangThree", Age = 13 };
            Persons.Add(person);
            person = new Person { Name = "LeeFour", Age = 24 };
            Persons.Add(person);
            person = new Person { Name = "WangFive", Age = 35 };
            Persons.Add(person);
        }
}
</person></object></person>

3、完成VM部分后，开始写UI部分，并完成绑定，代码如下。