WPF實現html中的table控制元件

趋时软件發表於2024-03-26
HTML控制元件

前言

　　相信很多做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.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 預設效果

<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 合併相鄰的線

<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 合併單元格

<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 綜合案例

<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 課表

<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使用的是裝置無關的尺寸單位，請注意分辨。

技術交流群

聯絡方式

相關文章