在之前一些文章中介紹了Winform程序中對表格內容進行了分組的展示，在WPF應用中同樣也可以對表格的內容進行分組展示，不過處理方式和Winform有所差異，本文同樣基于SqlSugar開發框架的基礎上，實現在WPF應用中實現DataGrid的分組顯示，以及嵌套明細展示效果。

PS：給大家推薦一個C#開發可以用到的界面組件——DevExpress WPF，它擁有120+個控件和庫，將幫助您交付滿足甚至超出企業需求的高性能業務應用程序。通過DevExpress WPF能創建有著強大互動功能的XAML基礎應用程序，這些應用程序專注于當代客戶的需求和構建未來新一代支持觸摸的解決方案。

DevExpress技術交流群10：532598169      歡迎一起進群討論

回顧Winform的表格分組展示效果

對于常規的二維表格數據，如下所示。

我們根據其中一個字段對表格數據進行分組展示，這樣更方便用戶對特定數據的歸類展示處理。

Winform的界面中，我們基于DevExpress 的GridView控件對數據進行分組展示，其中代碼如下所示。

//增加匯總字段和顯示
var gridView1 = this.winGridViewPager1.gridView1;
if (checkGroup.Checked)
{
this.winGridViewPager1.ShowLineNumber = false;
gridView1.IndicatorWidth = 0;
gridView1.OptionsView.ShowGroupExpandCollapseButtons = true;//顯示折疊的分組
gridView1.OptionsView.AllowCellMerge = true; //允許合并字段
gridView1.OptionsView.GroupDrawMode = GroupDrawMode.Standard;

gridView1.GroupSummary.Clear();
gridView1.Columns["Category"].GroupIndex = 0;//對類別進行分組展示

var item = new GridGroupSummaryItem();
item.FieldName = "Id";
item.DisplayFormat = " （合計數量 = {0:n}）";
item.SummaryType = DevExpress.Data.SummaryItemType.Count;//Sum、Average等
gridView1.GroupSummary.Add(item);
gridView1.ExpandAllGroups();
}
else
{
gridView1.GroupSummary.Clear();
this.winGridViewPager1.ShowLineNumber = true;
gridView1.OptionsView.AllowCellMerge = false;
}

我們可以看到，只需要實現對 GroupSummary的添加處理即可實現匯總效果的展示。

在WPF應用中實現DataGrid的分組顯示

在WPF應用中，數據的顯示通過DataGrid控件進行展示，默認是沒有分組效果的，如果需要分組效果，需要定制表格的分組樣式才能達到效果。

同樣基于SqlSugar開發框架的基礎上，基于原料表的數據展示，實現在WPF應用中實現DataGrid的分組顯示，實現的效果如下所示。

我們這里根據【類別】字段來進行分組統一，其中分組樣式在XAML上定義如下所示。

<DataGrid.GroupStyle>
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander IsExpanded="True">
<Expander.Header>
<StackPanel Orientation="Horizontal">
<TextBlock FontWeight="Bold" Text="類別：" />
<TextBlock FontWeight="Bold" Text="{Binding Name}" />
<TextBlock Text="{Binding ItemCount, StringFormat=' (合計數量 = {0} )'}" />
</StackPanel>
</Expander.Header>
<ItemsPresenter />
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock FontWeight="Bold" Text="{Binding Name}" />
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</DataGrid.GroupStyle>

如果我們需要控件的虛擬化處理（提高顯示性能），那么設置下虛擬化處理屬性即可。<DataGrid

x:Name="grid"
Grid.Row="1"
hc:DataGridAttach.ShowRowNumber="True"
AutoGenerateColumns="False"
HeadersVisibility="All"
IsReadOnly="True"
ItemsSource="{Binding ViewModel.Items}"
MouseDoubleClick="DataGrid_MouseDoubleClick"
RowHeaderWidth="60"
SelectionChanged="DataGrid_SelectionChanged"
SelectionMode="Extended"
VerticalScrollBarVisibility="Auto"
VirtualizingPanel.IsVirtualizing="True"
VirtualizingPanel.IsVirtualizingWhenGrouping="True"
>

表格的字段，如沒有特殊處理，我們用常用的定義效果即可，如下所示。

<DataGrid.Columns>
<DataGridTextColumn
Width="SizeToCells"
MinWidth="100"
Binding="{Binding Id}"
Header="ID編號" />
<DataGridTextColumn
Width="SizeToCells"
MinWidth="100"
Binding="{Binding Category}"
Header="類別" />
<DataGridTextColumn
Width="SizeToCells"
MinWidth="100"
Binding="{Binding Code}"
Header="原料編碼" />
..............
</DataGrid.Columns>

對于分組的效果處理，我們后臺的C#代碼也需要進行一定的適應處理，如下所示。

