需求

在使用WPF開發時，使用DataGrid列表顯示數據時，有些字段可以進行分組顯示，用于更好的表達它們之間存在的某種關系，因此就考慮到要對DataGrid的表頭進行擴展，可以顯示多行表頭，讓這些有關聯的字段內容顯示的更加明了簡潔。

image

自定義樣式

這段自定義樣式可以放在MainWindow.xaml文件中，或者自己定義一個存放樣式文件的xaml進行存放。這里在模版里面使用的第一個Grid，是用于總的顯示，還有右側邊豎線分割線，嵌入的Grid用于顯示多表頭的處理顯示功能：第一行為總的信息，第二行為第一行和第三行的分割線，第三行顯示的省、市和縣。

<Style?x:Key="CityStyle"?TargetType="DataGridColumnHeader"><Setter?Property="Template"><Setter.Value><ControlTemplate><Grid?x:Name="Root"><Grid.ColumnDefinitions><ColumnDefinition></ColumnDefinition><ColumnDefinition?Width="Auto"></ColumnDefinition></Grid.ColumnDefinitions><GridGrid.Column="0"HorizontalAlignment="{TemplateBinding?HorizontalContentAlignment}"VerticalAlignment="{TemplateBinding?VerticalContentAlignment}"><Grid.RowDefinitions><RowDefinition?Height="30"></RowDefinition><RowDefinition?Height="Auto"></RowDefinition><RowDefinition?Height="30"></RowDefinition></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition?Width="100"></ColumnDefinition><ColumnDefinition?Width="Auto"></ColumnDefinition><ColumnDefinition?Width="100"></ColumnDefinition><ColumnDefinition?Width="Auto"></ColumnDefinition><ColumnDefinition?Width="100"></ColumnDefinition></Grid.ColumnDefinitions><ContentPresenterGrid.Row="0"Grid.Column="0"Grid.ColumnSpan="5"HorizontalAlignment="Center"VerticalAlignment="Center"Content="戶籍信息"></ContentPresenter><RectangleGrid.Row="1"Grid.Column="0"Grid.ColumnSpan="5"VerticalAlignment="Stretch"?Height="1"Fill="Black"Visibility="Visible"></Rectangle><ContentPresenterGrid.Row="2"Grid.Column="0"HorizontalAlignment="Center"VerticalAlignment="Center"Content="省"></ContentPresenter><RectangleGrid.Row="2"Grid.Column="1"Width="1"VerticalAlignment="Stretch"Fill="#ccc"Visibility="Visible"></Rectangle><ContentPresenterGrid.Row="2"Grid.Column="2"HorizontalAlignment="Center"VerticalAlignment="Center"Content="市"></ContentPresenter><RectangleGrid.Row="2"Grid.Column="3"Width="1"VerticalAlignment="Stretch"Fill="#ccc"Visibility="Visible"></Rectangle><ContentPresenterGrid.Row="2"Grid.Column="4"HorizontalAlignment="Center"VerticalAlignment="Center"Content="縣"></ContentPresenter></Grid><RectangleGrid.Column="1"Width="1"VerticalAlignment="Stretch"Fill="#ccc"Visibility="Visible"></Rectangle></Grid></ControlTemplate></Setter.Value></Setter> </Style>

窗體布局

