WPF实现html中的table控件的示例代码.docx

第

WPF实现html中的table控件的示例代码

目录前言一、准备工作二、需求分析2.1table结构2.2尺寸单位2.3布局逻辑三、功能实现3.1Table控件3.2Tr3.3Td四、运行效果4.1默认效果4.2合并相邻的线4.3合并单元格4.4综合案例4.5课表

前言

相信很多做WPF开发的小伙伴都遇到过表格类的需求，虽然现有的Grid控件也能实现，但是使用起来的体验感并不好，比如要实现一个Excel中的表格效果，估计你能想到的第一个方法就是套Border控件，用这种方法你需要控制每个Border的边框，并且在一堆Bordr中找到Grid.Row，Grid.Column来确定位置，明明很简单的一个功能，硬是耗费了大量时间。Grid的这种设计虽然功能很强大，但是同时也导致了操作繁琐可读性非常差的问题。此时做过web开发的人肯定很想念html中的table元素，没错，我也是这样想的，如果能把html中的table元素搬到WPF中，那问题就轻松解决了，今天我们就来解决这个问题。

一、准备工作

我们先来认识一下table元素，其实最开始的网页功能相对简单，table元素主要用于展示文本和基本的排版。然而随着html标准的更新，table元素越来越复杂，很多功能在不同的标准中写法可能不一样，甚至有的功能只能在css中实现，这种情况我们成全照搬html中的写法肯定不现实，也完全没必要。所以必须做一个取舍。由于WPF中并没有css的概念，所以我们尽量舍弃css中的写法，使用WPF中类似的属性写法来开发，以下为统计出来的可用属性。

二、需求分析

既然我们要复刻一个东西，第一步肯定是要先搞清楚这个东西的内在逻辑，所以我们先来看看html中的table元素是怎么回事。

2.1table结构

table

thheader1/th

thheader2/th

thheader3/th

/tr

tdvalue1/td

tdvalue2/td

tdvalue3/td

/tr

tdvalue4/td

tdvalue5/td

tdvalue6/td

/tr

/table

2.1.1table

table为表格根元素，table内可以放置多个tr。

2.1.2tr

tr表示表格中的一行，一行可以放置若干个td。

2.1.3td

td为表格单元格，td可以设置rowspan属性合并多个行，可以设置colspan合并多个列。

2.2尺寸单位

2.2.1适用范围

table的width，height属性，tr的height属性，td的width，heigth属性。

2.2.2取值范围

百度比（例：width=50%)

像素（例：width=500)

不设置（自动计算）

2.3布局逻辑

2.3.1table

2.3.1.1width=50%

宽度占可用空间的50%，当父控件尺寸改变时会重新计算宽度，如果所有td子元素的尺寸之合大于table宽度(width=50%)，table宽度==Sum(td.width)。

2.3.1.2width=500

宽度占500像素，当父控件尺寸改变时不会重新计算宽度，如果所有td子元素的尺寸之合大于table宽度(width=500)，table宽度==Sum(td.width)。

2.3.1.3不设置宽度

不设置宽度的情况下，宽度根据td子元素的宽度计算，Sum(td.width)。

2.3.2tr

2.3.2.1height=50%

高度占table元素总高的50%，当父控件尺寸改变时会重新计算高度，当tr中高度最高的td超过了tr的50%时，整行高度以该td的高度为准。

2.3.2.2height=500

高度占500像素，当父控件尺寸改变时会重新计算高度，当tr中高度最高的td超过了tr的500像素时，整行高度以该td的高度为准。

2.3.2.3不设置高度

不设置高度的情况下，以最高的td子元素为准。

2.3.3td

2.3.3.1width=50%

宽度占table宽度的50%，当剩余宽度不足以分配给其它列时会压缩该列的50%宽度，分配给其它列。该列的实际宽度以该列所有td的最大宽度为准。

2.3.