[C#]自定義控件:進(jìn)度條(ProgressBar)
一、前言
技術(shù)沒有先進(jìn)與落后，只有合適與不合適。
本篇的自定義控件是：進(jìn)度條（ProgressBar）。
進(jìn)度條的實(shí)現(xiàn)方式多種多樣，主流的方式有：使用多張圖片去實(shí)現(xiàn)、使用1個(gè)或2個(gè)Panel放到UserControl上去實(shí)現(xiàn)、重載系統(tǒng)進(jìn)度條去實(shí)現(xiàn)等等。
本次所實(shí)現(xiàn)的進(jìn)度條仍是使用GDI+去實(shí)現(xiàn)。當(dāng)然，如果只是實(shí)現(xiàn)最基本的扁平化的進(jìn)度條，那完全不需要再寫本篇文章，因?yàn)橹苯有「南碌谝黄腖TrackBar就行了。
既然寫這篇文章，就是實(shí)現(xiàn)不一樣的、比較好玩和好看的進(jìn)度條，如環(huán)形進(jìn)度條、餅形進(jìn)度條等等。
本篇使用的知識都是前幾篇中已經(jīng)講過的，并沒有新的技術(shù)。但是卻附加了一些想像力，一些不拘一格、稍稍突破常規(guī)的想像力。
?
相信看完的你，一定會有所收獲。
本文地址：https://www.cnblogs.com/lesliexin/p/13575517.html
?
二、前期分析（一）為什么需要自定義進(jìn)度條？
系統(tǒng)自帶的滾動條樣式太過單調(diào)，同時(shí)不夠“扁平化”，所以便去實(shí)現(xiàn)自己的滾動條。
?
（二）實(shí)現(xiàn)目標(biāo)
1，支持三種樣式
（1）橫條（Bar）
?
（2）圓餅（Pie）
?
（3）圓弧（Arc）
?
?
2，支持顯示和隱藏百分比
（1）橫條（Bar）
?
（2）圓餅（Pie）
?
（3）圓弧（Arc）
?
?
3，支持多種進(jìn)度形狀
（1）連續(xù)
?
（2）分段塊
?
（3）兩段式：先分段塊再連續(xù)
?
（4）螺旋
（注：只有“橫條”樣式時(shí)才支持螺旋形狀）
?
?
4，支持Marquee樣式
當(dāng)進(jìn)度無法確定時(shí)，便需要使用Marquee樣式，同系統(tǒng)進(jìn)度條的“Marquee”樣式類似。
不過支持更多的Marquee樣式。
（1）左右擺動
?
（2）循環(huán)穿過
?
（3）往復(fù)（連續(xù)）
?
（4）劃過（連續(xù)）
?
（5）往復(fù)（分段塊）
?
（6）劃過（分段塊）
?
（7）螺旋
?
?
5，支持調(diào)整進(jìn)度條各元素尺寸和顏色
（1）設(shè)置邊框厚度和顏色
?
（2）設(shè)置背景大小和顏色
?
（3）設(shè)置進(jìn)度繪制位置和顏色
?
（4）設(shè)置進(jìn)度文本顏色
?
（5）設(shè)置弧線厚度（僅樣式為“圓弧（Arc）”時(shí)有效）
?
（6）設(shè)置“分段塊”厚度（僅進(jìn)度條形狀為“分段塊”時(shí)有效）
?
?
?
三、進(jìn)度條拆解看了上面的實(shí)現(xiàn)目標(biāo)，是不是感覺眼花繚亂、無從下手？
下面我就對進(jìn)度條進(jìn)行拆分講解，一步一步來看上面的效果是怎么實(shí)現(xiàn)的。
?
（一）組成元素
進(jìn)度條由三個(gè)部分組成，分別是：進(jìn)度、邊框、背景。
下面是各種樣式下，三個(gè)組成部分的拆分。
1，橫條（Bar）
?
2，圓餅（Pie）
?
3，圓?。ˋrc）
?
?
（二）元素屬性
進(jìn)度條的三個(gè)組成元素，都有著各自相關(guān)的屬性。
（注：因?yàn)椤邦伾睂傩允潜貍涞?，所以不再贅述。?/p>
1，邊框
其相關(guān)屬性為：邊框的厚度。
當(dāng)“厚度”為0時(shí)，看起來進(jìn)度條就沒有邊框；
當(dāng)“厚度”超過控件高度的二分之一時(shí)，整個(gè)進(jìn)度條就變成了邊框的顏色。
（注：因?yàn)槭窍壤L制“背景”，再繪制“邊框”，所以是“整個(gè)進(jìn)度條變成邊框的顏色”）
A，對于 “橫條（Bar）”，其邊框厚度如下圖所示：
B，對于“圓餅（Pie）”、“圓?。ˋrc）”，其邊框厚度如下圖所示：
2，背景
其相關(guān)屬性為：背景的大小
背景的大小就是背景繪制的范圍，這里用一個(gè)自造詞“收縮寬度”來進(jìn)行描述。
當(dāng)“收縮寬度”為0時(shí)，背景大?。娇丶旧泶笮?；
當(dāng)“收縮寬度”為x時(shí)，背景寬度＝控件寬度－2*x，背景高度＝控件高度－2*x；
當(dāng)“收縮寬度”超過控件高度的二分之一時(shí)，背景高度＝控件高度－2*（控件高度/2）＝0，此時(shí)進(jìn)度條將沒有了背景。
A，對于 “橫條（Bar）”，其收縮寬度如下圖所示：
B，對于“圓餅（Pie）”、“圓?。ˋrc）”，其收縮寬度如下圖所示：
3，進(jìn)度
其相關(guān)屬性有：進(jìn)度繪制范圍、進(jìn)度樣式
A，進(jìn)度繪制范圍
顧名思義，就是進(jìn)度可繪制的范圍，這里用“繪制邊框距離”來進(jìn)行描述。
當(dāng)“繪制邊框距離”為0時(shí)，進(jìn)度的繪制范圍＝控件本身大??；
當(dāng)“繪制邊框距離”為x時(shí)，進(jìn)度的繪制起點(diǎn)：（x,x），繪制終點(diǎn)：（控件寬度－x，控件高度－x），所以繪制范圍＝（控件寬度－2*x，控件高度－2*x）；
當(dāng)“繪制邊框距離”超過控件高度的二分之一時(shí)，進(jìn)度的繪制高度將為0，也代表著沒有進(jìn)度。
A，對于 “橫條（Bar）”，其繪制邊框距離如下圖所示：
B，對于“圓餅（Pie）”，其繪制邊框距離如下圖所示：
C，對于“圓弧（Arc）”，其繪制邊框距離如下圖所示：
?
B，進(jìn)度樣式
進(jìn)度樣式就是前節(jié)實(shí)現(xiàn)目標(biāo)中各種進(jìn)度的樣式，有連續(xù)的、有分段塊的、有螺旋的等等。
這此樣式大部分一看都知道如何實(shí)現(xiàn)的。
比如“連續(xù)”，在“橫條（Bar）”樣式中，就是填充一個(gè)矩形；在“圓餅（Pie）”中，就是填充一個(gè)扇形；在“圓?。ˋrc）”中，就是畫一段弧線。
比如“分段塊”，在“橫條（Bar）”樣式中，就是等間隔填充多個(gè)矩形；在“圓餅（Pie）”中，就是等間隔填充一個(gè)扇形；在“圓?。ˋrc）”中，就是等間隔畫一段弧線。
在這里，我將詳細(xì)講解一個(gè)特殊的形狀：“螺旋”，因?yàn)椤奥菪睒邮匠瞬惶苤庇^想像出來之外，還有不少細(xì)節(jié)需要處理。
因?yàn)橹挥小皺M條（Bar）”樣式進(jìn)度條有“螺旋”樣式，所以接下來的講解都是以“橫條（Bar）”為基礎(chǔ)進(jìn)行講解的。
同時(shí)，為了避免干擾，前面的兩個(gè)屬性“邊框”和“背景”都將保持默認(rèn)值，即：沒有邊框，背景大?。娇丶笮 ！斑M(jìn)度繪制范圍”也是默認(rèn)值，即繪制范圍＝控件大小。
（1）“螺旋”樣式實(shí)現(xiàn)講解
A，進(jìn)度明確時(shí)
即進(jìn)度是已知且確定的，比如5%，33%等等。其外觀樣式如下：
?
其示意圖如下：
?
其中藍(lán)色的平行四邊形就是“螺旋”，其本身是一個(gè)背景透明、上有多個(gè)藍(lán)色平行四邊形的圖片。
進(jìn)度的增減實(shí)質(zhì)上就是這個(gè)圖片在控件上的左右移動。
那么，這個(gè)圖片要和控件大小相等，特別是寬度相等。但是在使用GDI+去生成這個(gè)圖片時(shí)，卻不能讓圖片寬度與控件寬度相等。
我們在往圖片繪制平行四邊行時(shí)，是從右往左依次繪制的，之所以從右側(cè)開始繪制，是為了保證進(jìn)度條的右側(cè)樣式是固定的，固定在一個(gè)比較美觀的狀態(tài)。因?yàn)樵谶M(jìn)度變化時(shí)，即圖片左右移動時(shí)，我們目光的焦點(diǎn)是在右側(cè)，所以一個(gè)固定的右側(cè)樣式就比較重要，否則當(dāng)控件寬度變化時(shí)，右側(cè)的樣式就隨之變化。
當(dāng)圖片寬度與控件寬度相等時(shí)，會出現(xiàn)下面這種情況，即進(jìn)度條的最右側(cè)下方有空白。如下圖所示：
?（其中上面圖形是實(shí)際繪制圖片，下面圖形是將圖片截取，和進(jìn)度條寬度相等后樣式）
所以我們令圖片的寬度＝控件的寬度+1個(gè)平行四邊行的寬度。在繪制完圖片后，我們從中截取出一個(gè)和控件寬度一樣的圖片，這樣，整體的樣式就比較好看。如下圖所示：
?（其中上面圖形是實(shí)際繪制圖片，下面圖形是將圖片截取，和進(jìn)度條寬度相等后樣式）
?
綜上，就是按照下圖所示的5步依次實(shí)現(xiàn)：
?
?
B，進(jìn)度未知時(shí)
即進(jìn)度是不確定的，就像系統(tǒng)進(jìn)度條的Marquee樣式那樣。其外觀樣式如下：
?
同上，上方仍是一個(gè)背景透明、上有多個(gè)藍(lán)色平行四邊形的圖片。上圖的效果就是這個(gè)圖片在不段的循環(huán)移動。
具體示意如下，圖片不斷向右側(cè)移動，當(dāng)右側(cè)超過一個(gè)平等四邊行時(shí)，圖片恢復(fù)原位，然后不斷循環(huán)。
?
通過上方的示意圖，我們發(fā)現(xiàn)一個(gè)特點(diǎn)，就是圖片的寬度不再等于（控件的寬度+1個(gè)平行四邊行的寬度），而是等于（控件的寬度+2個(gè)平行四邊行的寬度）。原因如下：
在畫示意圖時(shí)，為了方便直觀查看，平行四邊形正好是兩個(gè)相對的直角三角行，而實(shí)際繪制時(shí)，很少會有這種樣式，大多都是兩個(gè)相對的鈍角三角行組成的平等四邊形的樣子，如下圖所示：
?
這種情況下，如果圖片的寬度＝控件的寬度+1個(gè)平行四邊行的寬度，那么在移動到最右側(cè)時(shí)和復(fù)位時(shí)都會出現(xiàn)額外的空白，如下圖所示：
?
所以，才會令：圖片的寬度＝控件的寬度+2個(gè)平行四邊行的寬度。
?
（三）其它屬性
除了前面的與進(jìn)度條元素直接相關(guān)的屬性外，還有一些其他屬性，這些屬性都是在某種特定樣式下才起有作用。
1，弧線寬度
在“圓?。ˋrc）”樣式的進(jìn)度條中，“進(jìn)度”就是一段圓弧，所以在其他屬性外，還要有“弧線本身寬度”這樣一個(gè)屬性。
在默認(rèn)情況下，弧線寬度＝控件寬度/10，因?yàn)楫?dāng)進(jìn)度達(dá)到100%時(shí)，弧線就變成了圓環(huán)，此時(shí)看起來有弧線的地方占控件寬度的五分之一，是一個(gè)比較常規(guī)的寬度。
通過調(diào)用弧線寬度，可以實(shí)現(xiàn)一些特殊的效果。
?
?
2，分段塊寬度
在進(jìn)度樣式為“分段塊”時(shí)，為了支持不同的分段寬度，所以要有本屬性。
為了繪制出更好的效果，“分段塊寬度”不僅僅是有顏色的那部分的寬度，而是為：有顏色部分的寬度+兩個(gè)顏色間隔。
經(jīng)過調(diào)試，發(fā)現(xiàn)當(dāng)（顏色：間隔＝2：1）時(shí)，外觀比較好看和自然。
所以，一個(gè)“分段塊寬度”＝2/3有顏色寬度+1/3無顏色寬度。
因?yàn)椤皺M條（Bar）”、“圓餅（Pie）”、“圓?。ˋrc）”都支持“分段塊”。所以在“橫條（Bar）”中，“分段塊寬度”指的就是寬度；而在“圓餅（Pie）”、“圓弧（Arc）”中，“分段塊寬度”指的是角度。
?
?
四、開始實(shí)現(xiàn)（一）前期準(zhǔn)備。
此處僅作提綱，具體操作見前篇。
新建類：LProgressBar.cs
添加繼承：Control（需要添加引用：System.Windows.Forms.dll）
修改可訪問性為：public
（二）添加屬性
1，進(jìn)度值
進(jìn)度值指的是當(dāng)前的進(jìn)度，這里將進(jìn)度范圍固定為：0~100。
這樣的好處是方便計(jì)算和繪制，使用時(shí)也更加直觀。
2，邊框厚度
詳細(xì)見前節(jié)中的講解。
（注：我是先寫完的代碼，然后再寫文章，有時(shí)在寫文章時(shí)會發(fā)現(xiàn)屬性的命名不太正規(guī)，比如“邊框厚度”這個(gè)屬性，用“BorderSize”更好，但是我在寫代碼時(shí)我想的是“環(huán)繞一圈的線”，所以就成了下面圖中的“SurroundLineSize”，但是在寫文章時(shí)發(fā)現(xiàn)不好描述，就改成了“邊框厚度”，不過再去修改代碼意義不大，重要的是技術(shù)思想本身。下同。）
3，邊框顏色
顧名思義，就是邊框的顏色。
4，背景收縮寬度
詳細(xì)見前節(jié)中的講解。
5，背景顏色
6，進(jìn)度繪制范圍邊緣
詳細(xì)見前節(jié)中的講解。
7，弧線厚度
詳細(xì)見前節(jié)中的講解。
8， 進(jìn)度顏色
進(jìn)度顏色是進(jìn)度本身的顏色。
9，分段塊寬度
詳細(xì)見前節(jié)中的講解。
10，進(jìn)度樣式
進(jìn)度樣式描述的是進(jìn)度本身的外觀，如連續(xù)、分段塊、螺旋等等。
進(jìn)度樣式是一個(gè)枚舉，明細(xì)如下：
11，進(jìn)度條類型
進(jìn)度條類型指的是進(jìn)度條的樣式外觀，如橫條、圓餅、圓弧等。
進(jìn)度條類型是一個(gè)枚舉，明細(xì)如下：
12，進(jìn)度條模式
進(jìn)度模式指的進(jìn)度是明確的還是不明確的。
進(jìn)度明確，比如當(dāng)前進(jìn)度是1%、45%等等。
進(jìn)度不明確，比如加載某個(gè)文件時(shí)一直在加載，但不知道加載了多少。也就是系統(tǒng)進(jìn)度條的Marquee樣式。
進(jìn)度條模式是一個(gè)枚舉，明細(xì)如下：
13，Marquee循環(huán)一遍時(shí)間
?Marquee樣式時(shí)動畫的快慢。
?
14，Marquees樣式
Marquee樣式動畫。
?
該屬性是一個(gè)枚舉，明細(xì)如下：
?
15，Marquee類型
Marquee樣式同樣是動畫，所以支持勻速和緩入緩出效果。
?
該屬性是一個(gè)枚舉，明細(xì)如下：
?
16，進(jìn)度文本類型
可以設(shè)置進(jìn)度條是否顯示文本，以及是否顯示百分比。
?
該屬性是一個(gè)枚舉，明細(xì)如下：
?
17，進(jìn)度文本顏色
18，構(gòu)造函數(shù)
這里的構(gòu)造函數(shù)中，除了使用了之前文章中固定的“雙緩沖”外，還額外設(shè)置了幾個(gè)屬性，這幾個(gè)屬性是為了讓控件支持透明，所以下面才可以令背景色和前景色為透明色。
這種情況下，整個(gè)控件就相當(dāng)于一個(gè)完全透明的畫布，可以任由我們繪制。
（三）重寫方法
對于本進(jìn)度條而言，只是用來指示進(jìn)度信息，所以不需要事件。只需要重寫最基本的OnPaint方法就行了。
不過，由于在OnPaint中要繪制的樣式以及類型太多，所以代碼量較大，但是代碼難度不大。我會先將OnPaint代碼全部放上，然后著重講一下實(shí)現(xiàn)的原理。
而Marquee樣式本質(zhì)上就是一個(gè)動畫效果，循環(huán)的繪制一些圖形或改變圖形的大小位置，所以我們使用一個(gè)定時(shí)器來進(jìn)行觸發(fā)，定時(shí)的改變圖形或圖形大小位置。?
OnPaint
Timer_Tick
?
畫進(jìn)度條，其實(shí)就是將進(jìn)度條的三個(gè)組成部分——背景、邊框、進(jìn)度——分別繪制出來。
1，背景
（1）橫條（Bar）
填充一個(gè)矩形，這里的矩形范圍是控件范圍減去“背景收縮寬度”后的范圍。
（2）圓餅（Pie）和圓?。ˋrc）
填充一個(gè)圓形，同樣范圍是控件范圍減去“背景收縮寬度”后的范圍。
2，邊框
（1）橫條（Bar）
繪制一個(gè)矩形框，畫筆寬度就是邊框?qū)挾?，注意繪制的范圍，包含起點(diǎn)和寬高，寬高是要分別減去一半的邊框?qū)挾鹊模驗(yàn)槔L制畫筆時(shí)，是從畫筆寬度中間作畫。
（2）圓餅（Pie）和圓?。ˋrc）
繪制一個(gè)圓，畫筆寬度就是邊框?qū)挾?。同樣需要注意繪制的范圍，具體同上。
3，進(jìn)度
這是實(shí)現(xiàn)時(shí)最復(fù)雜的地方，難度并不大，主要是要繪制的效果太多了。
在畫進(jìn)度時(shí)要分兩種情況，一種是進(jìn)度明確的，一種是進(jìn)度不明確的（Marquee樣式）。
在每種情況中，進(jìn)度都有多種樣式，比如連續(xù)、分段塊等等。
（1），進(jìn)度明確
1.1，連續(xù)
（1）橫條（Bar）
填充一個(gè)矩形，注意繪制的起點(diǎn)為屬性“進(jìn)度繪制范邊緣”的值。而矩形寬度為當(dāng)前進(jìn)度值除以100再乘以可繪制范圍。
簡而言之就是按百分比繪制矩形。
（2）圓餅（Pie）
填充一個(gè)扇形，除了繪制范圍起點(diǎn)外，需要注意的是起始角度。對于方法 FillPie 而言，以水平向右方向?yàn)?度。而我們實(shí)現(xiàn)的起始角度是在垂直向上方向，所以啟始角度要為270。
同上，繪制的解雇就是按百分比計(jì)算：當(dāng)前值/100*360。
（3）圓弧（Arc）
畫一段弧線，同上需要注意啟始角度要為270。同時(shí)還要注意的還有“弧線厚度”這一屬性，所以計(jì)算繪制范圍時(shí)要減去相應(yīng)的值。
同上，繪制的解雇就是按百分比計(jì)算：當(dāng)前值/100*360。
?
1.2，分段塊
（1）橫條（Bar）
?首先計(jì)算出當(dāng)前可繪制的寬度范圍，然后除以“分段塊寬度”，計(jì)算出一共可畫多少個(gè)“塊”，這里需要注意“分段塊寬度”是包含2/3的有顏色部分和1/3無顏色部分（充當(dāng)間隔），在前一節(jié)中有詳細(xì)講解。
然后依次將這些“塊”繪制即可。
（2）圓餅（Pie）
?同上，不過這里的“分段塊寬度”指的是角度，同樣計(jì)算出需要多少個(gè)“小扇形”，然后依次繪制即可。
（3）圓?。ˋrc）
??同上，不過這里的“分段塊寬度”指的是角度，同樣計(jì)算出需要多少個(gè)“小段弧線”，然后依次繪制即可。
?
1.3，兩段式
通過上圖我們可發(fā)現(xiàn)，兩段式就是將“連續(xù)”和“分段塊”結(jié)合起來，先繪制一遍“分段塊”再繪制一遍“連續(xù)”。
這里需要注意的一點(diǎn)是每一遍都只占50%，所以在計(jì)算相應(yīng)的范圍時(shí)要乘以2。
因?yàn)椤斑B續(xù)”和“分段塊”前面都以講過，此處便不再贅述。
?
1.4，螺旋
螺旋只有“橫條（Bar）”才支持，其本身是“分段塊”的變形，所以會使用“分段塊寬度”這一屬性。
在前節(jié)進(jìn)行過詳細(xì)講解，所以此處不再贅述。
?
2，進(jìn)度不明確（Marquee樣式）
雖然有多種Marquee樣式，但歸到最后無非三大類：位置變化、范圍變化、螺旋。
其中，“螺旋”在前節(jié)中詳細(xì)講解過，所以此處不再贅述。
無論“位置變化”還是“范圍變化”，都是通過定時(shí)器去按間隔循環(huán)改變相應(yīng)的值。而“勻速”效果和“緩動”效果則是在每個(gè)間隔變化的值是否相等而已。
關(guān)于勻速和緩動我前幾篇文章都有詳細(xì)講過，此處不再贅述。
?
（1）位置變化
?
通過上面這些圖，一目了然，位置變化，對于橫條（Bar）而言，就是改變起始位置；對于圓餅（Pie）和圓?。ˋrc）而言，則是改變起始角度。
??
（2）范圍變化
通過上面這些圖，一目了然，范圍變化，對于橫條（Bar）而言，就是使繪制范圍發(fā)生變化，準(zhǔn)確的說是寬度的變化；對于圓餅（Pie）和圓?。ˋrc）而言，則是繪制角度的大小變化。
?
（3）位置和范圍都發(fā)生變化
?
?
通過上面這些圖，一目了然，屬于前兩者的結(jié)合體。
?
?（四）其它說明
在實(shí)現(xiàn)時(shí)，我并沒有去限制圓餅（Pie）和圓?。ˋrc）一定得是正圓，也就是令其寬度和高度必須相等。
因?yàn)檫@樣可以實(shí)現(xiàn)一些比較好玩的效果，如下：
?
?
五、效果演示為了更好的展示出進(jìn)度條的特點(diǎn)，所以我們按下圖這樣構(gòu)造一個(gè)演示程序。
?
?
本文中大部分圖片和動圖都是使用本演示程序錄制的。
具體演示程序及源代碼工程在文末有下載，請下載后自動體驗(yàn)。
?
?
?六、結(jié)束語我們會發(fā)現(xiàn)Marquee樣式的動畫和我們常見的加載（Loading）動畫有些類似，實(shí)際上，加載動畫的實(shí)現(xiàn)方式正是本文中實(shí)現(xiàn)Marquee樣式時(shí)所使用的方式，所以后面我們會去實(shí)現(xiàn)“加載（Loading）控件”。
?
本文只是起一個(gè)拋磚引玉的作用，讀者不要被我的思路所限制，你可以盡情的去實(shí)現(xiàn)你想要的效果。
?
技術(shù)并沒有先進(jìn)和落后，只有合適與不合適。
所以，對自己掌握的知識多抱有一些信心，盡情釋放自己的想像力，并在實(shí)踐中提升自己。
?
?
七、源代碼及工程下載https://files.cnblogs.com/files/lesliexin/04,LProgressBar.7z
出處：https://www.cnblogs.com/lesliexin/p/13575517.html