0

WPF实现html中的table控件

 1 month ago
source link: https://www.cnblogs.com/qushi2020/p/18096836
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

WPF实现html中的table控件

前言

　　相信很多做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中类似的属性写法来开发，以下为统计出来的可用属性。

2842690-20240326152819270-780050825.png

二、需求分析

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

2.1 table结构

<table>
  <tr>
    <th>header1</th>
    <th>header2</th>
    <th>header3</th>
  </tr>
  <tr>
    <td>value1</td>
    <td>value2</td>
    <td>value3</td>
  </tr>
  <tr>
    <td>value4</td>
    <td>value5</td>
    <td>value6</td>
  </tr>
</table>

 2.1.1 table

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

    2.1.2 tr 

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

    2.1.3 td

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

2.2 尺寸单位

    2.2.1适用范围

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

    2.2.2 取值范围

    1. 百度比（例：width="50%")

    2. 像素（例：width="500")

    3. 不设置（自动计算）

2.3 布局逻辑

    2.3.1 table

       2.3.1.1 width="50%"

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

       2.3.1.2 width="500"

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

       2.3.1.3 不设置宽度

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

    2.3.2 tr

        2.3.2.1 height="50%"

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

        2.3.2.2 height="500"

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

        2.3.2.3 不设置高度

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

    2.3.3 td

        2.3.3.1 width="50%"

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

        2.3.3.2 width="50"

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

        2.3.3.3 不设置宽度

        不设置宽度的情况下，如果其它设置了宽度的列分配完宽度后，剩余宽度大于所有td的最小宽度的总合，那么未设置宽度的列会平均分配剩余的宽度，如果剩余的宽度小于所有td最小宽度的总合，那么所有td的宽度按最小宽度分配，其它已设置宽度的列则压缩宽度。该列的实际宽度以该列所有td的最大宽度为准。

        2.3.3.4 height="50%"

        高度占table高度的50%，当剩余高度不足以分配给其它行时会压缩该行的50%高度，分配给其它行。该行的实际高度以该行所有td的最大高度为准。如果最高td的高度大于tr，则以最高的td为准，如果小于tr，则以tr的高度为准。

        2.3.3.5 height="50"

        高度占50像素，当剩余高度不足以分配给其它行时会压缩该行的50像素高度，分配给其它行。该行的实际高度以该行所有td的最大高度为准。如果最高td的高度大于tr，则以最高的td为准，如果小于tr，则以tr的高度为准。

        2.3.3.6 不设置高度

        不设置高度的情况下，如果其它设置了高度的行分配完高度后，剩余高度大于所有td的最小高度的总合，那么未设置高度的行会平均分配剩余的高度，如果剩余的高度小于所有td最小高度的总合，那么所有td的高度按最小高度分配，其它已设置高度的行则压缩高度。该行的实际高度以该列所有td的最大高度为准。

三、功能实现

　　通过对需求的分析，我们知道至少应该有3个类来实现表格功能，分别是Table、Tr、Td，我们下面来看看怎么来实现它们。

3.1 Table控件

　　Table是一个在界面上需要呈现的元素，该控件主要处理布局及排列，不需要控件模板，所以不应该继承自Control类，那么可不可以继承自Panel呢，明显也不行，Panel的尺寸及布局系统继承自FrameworkElement，并不能给它的宽度设置Width="50%"这种值，所以它不仅不能继承自Panel，也不能继承自FrameworkElement，所以Table应该继承自UIElement类，我们需要在Table写自己的尺寸及布局管理功能，以下为Talbe的示例代码。

[ContentProperty("Rows")]
public class Table : UIElement
{
    /// <summary>
    /// 获取或设置行
    /// </summary>
    public TrCollection Rows
    {
        get { return (TrCollection)GetValue(RowsProperty); }
        private set { SetValue(RowsProperty, value); }
    }

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

    /// <summary>
    /// 获取或设置宽度
    /// </summary>
    public TableLength Width
    {
        get { return (TableLength)GetValue(WidthProperty); }
        set { SetValue(WidthProperty, value); }
    }

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

