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