<Grid><DataGridAutoGenerateColumns="False"CanUserAddRows="False"ItemsSource="{Binding?UserInformations}"><DataGrid.Columns><DataGridTextColumn?Width="100"?Binding="{Binding?UserName}"><DataGridTextColumn.HeaderTemplate><DataTemplate><Grid?HorizontalAlignment="Stretch"?VerticalAlignment="Center"><TextBlockMargin="5,0,5,0"HorizontalAlignment="Center"VerticalAlignment="Center"Text="姓名"TextAlignment="Center"TextWrapping="Wrap"></TextBlock></Grid></DataTemplate></DataGridTextColumn.HeaderTemplate><DataGridTextColumn.ElementStyle><Style><Setter?Property="TextBlock.TextAlignment"?Value="Center"></Setter><Setter?Property="TextBlock.TextWrapping"?Value="Wrap"></Setter><Setter?Property="TextBlock.HorizontalAlignment"?Value="Center"></Setter><Setter?Property="TextBlock.VerticalAlignment"?Value="Center"></Setter></Style></DataGridTextColumn.ElementStyle></DataGridTextColumn><DataGridTemplateColumn?HeaderStyle="{StaticResource?CityStyle}"><DataGridTemplateColumn.CellTemplate><DataTemplate><StackPanel?Orientation="Horizontal"><TextBlockWidth="100"Margin="0"HorizontalAlignment="Center"VerticalAlignment="Center"Text="{Binding?Province}"TextAlignment="Center"></TextBlock><Rectangle?Width="1"?Fill="Black"></Rectangle><TextBlockWidth="100"HorizontalAlignment="Center"VerticalAlignment="Center"Text="{Binding?City}"TextAlignment="Center"></TextBlock><Rectangle?Width="1"?Fill="Black"></Rectangle><TextBlockWidth="100"HorizontalAlignment="Center"VerticalAlignment="Center"Text="{Binding?County}"TextAlignment="Center"></TextBlock></StackPanel></DataTemplate></DataGridTemplateColumn.CellTemplate></DataGridTemplateColumn><DataGridTextColumnWidth="100"Binding="{Binding?Motto}"Header="格言"><DataGridTextColumn.HeaderStyle><Style><Setter?Property="TextBlock.HorizontalAlignment"?Value="Stretch"></Setter><Setter?Property="TextBlock.TextAlignment"?Value="Center"></Setter></Style></DataGridTextColumn.HeaderStyle><DataGridTextColumn.HeaderTemplate><DataTemplate><TextBlockHorizontalAlignment="Center"VerticalAlignment="Center"Text="格言"TextAlignment="Center"TextWrapping="Wrap"></TextBlock></DataTemplate></DataGridTextColumn.HeaderTemplate><DataGridTextColumn.ElementStyle><Style><Setter?Property="TextBlock.TextAlignment"?Value="Center"></Setter><Setter?Property="TextBlock.TextWrapping"?Value="Wrap"></Setter><Setter?Property="TextBlock.HorizontalAlignment"?Value="Center"></Setter><Setter?Property="TextBlock.VerticalAlignment"?Value="Center"></Setter></Style></DataGridTextColumn.ElementStyle></DataGridTextColumn></DataGrid.Columns></DataGrid> </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<UserInformation>?_userInformations;public?ObservableCollection<UserInformation>?UserInformations{get?{?return?_userInformations;?}set?{?Set(ref?_userInformations,?value);?}}public?MainViewModel(){Title?=?Guid.NewGuid().ToString();UserInformations?=?new?ObservableCollection<UserInformation>(new?List<UserInformation>(){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

— END —

「擴展閱讀」

[GitHub] 75+的 C# 數據結構和算法實現

誰說.NET不適合搞BD，ML、AI

推薦一個集錄屏、截圖、音頻于一體的軟件給大家

10個用于C＃.NET開發的基本調試工具

Xamarin.Forms 二維碼掃描實踐

在Asp.Net Core MVC 開發過程中遇到的問題總結

前端小白在asp.net core mvc中使用ECharts

基于Asp.Net Core MVC和AdminLTE的響應式管理后臺之側邊欄處理

[譯]如何在C#中調試LINQ查詢

C# 語言性能提升方法

使用MQTTnet搭建Mqtt服務器

OxyPlot在WinForm中的應用

「公眾號推薦」

回復：「redis」?獲取5.0.9版的Windows安裝包（exe）

回復：「ca」 獲取 ?截圖、GIF等工具三件套，便攜版和安裝版全部包括

回復：「新書」 獲取《ASP.NET Core 3框架揭秘》

回復：「進階」 獲取 《CLR via C#（第4版）》購書鏈接

回復：「本質論」獲取 《C# 7.0本質論》購書鏈接

回復：「WPF」獲取 WPF 電子書

---

總結

以上是生活随笔為你收集整理的【WPF】DataGrid多表头的样式设计的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。