    /// <summary>
    /// 获取或设置高度
    /// </summary>
    public TableLength Height
    {
        get { return (TableLength)GetValue(HeightProperty); }
        set { SetValue(HeightProperty, value); }
    }

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

3.2 Tr

    Tr在Table里主要的作用是表达逻辑关系，不需要在界面上呈现，所以我们可以让它继承自DependencyObject，可以绑定属性就行了，以下为示例代码。

[ContentProperty("Cells")]
public class Tr : DependencyObject
{
    /// <summary>
    /// 获取或设置单元格
    /// </summary>
    public TdCollection Cells
    {
        get { return (TdCollection)GetValue(CellsProperty); }
        private set { SetValue(CellsProperty, value); }
    }

    public static readonly DependencyProperty CellsProperty =
        DependencyProperty.Register("Cells", typeof(TdCollection), typeof(Tr));

    /// <summary>
    /// 获取或设置高度
    /// </summary>
    public TableLength Height
    {
        get { return (TableLength)GetValue(HeightProperty); }
        set { SetValue(HeightProperty, value); }
    }

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

3.3 Td

    Td的情况与Table类似，需要在界面上呈现，并且有自己的尺寸及布局逻辑，所以继承自UIElement，以下为示例代码。

public class Td : UIElement
{
    /// <summary>
    /// 获取或设置需要跨的列数
    /// </summary>
    public int ColSpan
    {
        get { return (int)GetValue(ColSpanProperty); }
        set { SetValue(ColSpanProperty, value); }
    }

    public static readonly DependencyProperty ColSpanProperty =
        DependencyProperty.Register("ColSpan", typeof(int), typeof(Td), new PropertyMetadata(1));

    /// <summary>
    /// 获取或设置需要跨的行数
    /// </summary>
    public int RowSpan
    {
        get { return (int)GetValue(RowSpanProperty); }
        set { SetValue(RowSpanProperty, value); }
    }

    public static readonly DependencyProperty RowSpanProperty =
        DependencyProperty.Register("RowSpan", typeof(int), typeof(Td), new PropertyMetadata(1));

    /// <summary>
    /// 获取或设置宽度
    /// </summary>
    public TableLength Width
    {
        get { return (TableLength)GetValue(WidthProperty); }
        set { SetValue(WidthProperty, value); }
    }

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

    /// <summary>
    /// 获取或设置高度
    /// </summary>
    public TableLength Height
    {
        get { return (TableLength)GetValue(HeightProperty); }
        set { SetValue(HeightProperty, value); }
    }

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

3.4.1 MeasureCore()

    该方法传入一个名为availableSize的Size参数，该参数为控件可用的最大尺寸，我们需要通过这个参数计算各个单元格的排列位置及尺寸，并根据排列情况返回一个控件的期望尺寸，以下为实现的大致流程。

    1 通过Table的Height及Width参数计算出真实的尺寸;

    2 读取Table的Tr属性，取出所有Td，并定义一个二维数组将所有Td存放进去（Td[n,n]），如果Td的RowSpan或ColSpan参数大于1则将被合并的位置存入一个null。