我們采用MVVM的模式處理查詢操作，獲得數據并轉換為CollectionView后，設置分組信息即可，如下代碼所示。

/// <summary>
/// 查詢處理
/// </summary>
[RelayCommand]
private async Task Search()
{
//查詢獲得視圖模型的數據
await this.ViewModel.SearchCommand.ExecuteAsync(null);

//把數據集合轉換為CollectionView，并設置其GroupDescriptions
var viewSource = CollectionViewSource.GetDefaultView(this.ViewModel.Items);
if (this.ViewModel.IsUseGroup)
{
viewSource.GroupDescriptions.Clear();
viewSource.GroupDescriptions.Add(new PropertyGroupDescription("Category"));
}
this.grid.ItemsSource = viewSource;
}

這樣就是寫了數據的顯示和分組處理了。

上面的SearchCommand就是視圖模型基類函數的查詢獲得數據的處理方式。

/// <summary>
/// 觸發查詢處理命令
/// </summary>
/// <returns></returns>
[RelayCommand]
public virtual async Task Search()
{
//切換第一頁
this.PagerInfo.CurrentPageIndex = 1;
//查詢更新
await GetData();
}

GetData也是視圖模型基類函數的通用處理方式，通過分頁和條件信息，獲得對應的數據記錄。

/// <summary>
/// 根據分頁和查詢條件查詢，請求數據
/// </summary>
/// <returns></returns>
public virtual async Task GetData()
{
//轉換下分頁信息
ConvertPagingInfo();
var result = await service.GetListAsync(this.PageDto);
if (result != null)
{
this.Items = result.Items?.ToList();
this.PagerInfo.RecordCount = result.TotalCount;
}
}

在WPF應用中實現嵌套明細展示效果

我們這里繼續介紹另外一個DataGrid的效果，通過明細展示的方式顯示其中一條記錄相關聯的表格信息，有時候也可以看成是主從關聯信息。

單我們單擊其中一條記錄的時候，展示嵌套表格，展示詳細的明細信息，如下效果所示。

這個效果主要是通過定義DataGrid.RowDetailsTemplate進行明細內容的處理的。例如我們定義明細的模板如下所示，其實也就是顯示另外一個表格信息。

<DataGrid.RowDetailsTemplate>
<DataTemplate>
<DataGrid
MaxHeight="500"
hc:DataGridAttach.ShowRowNumber="True"
AlternatingRowBackground="LightBlue"
AutoGenerateColumns="False"
HeadersVisibility="Column"
IsReadOnly="True"
RowHeaderWidth="60"
ScrollViewer.VerticalScrollBarVisibility="Auto"
SelectionUnit="FullRow">
<DataGrid.Columns>
<DataGridTextColumn
MinWidth="120"
Binding="{Binding Name}"
Header="顯示名稱" />
<DataGridTemplateColumn Width="80" Header="圖標">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ui:SymbolIcon
Width="32"
FontSize="32"
Symbol="{Binding Icon}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn
Width="80"
Binding="{Binding Seq}"
Header="排序" />
<DataGridTextColumn
Width="100"
Binding="{Binding FunctionId}"
Header="功能ID" />
</DataGrid.Columns>

</DataGrid>
</DataTemplate>
</DataGrid.RowDetailsTemplate>

Xaml的結構如下所示。

另外，我們在視圖模型中除了定義一級的數據記錄外，還定義一個嵌套記錄集合對象，如下所示。

/// <summary>
/// 編輯的數據列表
/// </summary>
[ObservableProperty]
private ObservableCollection<MenuInfo>? menuItems;

/// <summary>
/// 指定父級的子級數據列表
/// </summary>
[ObservableProperty]
private ObservableCollection<MenuInfo>? detailItems;

這樣我們在行選擇變化的時候，重新獲得明細的記錄，然后綁定顯示事件即可，如下代碼所示。

/// <summary>
/// 記錄行變化的時候，觸發明細記錄的獲取處理
/// </summary>
private async void DataGrid_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
var datagrid = sender as DataGrid;
if (datagrid != null)
{
var item = datagrid!.SelectedItem as MenuInfo;
if (item != null)
{
await ViewModel.GetDetailList(item.Id);
}
}
}

而在頁面初始化的時候，我們可以構造一個事件，用來綁定明細記錄的綁定顯示處理。

//明細記錄可見性變化的時候，觸發數據的綁定處理事件
this.grid.RowDetailsVisibilityChanged += (s, e) =>
{
var datagrid = s as DataGrid;
if (datagrid != null)
{
var DetailsDataGrid = e.DetailsElement as DataGrid;
if(DetailsDataGrid != null)
{
DetailsDataGrid.ItemsSource = viewModel.DetailItems;
}
}
};

這樣就可以正常的顯示嵌套明細的記錄了。

本文轉載自：