WPF Datagrid合并表头的思路

在使用datagrid的时候，有很多情况下，都需要合并表头，多行表头之类的操作。这就需要我们自定义列了。

本文给出一个思路，可以实现此需要，只是本人对这个研究不很明白，只是只是实现，仅此而已。

下面是效果图：

下面就看看代码：

直接在MainWindow实现：

<Window x:Class="wpfcore.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:wpfcore" xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"mc:Ignorable="d"Background="LightBlue"UseLayoutRounding="True"Title="MainWindow" Width="600" Height="340"><Grid><DataGrid ItemsSource="{Binding Students}" AutoGenerateColumns="False" GridLinesVisibility="All" FontSize="18"HorizontalGridLinesBrush="Red" VerticalGridLinesBrush="Red" ColumnHeaderHeight="60"><DataGrid.Columns><DataGridTemplateColumn Width="150"><DataGridTemplateColumn.HeaderStyle><Style TargetType="DataGridColumnHeader"><Setter Property="HorizontalContentAlignment" Value="Center"/><Setter Property="Height" Value="60"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="DataGridColumnHeader"><Border Grid.Column="0" Grid.Row="1" BorderBrush="Red" BorderThickness="1"><TextBlock Text="姓名" HorizontalAlignment="Center" VerticalAlignment="Center"/></Border></ControlTemplate></Setter.Value></Setter>
</Style></DataGridTemplateColumn.HeaderStyle><DataGridTemplateColumn.CellTemplate><DataTemplate><TextBlock Grid.Column="0" Text="{Binding Name}" HorizontalAlignment="Center" VerticalAlignment="Center"/></DataTemplate></DataGridTemplateColumn.CellTemplate></DataGridTemplateColumn><DataGridTemplateColumn Width="150"><DataGridTemplateColumn.HeaderStyle><Style TargetType="DataGridColumnHeader"><Setter Property="HorizontalContentAlignment" Value="Center"/><Setter Property="Height" Value="60"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="DataGridColumnHeader"><Border Grid.Column="0" Grid.Row="1" BorderBrush="Red" BorderThickness="0 1 1 1"><TextBlock Text="年龄" HorizontalAlignment="Center" VerticalAlignment="Center"/></Border></ControlTemplate></Setter.Value></Setter>
</Style></DataGridTemplateColumn.HeaderStyle><DataGridTemplateColumn.CellTemplate><DataTemplate><TextBlock Grid.Column="0" Text="{Binding Age}" HorizontalAlignment="Center" VerticalAlignment="Center"/></DataTemplate></DataGridTemplateColumn.CellTemplate></DataGridTemplateColumn><DataGridTemplateColumn x:Name="baseInfoColumn" Width="150"><DataGridTemplateColumn.HeaderStyle><Style TargetType="DataGridColumnHeader"><Setter Property="HorizontalContentAlignment" Value="Center"/><Setter Property="Height" Value="60"/><Setter Property="VerticalAlignment" Value="Top"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="DataGridColumnHeader"><Grid><Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition/><ColumnDefinition/></Grid.ColumnDefinitions><Grid.RowDefinitions><RowDefinition/><RowDefinition/></Grid.RowDefinitions> <Border  Grid.Column="0" Grid.ColumnSpan="3" BorderBrush="Red" BorderThickness="0 1 1 0"><TextBlockHorizontalAlignment="Center" VerticalAlignment="Center"Text="基本信息"/></Border><Border Grid.Column="0" Grid.Row="1" BorderBrush="Red" BorderThickness="0 1 1 1"><TextBlock Text="身高" HorizontalAlignment="Center" VerticalAlignment="Center"/></Border><Border Grid.Column="1" Grid.Row="1" BorderBrush="Red" BorderThickness="0 1 1 1"><TextBlock Text="体重" HorizontalAlignment="Center" VerticalAlignment="Center"/></Border><Border Grid.Column="2" Grid.Row="1" BorderBrush="Red" BorderThickness="0 1 1 1"><TextBlock Text="性别" HorizontalAlignment="Center" VerticalAlignment="Center"/></Border></Grid></ControlTemplate></Setter.Value></Setter>
</Style></DataGridTemplateColumn.HeaderStyle><DataGridTemplateColumn.CellTemplate><DataTemplate><Grid><Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition/><ColumnDefinition/></Grid.ColumnDefinitions><TextBlock Grid.Column="0" Text="{Binding Stature}" HorizontalAlignment="Center" VerticalAlignment="Center"/><TextBlock Grid.Column="1" Text="{Binding Weight}" HorizontalAlignment="Center" VerticalAlignment="Center"/><TextBlock Grid.Column="2" Text="{Binding Gender}" HorizontalAlignment="Center" VerticalAlignment="Center"/></Grid></DataTemplate></DataGridTemplateColumn.CellTemplate></DataGridTemplateColumn><DataGridTemplateColumn Width="150"><DataGridTemplateColumn.HeaderStyle><Style TargetType="DataGridColumnHeader"><Setter Property="HorizontalContentAlignment" Value="Center"/><Setter Property="Height" Value="60"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="DataGridColumnHeader"><Border Grid.Column="0" Grid.Row="1" BorderBrush="Red" BorderThickness="0 1 1 1"><TextBlock Text="年龄" HorizontalAlignment="Center" VerticalAlignment="Center"/></Border></ControlTemplate></Setter.Value></Setter>
</Style></DataGridTemplateColumn.HeaderStyle><DataGridTemplateColumn.CellTemplate><DataTemplate><TextBlock Grid.Column="0" Text="{Binding Age}" HorizontalAlignment="Center" VerticalAlignment="Center"/></DataTemplate></DataGridTemplateColumn.CellTemplate></DataGridTemplateColumn></DataGrid.Columns></DataGrid></Grid>
</Window>

MainWindow.cs，定义了三行数据的VM：

using System;
using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Input;namespace wpfcore
{public partial class MainWindow : Window{public ObservableCollection<Student> Students { get; set; } = new ObservableCollection<Student>();public MainWindow(){InitializeComponent();Students.Add(new Student(){Name="张三",Age=18,Stature=188,Weight=95,Gender="男"});Students.Add(new Student(){Name = "李四",Age = 18,Stature = 188,Weight = 95,Gender = "男"});Students.Add(new Student(){Name = "小红",Age = 18,Stature = 188,Weight = 95,Gender = "男"});DataContext = this;}   }public class Student{public string Name { get; set; }public int Age { get; set; }public int Stature { get; set; }public int Weight { get; set; }public string Gender { get; set; }}
}

OK,全部代码就是这样，思路就是使用DataGridTemplateColumn，需要合并的时候，就定义一个，然后在每个列再分出多列，绑定的数据还是原来的row的数据。这样就能拐着弯实现合并表头了。。。