    3 根据第2步的填充结果再定义一个存放坐标的二维数据(Size[n,n]）；

    4 测量Td子元素的尺寸，计算每个单元格实际尺寸，根据Td子元素尺寸计算是否需要压缩尺寸，计算完成后将单元格的尺寸存入第3步的数组中；

    5 根据第3步保存的尺寸数据计算单元格跨行或跨列后的尺寸；

    6 将计算出的Table实际尺寸返回给MeasureCore方法，以供下一步排列使用；

    3.4.2 ArrangeCore()

    该方法处理子控件的位置排列，循环调用每一个单元格的Arrange()方法，传入测量位置及尺寸就可以了。

    3.4.3 OnRender()

    该方法读取BorderColor、BgColor等参数画线及填充颜色，表格的外观都是由它画出来的。

四、运行效果

4.1 默认效果

2842690-20240326153637237-2061477726.png
<qs:Table
    Width="50%"
    Height="50%"
    Align="Center"
    Border="1 solid red"
    Valign="Middle">
    <qs:Tr>
        <qs:Th>11</qs:Th>
        <qs:Th>12</qs:Th>
        <qs:Th>13</qs:Th>
        <qs:Th>14</qs:Th>
        <qs:Th>15</qs:Th>
        <qs:Th>16</qs:Th>
    </qs:Tr>
    <qs:Tr>
        <qs:Td>21</qs:Td>
        <qs:Td>22</qs:Td>
        <qs:Td>23</qs:Td>
        <qs:Td>24</qs:Td>
        <qs:Td>25</qs:Td>
        <qs:Td>26</qs:Td>
    </qs:Tr>
    <qs:Tr>
        <qs:Td>31</qs:Td>
        <qs:Td>32</qs:Td>
        <qs:Td>33</qs:Td>
        <qs:Td>34</qs:Td>
        <qs:Td>35</qs:Td>
        <qs:Td>36</qs:Td>
    </qs:Tr>
    <qs:Tr>
        <qs:Td>41</qs:Td>
        <qs:Td>42</qs:Td>
        <qs:Td>43</qs:Td>
        <qs:Td>44</qs:Td>
        <qs:Td>45</qs:Td>
        <qs:Td>46</qs:Td>
    </qs:Tr>
</qs:Table>

4.2 合并相邻的线

2842690-20240326153747507-40145675.png
<qs:Table
    Width="50%"
    Height="50%"
    Align="Center"
    Border="1 solid red collapse"
    Valign="Middle">
    <qs:Tr>
        <qs:Th>11</qs:Th>
        <qs:Th>12</qs:Th>
        <qs:Th>13</qs:Th>
        <qs:Th>14</qs:Th>
        <qs:Th>15</qs:Th>
        <qs:Th>16</qs:Th>
    </qs:Tr>
    <qs:Tr>
        <qs:Td>21</qs:Td>
        <qs:Td>22</qs:Td>
        <qs:Td>23</qs:Td>
        <qs:Td>24</qs:Td>
        <qs:Td>25</qs:Td>
        <qs:Td>26</qs:Td>
    </qs:Tr>
    <qs:Tr>
        <qs:Td>31</qs:Td>
        <qs:Td>32</qs:Td>
        <qs:Td>33</qs:Td>
        <qs:Td>34</qs:Td>
        <qs:Td>35</qs:Td>
        <qs:Td>36</qs:Td>
    </qs:Tr>
    <qs:Tr>
        <qs:Td>41</qs:Td>
        <qs:Td>42</qs:Td>
        <qs:Td>43</qs:Td>
        <qs:Td>44</qs:Td>
        <qs:Td>45</qs:Td>
        <qs:Td>46</qs:Td>
    </qs:Tr>
</qs:Table>

4.3 合并单元格

2842690-20240326153842422-135426502.png
<qs:Table
    Width="50%"
    Height="50%"
    Align="Center"
    Border="1 solid red collapse"
    Valign="Middle">
    <qs:Tr>
        <qs:Th>11</qs:Th>
        <qs:Th>12</qs:Th>
        <qs:Th>13</qs:Th>
        <qs:Th>14</qs:Th>
        <qs:Th>15</qs:Th>
        <qs:Th>16</qs:Th>
    </qs:Tr>
    <qs:Tr>
        <qs:Td ColSpan="6">21</qs:Td>
    </qs:Tr>
    <qs:Tr>
        <qs:Td RowSpan="2">31</qs:Td>
        <qs:Td>32</qs:Td>
        <qs:Td ColSpan="2" RowSpan="2">33</qs:Td>
        <qs:Td>35</qs:Td>
        <qs:Td RowSpan="2">36</qs:Td>
    </qs:Tr>
    <qs:Tr>
        <qs:Td>42</qs:Td>
        <qs:Td>45</qs:Td>
    </qs:Tr>
</qs:Table>

4.4 综合案例

2842690-20240326153922912-240073426.png
<qs:Table
       Width="50%"
       Height="50%"
       Align="Center"
       Border="1 solid Black collapse"
       Valign="Middle">
    <qs:Tr
           Height="40"
           Align="Center"
           BgColor="#FFAAAAAA"
           Valign="Middle">
        <qs:Th Width="40" BgColor="#FFAAAAAA">11</qs:Th>
        <qs:Th Width="10%">12</qs:Th>
        <qs:Th>13</qs:Th>
        <qs:Th>14</qs:Th>
        <qs:Th>15</qs:Th>
        <qs:Th>16</qs:Th>
    </qs:Tr>
    <qs:Tr
           Height="30%"
           Align="Center"
           BgColor="#FF5F5FF1"
           Valign="Middle">
        <qs:Td BgColor="#FFAAAAAA">21</qs:Td>
        <qs:Td>22</qs:Td>
        <qs:Td Width="20%">23</qs:Td>
        <qs:Td>24</qs:Td>
        <qs:Td>25</qs:Td>
        <qs:Td>26</qs:Td>
    </qs:Tr>
    <qs:Tr
           Height="30%"
           Align="Center"
           BgColor="#FFEA8633"
           Valign="Middle">
        <qs:Td BgColor="#FFAAAAAA">31</qs:Td>
        <qs:Td>32</qs:Td>
        <qs:Td>33</qs:Td>
        <qs:Td>34</qs:Td>
        <qs:Td>35</qs:Td>
        <qs:Td>36</qs:Td>
    </qs:Tr>
    <qs:Tr
           Height="30%"
           Align="Center"
           BgColor="#FF5F5FF1"
           Valign="Middle">
        <qs:Td BgColor="#FFAAAAAA">41</qs:Td>
        <qs:Td>42</qs:Td>
        <qs:Td>43</qs:Td>
        <qs:Td>44</qs:Td>
        <qs:Td Width="150">45</qs:Td>
        <qs:Td>46</qs:Td>
    </qs:Tr>
</qs:Table>

4.5 课表

2842690-20240326154021756-1394680079.png
<qs:Table
    Width="600"
    Height="250"
    Align="Center"
    Border="1 solid black collapse"
    Valign="Middle">
    <qs:Tr
        Height="60"
        Align="Center"
        BgColor="#FFE5E5E5"
        Valign="Middle">
        <qs:Th ColSpan="2">
            <TextBlock Text="课时/日期" />
        </qs:Th>
        <qs:Th>星期一</qs:Th>
        <qs:Th>星期二</qs:Th>
        <qs:Th>星期三</qs:Th>
        <qs:Th>星期四</qs:Th>
        <qs:Th>星期五</qs:Th>
    </qs:Tr>
    <qs:Tr Align="Center" Valign="Middle">
        <qs:Td RowSpan="4">上午</qs:Td>
        <qs:Td Width="100">第1节</qs:Td>
        <qs:Td />
        <qs:Td />
        <qs:Td />
        <qs:Td />
        <qs:Td />
    </qs:Tr>
    <qs:Tr Align="Center" Valign="Middle">
        <qs:Td>第2节</qs:Td>
        <qs:Td />
        <qs:Td />
        <qs:Td />
        <qs:Td />
        <qs:Td />
    </qs:Tr>
    <qs:Tr Align="Center" Valign="Middle">
        <qs:Td>第3节</qs:Td>
        <qs:Td />
        <qs:Td />
        <qs:Td />
        <qs:Td />
        <qs:Td />
    </qs:Tr>
    <qs:Tr Align="Center" Valign="Middle">
        <qs:Td>第4节</qs:Td>
        <qs:Td />
        <qs:Td />
        <qs:Td />
        <qs:Td />
        <qs:Td />
    </qs:Tr>
    <qs:Tr Align="Center" Valign="Middle">
        <qs:Td RowSpan="2">上午</qs:Td>
        <qs:Td Width="100">第5节</qs:Td>
        <qs:Td />
        <qs:Td />
        <qs:Td />
        <qs:Td />
        <qs:Td />
    </qs:Tr>
    <qs:Tr Align="Center" Valign="Middle">
        <qs:Td>第6节</qs:Td>
        <qs:Td />
        <qs:Td />
        <qs:Td />
        <qs:Td />
        <qs:Td />
    </qs:Tr>
</qs:Table>

说明：文中用“像素”代替尺寸单位是为了便于理解，实际上WPF使用的是设备无关的尺寸单位，请注意分辨。

技术交流群

2842690-20240327111823344-1546827137.png

联系方式

2842690-20240327111902059-153684030.png

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK