WPF自定义布局控件实战：从零封装一个支持合并单元格的Table（附完整源码）-平芜编程栈

WPF自定义表格控件开发实战：从UIElement到跨行列布局的完整实现

在桌面应用开发中，表格控件一直是数据展示的核心组件。虽然WPF自带的Grid控件功能强大，但当我们需要实现类似Excel的复杂表格布局时，往往会遇到开发效率低下、代码可读性差的问题。本文将带你从WPF底层布局系统出发，构建一个支持跨行跨列、百分比布局的自定义Table控件。

1. 为什么需要自定义表格控件

WPF的Grid控件虽然灵活，但在处理表格类需求时存在几个明显痛点：

布局声明繁琐：每个单元格都需要显式指定Grid.Row和Grid.Column
边框管理复杂：需要嵌套Border控件才能实现单元格边框
跨行列支持有限：虽然支持RowSpan/ColumnSpan，但缺乏动态调整能力
尺寸计算不直观：百分比和自动尺寸混合时行为难以预测

相比之下，HTML的table元素提供了更符合直觉的表格开发体验：

<table> <tr> <td rowspan="2">合并单元格</td> <td>普通单元格</td> </tr> <tr> <td>第二行</td> </tr> </table>

我们的目标是在WPF中实现类似的开发体验，同时保留WPF强大的布局能力。

2. 核心架构设计

2.1 类结构规划

自定义表格控件需要三个核心类：

Table：表格根容器，负责整体布局计算
Tr：表格行，作为逻辑容器不参与渲染
Td：表格单元格，承载实际内容和样式

// 类继承关系示意 UIElement ├── Table ├── Td DependencyObject └── Tr

2.2 关键依赖属性

每个类都需要定义控制布局的核心属性：

Table类属性：

public static readonly DependencyProperty WidthProperty = DependencyProperty.Register("Width", typeof(TableLength), typeof(Table)); public static readonly DependencyProperty RowsProperty = DependencyProperty.Register("Rows", typeof(TrCollection), typeof(Table));

Tr类属性：

public static readonly DependencyProperty HeightProperty = DependencyProperty.Register("Height", typeof(TableLength), typeof(Tr));

Td类属性：

public static readonly DependencyProperty ColSpanProperty = DependencyProperty.Register("ColSpan", typeof(int), typeof(Td)); public static readonly DependencyProperty WidthProperty = DependencyProperty.Register("Width", typeof(TableLength), typeof(Td));

提示：TableLength是我们自定义的类型，用于同时支持像素、百分比和自动尺寸三种模式。

3. 布局系统实现

3.1 测量阶段(MeasureCore)

测量阶段需要计算每个单元格的理想尺寸，处理跨行列的情况：

protected override Size MeasureCore(Size availableSize) { // 1. 计算表格基础尺寸 Size tableSize = CalculateBaseSize(availableSize); // 2. 构建单元格矩阵 CellMatrix matrix = BuildCellMatrix(); // 3. 测量所有可见单元格 MeasureCells(matrix, tableSize); // 4. 计算最终尺寸 return CalculateFinalSize(matrix, tableSize); }

关键算法步骤：

尺寸优先级计算：
- 固定尺寸(像素) > 百分比尺寸 > 自动尺寸
- 跨行列单元格需要参与多轮计算

剩余空间分配：

private void DistributeRemainingSpace(CellMatrix matrix, double remainingWidth) { var autoColumns = matrix.GetAutoSizedColumns(); double perColumn = remainingWidth / autoColumns.Count; foreach(var col in autoColumns) { matrix.SetColumnWidth(col, perColumn); } }

3.2 排列阶段(ArrangeCore)

排列阶段根据测量结果确定每个单元格的实际位置：

protected override void ArrangeCore(Rect finalRect) { // 1. 计算布局起始点 Point startPoint = CalculateStartPosition(finalRect); // 2. 遍历所有单元格进行排列 foreach(var cell in _visibleCells) { Rect cellRect = CalculateCellRect(cell, startPoint); cell.Arrange(cellRect); } }

3.3 渲染阶段(OnRender)

自定义渲染实现表格边框和背景：

protected override void OnRender(DrawingContext dc) { // 绘制表格背景 dc.DrawRectangle(Background, null, new Rect(RenderSize)); // 绘制单元格边框 foreach(var cell in _visibleCells) { DrawCellBorders(dc, cell); } }

4. 高级功能实现

4.1 合并单元格处理

跨行列合并是表格控件的核心功能，需要在测量阶段特殊处理：

private void HandleSpannedCells(CellMatrix matrix) { foreach(var cell in _cells.Where(c => c.ColSpan > 1 || c.RowSpan > 1)) { // 标记被合并的单元格位置为null for(int r = cell.Row; r < cell.Row + cell.RowSpan; r++) { for(int c = cell.Col; c < cell.Col + cell.ColSpan; c++) { if(r != cell.Row || c != cell.Col) { matrix.SetCell(r, c, null); } } } } }

4.2 边框合并优化

实现类似CSS的border-collapse效果，避免相邻单元格边框重叠：

private void DrawCellBorders(DrawingContext dc, Td cell) { // 只绘制单元格的右侧和下侧边框 if(!IsRightMostCell(cell)) { dc.DrawLine(_rightBorderPen, cell.Rect.TopRight, cell.Rect.BottomRight); } if(!IsBottomMostCell(cell)) { dc.DrawLine(_bottomBorderPen, cell.Rect.BottomLeft, cell.Rect.BottomRight); } }

4.3 性能优化技巧

可视化树优化：

protected override Visual GetVisualChild(int index) => _visualChildren[index]; protected override int VisualChildrenCount => _visualChildren.Count;

脏矩形渲染：

protected override void OnRender(DrawingContext dc) { if(_dirtyRect != Rect.Empty) { // 只重绘脏区域 dc.PushClip(new RectangleGeometry(_dirtyRect)); base.OnRender(dc); dc.Pop(); _dirtyRect = Rect.Empty; } }

5. 实战应用示例

5.1 课程表实现

<local:Table Border="1 Black Collapse"> <local:Tr Height="40"> <local:Th ColSpan="2">课时/日期</local:Th> <local:Th>星期一</local:Th> <local:Th>星期二</local:Th> <local:Th>星期三</local:Th> <local:Th>星期四</local:Th> <local:Th>星期五</local:Th> </local:Tr> <local:Tr> <local:Td RowSpan="4">上午</local:Td> <local:Td Width="100">第1节</local:Td> <local:Td>数学</local:Td> <local:Td>语文</local:Td> <local:Td>英语</local:Td> <local:Td>物理</local:Td> <local:Td>化学</local:Td> </local:Tr> <!-- 更多行... --> </local:Table>

5.2 数据报表展示

var table = new Table { Width = new TableLength(100, TableUnitType.Percent), Border = new TableBorder(Brushes.Black, 1) }; var headerRow = new Tr { Height = new TableLength(30) }; headerRow.Cells.Add(new Th { Content = "产品名称" }); headerRow.Cells.Add(new Th { Content = "销量" }); headerRow.Cells.Add(new Th { Content = "销售额" }); table.Rows.Add(headerRow); foreach(var product in products) { var row = new Tr(); row.Cells.Add(new Td { Content = product.Name }); row.Cells.Add(new Td { Content = product.SalesCount, TextAlignment = TextAlignment.Right }); row.Cells.Add(new Td { Content = product.TotalSales.ToString("C"), TextAlignment = TextAlignment.Right }); table.Rows.Add(row); }