在WPF应用中实现DataGrid的分组显示，以及嵌套明细展示效果

烟迷了眼

我在前面随笔《在Winform系统开发中，对表格列表中的内容进行分组展示》，介绍了Winform程序中对表格内容进行了分组的展示，在WPF应用中，同样也可以对表格的内容进行分组展示，不过处理方式和Winform有所差异，本篇随笔同样基于SqlSugar开发框架的基础上，实现在WPF应用中实现DataGrid的分组显示，以及嵌套明细展示效果。
1、回顾Winform的表格分组展示效果

对于常规的二维表格数据，如下所示。

我们根据其中一个字段对表格数据进行分组展示，这样更方便用户对特定数据的归类展示处理。

Winform的界面中，我们基于DevExpress的GridView控件对数据进行分组展示，其中代码如下所示。

1. //增加汇总字段和显示
2. var gridView1 = this.winGridViewPager1.gridView1;
3. if (checkGroup.Checked)
4. {
5.     this.winGridViewPager1.ShowLineNumber = false;
6.     gridView1.IndicatorWidth = 0;
7.     gridView1.OptionsView.ShowGroupExpandCollapseButtons = true;//显示折叠的分组
8.     gridView1.OptionsView.AllowCellMerge = true; //允许合并字段
9.     gridView1.OptionsView.GroupDrawMode = GroupDrawMode.Standard;
11.     gridView1.GroupSummary.Clear();
12.     gridView1.Columns["Category"].GroupIndex = 0;//对类别进行分组展示
14.     var item = new GridGroupSummaryItem();
15.     item.FieldName = "Id";
16.     item.DisplayFormat = "  （合计数量 = {0:n}）";
17.     item.SummaryType = DevExpress.Data.SummaryItemType.Count;//Sum、Average等
18.     gridView1.GroupSummary.Add(item);
19.     gridView1.ExpandAllGroups();
20. }
21. else
22. {
23.     gridView1.GroupSummary.Clear();
24.     this.winGridViewPager1.ShowLineNumber = true;
25.     gridView1.OptionsView.AllowCellMerge = false;
26. }

复制代码

我们可以看到，只需要实现对 GroupSummary的添加处理即可实现汇总效果的展示。
2、在WPF应用中实现DataGrid的分组显示

在WPF应用中，数据的显示通过DataGrid控件进行展示，默认是没有分组效果的，如果需要分组效果，需要定制表格的分组样式才能达到效果。
我们同样基于SqlSugar开发框架的基础上，基于原料表的数据展示，实现在WPF应用中实现DataGrid的分组显示，实现的效果如下所示。

我们这里根据【类别】字段来进行分组统一，其中分组样式在XAML上定义如下所示。

1. <DataGrid.GroupStyle>
2.     <GroupStyle>
3.         <GroupStyle.ContainerStyle>
4.             
5.         </GroupStyle.ContainerStyle>
6.         <GroupStyle.HeaderTemplate>
7.             <DataTemplate>
8.                 <TextBlock FontWeight="Bold" Text="{Binding Name}" />
9.             </DataTemplate>
10.         </GroupStyle.HeaderTemplate>
11.     </GroupStyle>
12. </DataGrid.GroupStyle>

复制代码

如果我们需要控件的虚拟化处理（提高显示性能），那么设置下虚拟化处理属性即可。

1. [/code]表格的字段，如没有特殊处理，我们用常用的定义效果即可，如下所示。
2. [code]<DataGrid.Columns>
3.     <DataGridTextColumn
4.         Width="SizeToCells"
5.         MinWidth="100"
6.         Binding="{Binding Id}"
7.         Header="ID编号" />
8.     <DataGridTextColumn
9.         Width="SizeToCells"
10.         MinWidth="100"
11.         Binding="{Binding Category}"
12.         Header="类别" />
13.     <DataGridTextColumn
14.         Width="SizeToCells"
15.         MinWidth="100"
16.         Binding="{Binding Code}"
17.         Header="原料编码" />
18.         ..............
19. </DataGrid.Columns>

复制代码

对于分组的效果处理，我们后台的C#代码也需要进行一定的适应处理，如下所示。
我们采用MVVM的模式处理查询操作，获得数据并转换为CollectionView后，设置分组信息即可，如下代码所示。

1. /// <summary>
2. /// 查询处理
3. /// </summary>
4. [RelayCommand]
5. private async Task Search()
6. {
7.     //查询获得视图模型的数据
8.     await this.ViewModel.SearchCommand.ExecuteAsync(null);
10.     //把数据集合转换为CollectionView，并设置其GroupDescriptions
11.     var viewSource = <strong>CollectionViewSource.GetDefaultView</strong>(this.ViewModel.Items);
12.     if (this.ViewModel.IsUseGroup)
13.     {
14.         viewSource.<strong>GroupDescriptions</strong>.Clear();
15.         viewSource.<strong>GroupDescriptions</strong>.Add(new PropertyGroupDescription("<strong>Category</strong>"));
16.     }
17.     this.grid.ItemsSource = viewSource;
18. }

