WPF Datagrid合并表头的思路
Posted dotNET跨平台
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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的数据。这样就能拐着弯实现合并表头了。。。
如果喜欢，点个赞呗~
以上是关于WPF Datagrid合并表头的思路的主要内容，如果未能解决你的问题，请参考以下文章
wpf datagrid表头SortDirection的升序（SortDirection）降序（Ascending）图标怎样放进去的？