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

PS：給大家推薦一個C#開發(fā)可以用到的界面組件——DevExpress WPF，它擁有120+個控件和庫，將幫助您交付滿足甚至超出企業(yè)需求的高性能業(yè)務(wù)應(yīng)用程序。通過DevExpress WPF能創(chuàng)建有著強大互動功能的XAML基礎(chǔ)應(yīng)用程序，這些應(yīng)用程序?qū)Ｗ⒂诋?dāng)代客戶的需求和構(gòu)建未來新一代支持觸摸的解決方案。

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

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

對于常規(guī)的二維表格數(shù)據(jù)，如下所示。

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

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

//增加匯總字段和顯示
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 = " （合計數(shù)量 = {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;
}

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

在WPF應(yīng)用中實現(xiàn)DataGrid的分組顯示

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

同樣基于SqlSugar開發(fā)框架的基礎(chǔ)上，基于原料表的數(shù)據(jù)展示，實現(xiàn)在WPF應(yīng)用中實現(xiàn)DataGrid的分組顯示，實現(xiàn)的效果如下所示。

我們這里根據(jù)【類別】字段來進行分組統(tǒng)一，其中分組樣式在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=' (合計數(shù)量 = {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>

如果我們需要控件的虛擬化處理（提高顯示性能），那么設(shè)置下虛擬化處理屬性即可。<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#代碼也需要進行一定的適應(yīng)處理，如下所示。

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

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

//把數(shù)據(jù)集合轉(zhuǎn)換為CollectionView，并設(shè)置其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;
}

這樣就是寫了數(shù)據(jù)的顯示和分組處理了。

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

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

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

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

在WPF應(yīng)用中實現(xiàn)嵌套明細展示效果

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

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

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

<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的結(jié)構(gòu)如下所示。

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

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

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

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

/// <summary>
/// 記錄行變化的時候，觸發(fā)明細記錄的獲取處理
/// </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);
}
}
}

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

//明細記錄可見性變化的時候，觸發(fā)數(shù)據(jù)的綁定處理事件
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;
}
}
};

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

本文轉(zhuǎn)載自：