复制代码

这样就是写了数据的显示和分组处理了。
上面的SearchCommand就是视图模型基类函数的查询获得数据的处理方式。

1.     /// <summary>
2.     /// 触发查询处理命令
3.     /// </summary>
4.     /// <returns></returns>
5.     [RelayCommand]
6.     public virtual async Task Search()
7.     {
8.         //切换第一页
9.         this.PagerInfo.CurrentPageIndex = 1;
10.         //查询更新
11.         await GetData();
12.     }

复制代码

GetData也是视图模型基类函数的通用处理方式，通过分页和条件信息，获得对应的数据记录。

1.     /// <summary>
2.     /// 根据分页和查询条件查询，请求数据
3.     /// </summary>
4.     /// <returns></returns>
5.     public virtual async Task GetData()
6.     {      
7.         //转换下分页信息
8.         ConvertPagingInfo();
9.         var result = await <strong>service.GetListAsync</strong>(this.PageDto);
10.         if (result != null)
11.         {
12.             this.Items = result.Items?.ToList();
13.             this.PagerInfo.RecordCount = result.TotalCount;
14.         }
15.     }

复制代码

 
3、在WPF应用中实现嵌套明细展示效果

我们这里继续介绍另外一个DataGrid的效果，通过明细展示的方式显示其中一条记录相关联的表格信息，有时候也可以看成是主从关联信息。
单我们单击其中一条记录的时候，展示嵌套表格，展示详细的明细信息，如下效果所示。

这个效果主要是通过定义DataGrid.RowDetailsTemplate进行明细内容的处理的。例如我们定义明细的模板如下所示，其实也就是显示另外一个表格信息。

1. <DataGrid.GroupStyle>
2.     <GroupStyle>
3.         <GroupStyle.ContainerStyle>
4.             
5.         </GroupStyle.ContainerStyle>
6.         <GroupStyle.HeaderTemplate>
7.             <DataTemplate>
8.                 <TextBlock FontWeight="Bold" Text="{Binding Name}" />
9.             </DataTemplate>
10.         </GroupStyle.HeaderTemplate>
11.     </GroupStyle>
12. </DataGrid.GroupStyle><DataGrid.GroupStyle>
13.     <GroupStyle>
14.         <GroupStyle.ContainerStyle>
15.             
16.         </GroupStyle.ContainerStyle>
17.         <GroupStyle.HeaderTemplate>
18.             <DataTemplate>
19.                 <TextBlock FontWeight="Bold" Text="{Binding Name}" />
20.             </DataTemplate>
21.         </GroupStyle.HeaderTemplate>
22.     </GroupStyle>
23. </DataGrid.GroupStyle>                                                            

复制代码

Xaml的结构如下所示。

另外，我们在视图模型中除了定义一级的数据记录外，还定义一个嵌套记录集合对象，如下所示。

1.         /// <summary>
2.         /// 编辑的数据列表
3.         /// </summary>
4.         [ObservableProperty]
5.         private ObservableCollection<MenuInfo>? menuItems;
8.         /// <summary>
9.         /// 指定父级的子级数据列表
10.         /// </summary>
11.         [ObservableProperty]
12.         private ObservableCollection<MenuInfo>? detailItems;

复制代码

这样我们在行选择变化的时候，重新获得明细的记录，然后绑定显示事件即可，如下代码所示。

1.    /// <summary>
2.    /// 记录行变化的时候，触发明细记录的获取处理
3.    /// </summary>
4.    private async void DataGrid_SelectionChanged(object sender, SelectionChangedEventArgs e)
5.    {
6.        var datagrid = sender as DataGrid;
7.        if (datagrid != null)
8.        {
9.            var item = datagrid!.SelectedItem as MenuInfo;
10.            if (item != null)
11.            {
12.                await<strong> ViewModel.GetDetailList</strong>(item.Id);
13.            }
14.        }
15.    }

复制代码

而在页面初始化的时候，我们可以构造一个事件，用来绑定明细记录的绑定显示处理。

1.     //明细记录可见性变化的时候，触发数据的绑定处理事件
2.     this.grid.RowDetailsVisibilityChanged += (s, e) =>
3.     {
4.         var datagrid = s as DataGrid;
5.         if (datagrid != null)
6.         {
7.             var DetailsDataGrid = e.DetailsElement as DataGrid;
8.             if(DetailsDataGrid != null)
9.             {
10.                 <strong>DetailsDataGrid.ItemsSource </strong><strong>=</strong><strong> viewModel.DetailItems</strong>;
11.             }
12.         }
13.     };

复制代码

这样就可以正常的显示嵌套明细的记录了。
 

来源:https://www.cnblogs.com/wuhuacong/p/17989031
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！