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">
                                                <TextBlock
                                                       HorizontalAlignment="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的数据。这样就能拐着弯实现合并表头了。。。

如果喜欢，点个赞呗~