【WPF】DataGrid多表头的样式设计

需求

在使用WPF开发时,使用DataGrid列表显示数据时,有些字段可以进行分组显示,用于更好的表达它们之间存在的某种关系,因此就考虑到要对DataGrid的表头进行扩展,可以显示多行表头,让这些有关联的字段内容显示的更加明了简洁。

【WPF】DataGrid多表头的样式设计_第1张图片

自定义样式

这段自定义样式可以放在MainWindow.xaml文件中,或者自己定义一个存放样式文件的xaml进行存放。
这里在模版里面使用的第一个Grid,是用于总的显示,还有右侧边竖线分割线,嵌入的Grid用于显示多表头的处理显示功能:第一行为总的信息,第二行为第一行和第三行的分割线,第三行显示的省、市和县。


窗体布局


    
        
            
                
                    
                        
                            
                            
                        
                    
                
                
                    
                
            
            
                
                    
                        
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                        
                    
                
            
            
                
                    
                
                
                    
                        
                        
                    
                
                
                    
                
            
        
    

在这里的窗体布局中,同时对姓名和格言的表头样式和Cell里面的样式进行了修改。其中DataGridTextColumn.HeaderTemplate包括的是头部的样式;DataGridTextColumn.ElementStyle宝开的是Cell的样式。

定义的实体类

public class UserInformation
    {
        public string UserName { get; set; }
        public string Province { get; set; }
        public string City { get; set; }
        public string County { get; set; }
        public int Age { get; set; }
        public string Motto { get; set; }

    }

ViewModel类的定义

public class MainViewModel:ViewModelBase
    {
        private string _title;

        public string Title
        {
            get { return _title; }
            set { Set(ref _title, value); }
        }

        private ObservableCollection _userInformations;

        public ObservableCollection UserInformations
        {
            get { return _userInformations; }
            set { Set(ref _userInformations, value); }
        }
        public MainViewModel()
        {
            Title = Guid.NewGuid().ToString();
            UserInformations = new ObservableCollection(new List()
            {
                new UserInformation()
                {
                    UserName = "Bob",Age = 32,Province = "山东",City = "济南",County = "天桥",Motto = "会当云绝顶,\r\n一览众山小。"
                },
                new UserInformation()
                {
                    UserName = "Bob",Age = 32,Province = "山东",City = "济南",County = "天桥",Motto = "会当云绝顶,\r\n一览众山小。"
                },
                new UserInformation()
                {
                    UserName = "Bob",Age = 32,Province = "山东",City = "济南",County = "天桥",Motto = "会当云绝顶,\r\n一览众山小。"
                }
            });
        }
    }

本实例使用了.netcore 3.1版本进行的开发,但是对于.net framework同样适用。

MVVM模式是使用MVVMLightstd10,可以从nuget上面进行下载。

本示例已上传至GITHUB:https://github.com/mzy666888/MultiHeaderOfDataGridWpfApp

你可能感兴趣的:(【WPF】DataGrid多表头的样式设计)