[C#] (原創)一步一步教你自定義控制元件——04,ProgressBar(進度條)

leslie_xin發表於2020-11-05

一、前言

技術沒有先進與落後,只有合適與不合適。

本篇的自定義控制元件是:進度條(ProgressBar)。

進度條的實現方式多種多樣,主流的方式有:使用多張圖片去實現、使用1個或2個Panel放到UserControl上去實現、過載系統進度條去實現等等。

本次所實現的進度條仍是使用GDI+去實現。當然,如果只是實現最基本的扁平化的進度條,那完全不需要再寫本篇文章,因為直接小改下第一篇的LTrackBar就行了。

既然寫這篇文章,就是實現不一樣的、比較好玩和好看的進度條,如環形進度條、餅形進度條等等。

本篇使用的知識都是前幾篇中已經講過的,並沒有新的技術。但是卻附加了一些想像力,一些不拘一格、稍稍突破常規的想像力。

 

相信看完的你,一定會有所收穫。

本文地址:https://www.cnblogs.com/lesliexin/p/13575517.html


 

二、前期分析

(一)為什麼需要自定義進度條?

系統自帶的滾動條樣式太過單調,同時不夠“扁平化”,所以便去實現自己的滾動條。

 

(二)實現目標

1,支援三種樣式

(1)橫條(Bar)

 

(2)圓餅(Pie)

 

(3)圓弧(Arc)

 

 

2,支援顯示和隱藏百分比

(1)橫條(Bar)

 

(2)圓餅(Pie)

 

(3)圓弧(Arc)

 

 

3,支援多種進度形狀

(1)連續

 

(2)分段塊

 

(3)兩段式:先分段塊再連續

 

(4)螺旋

(注:只有“橫條”樣式時才支援螺旋形狀)

 

 

4,支援Marquee樣式

當進度無法確定時,便需要使用Marquee樣式,同系統進度條的“Marquee”樣式類似。

不過支援更多的Marquee樣式。

(1)左右擺動

 

(2)迴圈穿過

 

(3)往復(連續)

 

(4)劃過(連續)

 

(5)往復(分段塊)

 

(6)劃過(分段塊)

 

(7)螺旋

 

 

5,支援調整進度條各元素尺寸和顏色

(1)設定邊框厚度和顏色

 

(2)設定背景大小和顏色

 

(3)設定進度繪製位置和顏色

 

(4)設定進度文字顏色

 

(5)設定弧線厚度(僅樣式為“圓弧(Arc)”時有效)

 

(6)設定“分段塊”厚度(僅進度條形狀為“分段塊”時有效)

 

 


 

三、進度條拆解

看了上面的實現目標,是不是感覺眼花繚亂、無從下手?

下面我就對進度條進行拆分講解,一步一步來看上面的效果是怎麼實現的。

 

(一)組成元素

進度條由三個部分組成,分別是:進度邊框、背景

下面是各種樣式下,三個組成部分的拆分。

1,橫條(Bar)

 

2,圓餅(Pie)

 

3,圓弧(Arc)

 

 

(二)元素屬性

進度條的三個組成元素,都有著各自相關的屬性。

(注:因為“顏色”屬性是必備的,所以不再贅述。)

1,邊框

其相關屬性為:邊框的厚度

當“厚度”為0時,看起來進度條就沒有邊框;

當“厚度”超過控制元件高度的二分之一時,整個進度條就變成了邊框的顏色。

(注:因為是先繪製“背景”,再繪製“邊框”,所以是“整個進度條變成邊框的顏色”)

A,對於 “橫條(Bar)”,其邊框厚度如下圖所示:

B,對於“圓餅(Pie)”、“圓弧(Arc)”,其邊框厚度如下圖所示:

2,背景

其相關屬性為:背景的大小

背景的大小就是背景繪製的範圍,這裡用一個自造詞“收縮寬度”來進行描述。

當“收縮寬度”為0時,背景大小=控制元件本身大小;

當“收縮寬度”為x時,背景寬度=控制元件寬度-2*x,背景高度=控制元件高度-2*x;

當“收縮寬度”超過控制元件高度的二分之一時,背景高度=控制元件高度-2*(控制元件高度/2)=0,此時進度條將沒有了背景。

A,對於 “橫條(Bar)”,其收縮寬度如下圖所示:

B,對於“圓餅(Pie)”、“圓弧(Arc)”,其收縮寬度如下圖所示:

3,進度

其相關屬性有:進度繪製範圍、進度樣式

A,進度繪製範圍

顧名思義,就是進度可繪製的範圍,這裡用“繪製邊框距離”來進行描述。

當“繪製邊框距離”為0時,進度的繪製範圍=控制元件本身大小;

當“繪製邊框距離”為x時,進度的繪製起點:(x,x),繪製終點:(控制元件寬度-x,控制元件高度-x),所以繪製範圍=(控制元件寬度-2*x,控制元件高度-2*x);

當“繪製邊框距離”超過控制元件高度的二分之一時,進度的繪製高度將為0,也代表著沒有進度。

A,對於 “橫條(Bar)”,其繪製邊框距離如下圖所示:

B,對於“圓餅(Pie)”,其繪製邊框距離如下圖所示:

C,對於“圓弧(Arc)”,其繪製邊框距離如下圖所示:

 

B,進度樣式

進度樣式就是前節實現目標中各種進度的樣式,有連續的、有分段塊的、有螺旋的等等。

這此樣式大部分一看都知道如何實現的。

比如“連續”,在“橫條(Bar)”樣式中,就是填充一個矩形;在“圓餅(Pie)”中,就是填充一個扇形;在“圓弧(Arc)”中,就是畫一段弧線。

比如“分段塊”,在“橫條(Bar)”樣式中,就是等間隔填充多個矩形;在“圓餅(Pie)”中,就是等間隔填充一個扇形;在“圓弧(Arc)”中,就是等間隔畫一段弧線。

在這裡,我將詳細講解一個特殊的形狀:“螺旋”,因為“螺旋”樣式除了不太能直觀想像出來之外,還有不少細節需要處理。

因為只有“橫條(Bar)”樣式進度條有“螺旋”樣式,所以接下來的講解都是以“橫條(Bar)”為基礎進行講解的。

同時,為了避免干擾,前面的兩個屬性“邊框”和“背景”都將保持預設值,即:沒有邊框,背景大小=控制元件大小。“進度繪製範圍”也是預設值,即繪製範圍=控制元件大小。

(1)“螺旋”樣式實現講解

A,進度明確時

即進度是已知且確定的,比如5%,33%等等。其外觀樣式如下:

 

其示意圖如下:

 

其中藍色的平行四邊形就是“螺旋”,其本身是一個背景透明、上有多個藍色平行四邊形的圖片。

進度的增減實質上就是這個圖片在控制元件上的左右移動。

那麼,這個圖片要和控制元件大小相等,特別是寬度相等。但是在使用GDI+去生成這個圖片時,卻不能讓圖片寬度與控制元件寬度相等。

我們在往圖片繪製平行四邊行時,是從右往左依次繪製的,之所以從右側開始繪製,是為了保證進度條的右側樣式是固定的,固定在一個比較美觀的狀態。因為在進度變化時,即圖片左右移動時,我們目光的焦點是在右側,所以一個固定的右側樣式就比較重要,否則當控制元件寬度變化時,右側的樣式就隨之變化。

當圖片寬度與控制元件寬度相等時,會出現下面這種情況,即進度條的最右側下方有空白。如下圖所示:

 (其中上面圖形是實際繪製圖片,下面圖形是將圖片擷取,和進度條寬度相等後樣式)

所以我們令圖片的寬度=控制元件的寬度+1個平行四邊行的寬度。在繪製完圖片後,我們從中擷取出一個和控制元件寬度一樣的圖片,這樣,整體的樣式就比較好看。如下圖所示:
 (其中上面圖形是實際繪製圖片,下面圖形是將圖片擷取,和進度條寬度相等後樣式)

 

綜上,就是按照下圖所示的5步依次實現:

 

 

B,進度未知時

即進度是不確定的,就像系統進度條的Marquee樣式那樣。其外觀樣式如下:

 

同上,上方仍是一個背景透明、上有多個藍色平行四邊形的圖片。上圖的效果就是這個圖片在不段的迴圈移動。

具體示意如下,圖片不斷向右側移動,當右側超過一個平等四邊行時,圖片恢復原位,然後不斷迴圈。

 

通過上方的示意圖,我們發現一個特點,就是圖片的寬度不再等於(控制元件的寬度+1個平行四邊行的寬度),而是等於(控制元件的寬度+2個平行四邊行的寬度)。原因如下:

在畫示意圖時,為了方便直觀檢視,平行四邊形正好是兩個相對的直角三角行,而實際繪製時,很少會有這種樣式,大多都是兩個相對的鈍角三角行組成的平等四邊形的樣子,如下圖所示:

 

這種情況下,如果圖片的寬度=控制元件的寬度+1個平行四邊行的寬度,那麼在移動到最右側時和復位時都會出現額外的空白,如下圖所示:

 

所以,才會令:圖片的寬度=控制元件的寬度+2個平行四邊行的寬度。

 

(三)其它屬性

除了前面的與進度條元素直接相關的屬性外,還有一些其他屬性,這些屬性都是在某種特定樣式下才起有作用。

1,弧線寬度

在“圓弧(Arc)”樣式的進度條中,“進度”就是一段圓弧,所以在其他屬性外,還要有“弧線本身寬度”這樣一個屬性。

在預設情況下,弧線寬度=控制元件寬度/10,因為當進度達到100%時,弧線就變成了圓環,此時看起來有弧線的地方佔控制元件寬度的五分之一,是一個比較常規的寬度。

通過呼叫弧線寬度,可以實現一些特殊的效果。

 

 

2,分段塊寬度

在進度樣式為“分段塊”時,為了支援不同的分段寬度,所以要有本屬性。

為了繪製出更好的效果,“分段塊寬度”不僅僅是有顏色的那部分的寬度,而是為:有顏色部分的寬度+兩個顏色間隔。

經過除錯,發現當(顏色:間隔=2:1)時,外觀比較好看和自然。

所以,一個“分段塊寬度”=2/3有顏色寬度+1/3無顏色寬度。

因為“橫條(Bar)”、“圓餅(Pie)”、“圓弧(Arc)”都支援“分段塊”。所以在“橫條(Bar)”中,“分段塊寬度”指的就是寬度;而在“圓餅(Pie)”、“圓弧(Arc)”中,“分段塊寬度”指的是角度。

 


 

四、開始實現

(一)前期準備。

此處僅作提綱,具體操作見前篇。

新建類:LProgressBar.cs

新增繼承:Control(需要新增引用:System.Windows.Forms.dll)

修改可訪問性為:public

(二)新增屬性

1,進度值

進度值指的是當前的進度,這裡將進度範圍固定為:0~100

這樣的好處是方便計算和繪製,使用時也更加直觀。

2,邊框厚度

詳細見前節中的講解。

(注:我是先寫完的程式碼,然後再寫文章,有時在寫文章時會發現屬性的命名不太正規,比如“邊框厚度”這個屬性,用“BorderSize”更好,但是我在寫程式碼時我想的是“環繞一圈的線”,所以就成了下面圖中的“SurroundLineSize”,但是在寫文章時發現不好描述,就改成了“邊框厚度”,不過再去修改程式碼意義不大,重要的是技術思想本身。下同。)

3,邊框顏色

顧名思義,就是邊框的顏色。

4,背景收縮寬度

詳細見前節中的講解。

5,背景顏色

6,進度繪製範圍邊緣

詳細見前節中的講解。

7,弧線厚度

詳細見前節中的講解。

8, 進度顏色

進度顏色是進度本身的顏色。

9,分段塊寬度

詳細見前節中的講解。

10,進度樣式

進度樣式描述的是進度本身的外觀,如連續、分段塊、螺旋等等。

進度樣式是一個列舉,明細如下:

11,進度條型別

進度條型別指的是進度條的樣式外觀,如橫條、圓餅、圓弧等。

進度條型別是一個列舉,明細如下:

12,進度條模式

進度模式指的進度是明確的還是不明確的。

進度明確,比如當前進度是1%、45%等等。

進度不明確,比如載入某個檔案時一直在載入,但不知道載入了多少。也就是系統進度條的Marquee樣式。

進度條模式是一個列舉,明細如下:

13,Marquee迴圈一遍時間

 Marquee樣式時動畫的快慢。

 

14,Marquees樣式

Marquee樣式動畫。

 

該屬性是一個列舉,明細如下:

 

15,Marquee型別

Marquee樣式同樣是動畫,所以支援勻速和緩入緩出效果。

 

該屬性是一個列舉,明細如下:

 

16,進度文字型別

可以設定進度條是否顯示文字,以及是否顯示百分比。

 

該屬性是一個列舉,明細如下:

 

17,進度文字顏色

18,建構函式

這裡的建構函式中,除了使用了之前文章中固定的“雙緩衝”外,還額外設定了幾個屬性,這幾個屬性是為了讓控制元件支援透明,所以下面才可以令背景色和前景色為透明色。

這種情況下,整個控制元件就相當於一個完全透明的畫布,可以任由我們繪製。

(三)重寫方法

對於本進度條而言,只是用來指示進度資訊,所以不需要事件。只需要重寫最基本的OnPaint方法就行了。

不過,由於在OnPaint中要繪製的樣式以及型別太多,所以程式碼量較大,但是程式碼難度不大。我會先將OnPaint程式碼全部放上,然後著重講一下實現的原理。

而Marquee樣式本質上就是一個動畫效果,迴圈的繪製一些圖形或改變圖形的大小位置,所以我們使用一個定時器來進行觸發,定時的改變圖形或圖形大小位置。 

[C#] (原創)一步一步教你自定義控制元件——04,ProgressBar(進度條)
protected override void OnPaint(PaintEventArgs e)
{
    base.OnPaint(e);
    e.Graphics.SmoothingMode = SmoothingMode.HighQuality;

    //進度實際繪製寬度、高度
    float fRealWidth = Width - _DrawMargin * 2;
    float fRealHeight = Height - _DrawMargin * 2;

    float fRealLeftTop = _DrawMargin - 0.5f;
    if (fRealLeftTop < 0) fRealLeftTop = 0;

    //上下左右各留0.5個畫素,防止切邊
    bool bDrawSurroundLine = _SurroundLineSize > 0 ? true : false;
    bool bDrawInner = _ShrinkSize * 2 < Math.Min(Width, Height) ? true : false;
    float fSurroundLineSizeF = Convert.ToSingle(_SurroundLineSize);
    RectangleF rectInner = new RectangleF(_ShrinkSize, _ShrinkSize, (Width - 1) - _ShrinkSize * 2, (Height - 1) - _ShrinkSize * 2);
    RectangleF retcSurrondLine = new RectangleF(fSurroundLineSizeF / 2, fSurroundLineSizeF / 2, (Width - 1) - fSurroundLineSizeF, (Height - 1) - fSurroundLineSizeF);
    //弧線寬度為總寬度的十分之一,因為是圓弧,所以最終看起來是五分之一
    float fSurroundArcSize = _ArcSize > 0 ? _ArcSize : Width / 10;
    RectangleF retcSurrondArc = new RectangleF(fSurroundArcSize / 2 + fRealLeftTop, fSurroundArcSize / 2 + fRealLeftTop, (fRealWidth - 1) - fSurroundArcSize, (fRealHeight - 1) - fSurroundArcSize);

    SolidBrush sbInner = new SolidBrush(_ShrinkColor);
    SolidBrush sbFore = new SolidBrush(L_SliderColor);
    SolidBrush sbText = new SolidBrush(_TextColor);
    Pen penSurrondLine = new Pen(_SurroundLineColor, fSurroundLineSizeF);
    Pen penSurroundArc = new Pen(L_SliderColor, fSurroundArcSize);

    //滑塊寬度為總寬度的五分之一
    float fSlider = Convert.ToSingle(fRealWidth) / 5;
    if (_ProgressType != ProgressType.Bar)
    {
        //360/5
        fSlider = 72;
    }

    float fRange = 0;
    if (L_MarqueeStyle == MarqueeStyle.Swing) fRange = fRealWidth - fSlider;
    else if (L_MarqueeStyle == MarqueeStyle.Cross) fRange = fRealWidth + fSlider;
    else fRange = fRealWidth;

    float fBlockSize = _BlockSize;
    if (fBlockSize < 3) fBlockSize = 3.0f;
    if (_ProgressType == ProgressType.Bar)
    {
        if (fBlockSize > fRealWidth) fBlockSize = fRealWidth;
    }
    else
    {
        if (fBlockSize > 360.0f) fBlockSize = 360.0f;
    }

    #region Bar
    if (_ProgressType == ProgressType.Bar)
    {
        //畫內部
        if (bDrawInner)
        {
            e.Graphics.FillRectangle(sbInner, rectInner);
        }

        //畫線
        if (bDrawSurroundLine)
        {
            e.Graphics.DrawRectangle(penSurrondLine, retcSurrondLine.X, retcSurrondLine.Y, retcSurrondLine.Width, retcSurrondLine.Height);
        }

        if (_ProgressMode == ProgressMode.Known)
        {

            #region Continuous
            if (_ProgressStyle == ProgressStyle.Continuous)
            {
                //畫進度
                float fProgress = Convert.ToSingle(_Value) * fRealWidth / 100;
                e.Graphics.FillRectangle(sbFore, _DrawMargin - 0.5f, fRealLeftTop, fProgress, fRealHeight);
            }
            #endregion
            #region Blocks
            else if (_ProgressStyle == ProgressStyle.Blocks)
            {
                //獲取方塊數
                float fBlocks = Convert.ToSingle(fRealWidth) / fBlockSize;
                int iShowBlocks = Convert.ToInt32(fBlocks * _Value / 100);
                //畫進度
                for (int i = 0; i < iShowBlocks; i++)
                {
                    e.Graphics.FillRectangle(sbFore, i * fBlockSize + fRealLeftTop, fRealLeftTop, fBlockSize * 2 / 3, fRealHeight);
                }
            }
            #endregion
            #region Helical
            else if (_ProgressStyle == ProgressStyle.Helical)
            {
                float fProgress = Convert.ToSingle(_Value) * fRealWidth / 100;

                //這裡為了獲得更好看的效果,要多加1個Block
                float fBmpWidth = fRealWidth + fBlockSize;
                float fBlocks = fBmpWidth / fBlockSize;

                Bitmap bmp = new Bitmap(Convert.ToInt32(fBmpWidth), Convert.ToInt32(fRealHeight));
                GraphicsPath gp = new GraphicsPath();
                for (int i = 0; i < fBlocks; i++)
                {
                    gp.AddPolygon(new PointF[]
                    {
                    //top-right
                    new PointF(fBmpWidth - i * fBlockSize ,0),
                    //bottom-right
                    new PointF(fBmpWidth - i * fBlockSize - fBlockSize,fRealHeight),
                    //bottom-left
                    new PointF(fBmpWidth - i * fBlockSize - fBlockSize*5/3,fRealHeight),
                    //top-left
                    new PointF(fBmpWidth - i * fBlockSize - fBlockSize*2/3,0),

                    });
                    gp.CloseFigure();
                }
                gp.CloseAllFigures();

                Graphics g = Graphics.FromImage(bmp);
                g.SmoothingMode = SmoothingMode.HighQuality;
                g.FillPath(sbFore, gp);
                gp.Dispose();
                g.Dispose();
                e.Graphics.DrawImage(bmp, new RectangleF(fRealLeftTop, fRealLeftTop, fProgress, fRealHeight), new RectangleF(bmp.Width - fProgress - fBlockSize, 0, fProgress, bmp.Height), GraphicsUnit.Pixel);
                bmp.Dispose();
            }
            #endregion
            #region BlocksToContinuous
            else if (_ProgressStyle == ProgressStyle.BlocksToContinuous)
            {
                float fBlocks = Convert.ToSingle(fRealWidth) / fBlockSize;
                if (_Value <= 50)
                {
                    int iShowBlocks = Convert.ToInt32(fBlocks * _Value * 2 / 100);
                    //畫進度
                    for (int i = 0; i < iShowBlocks; i++)
                    {
                        e.Graphics.FillRectangle(sbFore, i * fBlockSize + fRealLeftTop, fRealLeftTop, fBlockSize * 2 / 3, fRealHeight);
                    }
                }
                else
                {
                    int iShowBlocks = Convert.ToInt32(fBlocks * ((_Value - 50f) * 2 / 100));
                    for (int i = iShowBlocks; i < Convert.ToInt32(fBlocks); i++)
                    {
                        e.Graphics.FillRectangle(sbFore, i * fBlockSize + fRealLeftTop, fRealLeftTop, fBlockSize * 2 / 3, fRealHeight);
                    }

                    //畫進度
                    float fProgress = Convert.ToSingle((_Value - 50) * 2) * fRealWidth / 100;
                    e.Graphics.FillRectangle(sbFore, fRealLeftTop, fRealLeftTop, fProgress, fRealHeight);

                }
            }
            #endregion
        }
        else
        {
            #region Marquee
            if (_ProgressStyle == ProgressStyle.Marquee)
            {
                if (L_MarqueeType == MarqueeType.SlowInSlowOut)
                {
                    if (L_MarqueeStyle == MarqueeStyle.Swing)
                    {
                        double fz = fRange * (Math.Sin((dMarqueeValue - 90) * Math.PI / 180) + 1) / 2;
                        e.Graphics.FillRectangle(sbFore, Convert.ToSingle(fz) + fRealLeftTop, fRealLeftTop, fSlider, fRealHeight);
                    }
                    else if (L_MarqueeStyle == MarqueeStyle.Cross)
                    {
                        double fz = fRange * (Math.Sin((dMarqueeValue - 90) * Math.PI / 180) + 1) / 2 - fSlider;
                        float fz2 = Convert.ToSingle(fz) + fRealLeftTop;
                        float fW = fSlider;
                        if (fz2 < fRealLeftTop)
                        {
                            fW = fz2 + fSlider - (fRealLeftTop);
                            fz2 = fRealLeftTop;
                        }
                        if (fz2 + fSlider > Width - (fRealLeftTop))
                        {
                            fW = Width - (fRealLeftTop) - fz2;
                        }
                        e.Graphics.FillRectangle(sbFore, fz2, fRealLeftTop, fW, fRealHeight);
                    }
                    else if (L_MarqueeStyle == MarqueeStyle.Reciprocation_Continuous)
                    {
                        double fz = fRange * (Math.Sin((dMarqueeValue - 90) * Math.PI / 180) + 1) / 2;
                        e.Graphics.FillRectangle(sbFore, fRealLeftTop, fRealLeftTop, Convert.ToSingle(fz), fRealHeight);
                    }
                    else if (L_MarqueeStyle == MarqueeStyle.Across_Continuous)
                    {
                        double fz = fRange * (Math.Sin((dMarqueeValue - 90) * Math.PI / 180) + 1) / 2;
                        if (!bAcrossed)
                        {
                            e.Graphics.FillRectangle(sbFore, fRealLeftTop, fRealLeftTop, Convert.ToSingle(fz), fRealHeight);
                        }
                        else
                        {
                            e.Graphics.FillRectangle(sbFore, Convert.ToSingle(fz) + fRealLeftTop, fRealLeftTop, fRealWidth - Convert.ToSingle(fz), fRealHeight);
                        }
                    }
                    else if (L_MarqueeStyle == MarqueeStyle.Reciprocation_Blocks)
                    {
                        double fz = fRange * (Math.Sin((dMarqueeValue - 90) * Math.PI / 180) + 1) / 2;
                        float fBlocks = Convert.ToSingle(fRealWidth) / fBlockSize;
                        float fNowBlocks = Convert.ToSingle(fz) / fBlockSize;

                        for (int i = 0; i < fNowBlocks; i++)
                        {
                            e.Graphics.FillRectangle(sbFore, i * fBlockSize + fRealLeftTop, fRealLeftTop, fBlockSize * 2 / 3, fRealHeight);
                        }
                    }
                    else
                    {
                        double fz = fRange * (Math.Sin((dMarqueeValue - 90) * Math.PI / 180) + 1) / 2;
                        float fBlocks = Convert.ToSingle(fRealWidth) / fBlockSize;
                        float fNowBlocks = Convert.ToSingle(fz) / fBlockSize;
                        if (!bAcrossed)
                        {
                            for (int i = 0; i < fNowBlocks; i++)
                            {
                                e.Graphics.FillRectangle(sbFore, i * fBlockSize + fRealLeftTop, fRealLeftTop, fBlockSize * 2 / 3, fRealHeight);
                            }
                        }
                        else
                        {
                            for (int i = Convert.ToInt32(fNowBlocks); i < fBlocks; i++)
                            {
                                e.Graphics.FillRectangle(sbFore, i * fBlockSize + fRealLeftTop, fRealLeftTop, fBlockSize * 2 / 3, fRealHeight);
                            }
                        }
                    }
                }
                else
                {
                    if (L_MarqueeStyle == MarqueeStyle.Swing)
                    {
                        e.Graphics.FillRectangle(sbFore, Convert.ToSingle(dMarqueeValue) + fRealLeftTop, fRealLeftTop, fSlider, fRealHeight);
                    }
                    else if (L_MarqueeStyle == MarqueeStyle.Cross)
                    {
                        float fz2 = Convert.ToSingle(dMarqueeValue) + fRealLeftTop;
                        float fW = fSlider;
                        if (fz2 < fRealLeftTop)
                        {
                            fW = fz2 + fSlider - (fRealLeftTop);
                            fz2 = fRealLeftTop;
                        }
                        if (fz2 + fSlider > Width - (fRealLeftTop))
                        {
                            fW = Width - (fRealLeftTop) - fz2;
                        }
                        e.Graphics.FillRectangle(sbFore, fz2, fRealLeftTop, fW, fRealHeight);
                    }
                    else if (L_MarqueeStyle == MarqueeStyle.Reciprocation_Continuous)
                    {
                        e.Graphics.FillRectangle(sbFore, fRealLeftTop, fRealLeftTop, Convert.ToSingle(dMarqueeValue), fRealHeight);
                    }
                    else if (L_MarqueeStyle == MarqueeStyle.Across_Continuous)
                    {
                        if (!bAcrossed)
                        {
                            e.Graphics.FillRectangle(sbFore, fRealLeftTop, fRealLeftTop, Convert.ToSingle(dMarqueeValue), fRealHeight);
                        }
                        else
                        {
                            e.Graphics.FillRectangle(sbFore, Convert.ToSingle(dMarqueeValue) + fRealLeftTop, fRealLeftTop, fRealWidth - Convert.ToSingle(dMarqueeValue), fRealHeight);
                        }
                    }
                    else if (L_MarqueeStyle == MarqueeStyle.Reciprocation_Blocks)
                    {
                        float fBlocks = Convert.ToSingle(fRealWidth) / fBlockSize;
                        float fNowBlocks = Convert.ToSingle(dMarqueeValue) / fBlockSize;

                        for (int i = 0; i < fNowBlocks; i++)
                        {
                            e.Graphics.FillRectangle(sbFore, i * fBlockSize + fRealLeftTop, fRealLeftTop, fBlockSize * 2 / 3, fRealHeight);
                        }
                    }
                    else
                    {
                        float fBlocks = Convert.ToSingle(fRealWidth) / fBlockSize;
                        float fNowBlocks = Convert.ToSingle(dMarqueeValue) / fBlockSize;
                        if (!bAcrossed)
                        {
                            for (int i = 0; i < fNowBlocks; i++)
                            {
                                e.Graphics.FillRectangle(sbFore, i * fBlockSize + fRealLeftTop, fRealLeftTop, fBlockSize * 2 / 3, fRealHeight);
                            }
                        }
                        else
                        {
                            for (int i = Convert.ToInt32(fNowBlocks); i < fBlocks; i++)
                            {
                                e.Graphics.FillRectangle(sbFore, i * fBlockSize + fRealLeftTop, fRealLeftTop, fBlockSize * 2 / 3, fRealHeight);
                            }
                        }
                    }
                }
            }
            #endregion
            #region Helical
            else if (_ProgressStyle == ProgressStyle.Helical)
            {                        
                //這裡為了獲得更好看的效果,要多加2個Block
                float fBmpWidth = fRealWidth + fBlockSize*2;
                float fBlocks = fBmpWidth / fBlockSize;

                Bitmap bmp = new Bitmap(Convert.ToInt32(fBmpWidth), Convert.ToInt32(fRealHeight));
                GraphicsPath gp = new GraphicsPath();
                for (int i = 0; i < fBlocks; i++)
                {
                    gp.AddPolygon(new PointF[]
                    {
                    //top-right
                    new PointF(fBmpWidth - i * fBlockSize ,0),
                    //bottom-right
                    new PointF(fBmpWidth - i * fBlockSize - fBlockSize,fRealHeight),
                    //bottom-left
                    new PointF(fBmpWidth - i * fBlockSize - fBlockSize*5/3,fRealHeight),
                    //top-left
                    new PointF(fBmpWidth - i * fBlockSize - fBlockSize*2/3,0),

                    });
                    gp.CloseFigure();
                }
                gp.CloseAllFigures();

                Graphics g = Graphics.FromImage(bmp);
                g.SmoothingMode = SmoothingMode.HighQuality;
                g.FillPath(sbFore, gp);
                gp.Dispose();
                g.Dispose();
                e.Graphics.DrawImage(bmp, new RectangleF(fRealLeftTop, fRealLeftTop, fRealWidth, fRealHeight), new RectangleF(Convert.ToSingle(dMarqueeValue) + fBlockSize, 0, fRealWidth, bmp.Height), GraphicsUnit.Pixel);
                bmp.Dispose();
            }
            #endregion
        }
    }
    #endregion
    #region Arc
    else if (_ProgressType == ProgressType.Arc)
    {
        //畫內部
        if (bDrawInner)
        {
            e.Graphics.FillEllipse(sbInner, rectInner);
        }

        //畫線
        if (bDrawSurroundLine)
        {
            e.Graphics.DrawEllipse(penSurrondLine, retcSurrondLine.X, retcSurrondLine.Y, retcSurrondLine.Width, retcSurrondLine.Height);
        }

        #region Continuous
        if (_ProgressStyle == ProgressStyle.Continuous)
        {
            float fProgress = Convert.ToSingle(_Value * 3.6);
            if (fProgress > 0)
            {
                e.Graphics.DrawArc(penSurroundArc, retcSurrondArc, 270, fProgress);
            }
        }
        #endregion
        #region Blocks
        else if (_ProgressStyle == ProgressStyle.Blocks)
        {
            //獲取方塊數
            float fBlocks = 360.0f / fBlockSize;
            int iShowBlocks = Convert.ToInt32(fBlocks * _Value / 100);
            //畫進度
            for (int i = 0; i < iShowBlocks; i++)
            {
                //對於DrawArc而言,會產生在超過360度而導致重疊,所以需要判斷,同時使用360-1,以防止相接。
                //後續可以再進行優化:如果所分配的不正好是3的倍數,則取一相近值,使其能被3整除。
                e.Graphics.DrawArc(penSurroundArc, retcSurrondArc, 270 + i * fBlockSize, fBlockSize * 2 / 3 > (359.0f - i * fBlockSize) ? (359.0f - i * fBlockSize) : fBlockSize * 2 / 3);
            }
        }
        #endregion
        #region BlocksToContinuous
        else if (_ProgressStyle == ProgressStyle.BlocksToContinuous)
        {
            //獲取方塊數
            float fBlocks = 360.0f / fBlockSize;
            if (_Value <= 50)
            {
                int iShowBlocks = Convert.ToInt32(fBlocks * _Value * 2 / 100);
                //畫進度
                for (int i = 0; i < iShowBlocks; i++)
                {
                    //對於DrawArc而言,會產生在超過360度而導致重疊,所以需要判斷,同時使用360-1,以防止相接。
                    //後續可以再進行優化:如果所分配的不正好是3的倍數,則取一相近值,使其能被3整除。
                    e.Graphics.DrawArc(penSurroundArc, retcSurrondArc, 270 + i * fBlockSize, fBlockSize * 2 / 3 > (359.0f - i * fBlockSize) ? (359.0f - i * fBlockSize) : fBlockSize * 2 / 3);
                }
            }
            else
            {
                int iShowBlocks = Convert.ToInt32(fBlocks * (_Value - 50f) * 2 / 100);
                //畫進度
                for (int i = iShowBlocks; i < Convert.ToInt32(fBlocks); i++)
                {
                    //對於DrawArc而言,會產生在超過360度而導致重疊,所以需要判斷,同時使用360-1,以防止相接。
                    //後續可以再進行優化:如果所分配的不正好是3的倍數,則取一相近值,使其能被3整除。
                    e.Graphics.DrawArc(penSurroundArc, retcSurrondArc, 270 + i * fBlockSize, fBlockSize * 2 / 3 > (359.0f - i * fBlockSize) ? (359.0f - i * fBlockSize) : fBlockSize * 2 / 3);
                }

                float fProgress = (_Value - 50f) * 2 * 3.6f;
                if (fProgress > 0)
                {
                    e.Graphics.DrawArc(penSurroundArc, retcSurrondArc, 270, fProgress);
                }
            }
        }
        #endregion
        #region Marquee
        else if (_ProgressStyle == ProgressStyle.Marquee)
        {
            if (L_MarqueeType == MarqueeType.SlowInSlowOut)
            {
                if (L_MarqueeStyle == MarqueeStyle.Cross || L_MarqueeStyle == MarqueeStyle.Swing)
                {
                    double fz = 360 * (Math.Sin((dMarqueeValue - 90) * Math.PI / 180) + 1) / 2 + 270 - fSlider / 2;
                    e.Graphics.DrawArc(penSurroundArc, retcSurrondArc, Convert.ToSingle(fz), fSlider);
                }
                else if (L_MarqueeStyle == MarqueeStyle.Across_Continuous)
                {
                    double fz = 360 * (Math.Sin((dMarqueeValue - 90) * Math.PI / 180) + 1) / 2;
                    if (!bAcrossed)
                    {
                        e.Graphics.DrawArc(penSurroundArc, retcSurrondArc, 270, Convert.ToSingle(fz));
                    }
                    else
                    {
                        e.Graphics.DrawArc(penSurroundArc, retcSurrondArc, 270 + Convert.ToSingle(fz), Convert.ToSingle(360 - fz));
                    }
                }
                else if (L_MarqueeStyle == MarqueeStyle.Reciprocation_Continuous)
                {
                    double fz = 360 * (Math.Sin((dMarqueeValue - 90) * Math.PI / 180) + 1) / 2;
                    e.Graphics.DrawArc(penSurroundArc, retcSurrondArc, 270, Convert.ToSingle(fz));
                }
                else if (L_MarqueeStyle == MarqueeStyle.Across_Blocks)
                {
                    double fz = 360 * (Math.Sin((dMarqueeValue - 90) * Math.PI / 180) + 1) / 2;
                    float fBlocks = Convert.ToSingle(fz / fBlockSize);
                    float fAllBlocks = 360.0f / fBlockSize;
                    if (!bAcrossed)
                    {
                        for (int i = 0; i < fBlocks; i++)
                        {
                            e.Graphics.DrawArc(penSurroundArc, retcSurrondArc, 270 + i * fBlockSize, fBlockSize * 2 / 3 > (359.0f - i * fBlockSize) ? (359.0f - i * fBlockSize) : fBlockSize * 2 / 3);
                        }
                    }
                    else
                    {
                        for (float i = fAllBlocks - 1; i >= fBlocks; i--)
                        {
                            e.Graphics.DrawArc(penSurroundArc, retcSurrondArc, 270 + i * fBlockSize, fBlockSize * 2 / 3 > (359.0f - i * fBlockSize) ? (359.0f - i * fBlockSize) : fBlockSize * 2 / 3);
                        }
                    }
                }
                else
                {
                    double fz = 360 * (Math.Sin((dMarqueeValue - 90) * Math.PI / 180) + 1) / 2;
                    float fBlocks = Convert.ToSingle(fz / fBlockSize);

                    for (int i = 0; i < fBlocks; i++)
                    {
                        e.Graphics.DrawArc(penSurroundArc, retcSurrondArc, 270 + i * fBlockSize, fBlockSize * 2 / 3 > (359.0f - i * fBlockSize) ? (359.0f - i * fBlockSize) : fBlockSize * 2 / 3);
                    }

                }

            }
            else
            {
                if (L_MarqueeStyle == MarqueeStyle.Cross || L_MarqueeStyle == MarqueeStyle.Swing)
                {
                    e.Graphics.DrawArc(penSurroundArc, retcSurrondArc, Convert.ToSingle(dMarqueeValue), fSlider);
                }
                else if (L_MarqueeStyle == MarqueeStyle.Across_Continuous)
                {
                    if (!bAcrossed)
                    {
                        e.Graphics.DrawArc(penSurroundArc, retcSurrondArc, 270, Convert.ToSingle(dMarqueeValue));
                    }
                    else
                    {
                        e.Graphics.DrawArc(penSurroundArc, retcSurrondArc, 270 + Convert.ToSingle(dMarqueeValue), Convert.ToSingle(360 - dMarqueeValue));
                    }
                }
                else if (L_MarqueeStyle == MarqueeStyle.Reciprocation_Continuous)
                {
                    e.Graphics.DrawArc(penSurroundArc, retcSurrondArc, 270, Convert.ToSingle(dMarqueeValue));
                }
                else if (L_MarqueeStyle == MarqueeStyle.Across_Blocks)
                {
                    float fBlocks = Convert.ToSingle(dMarqueeValue / fBlockSize);
                    float fAllBlocks = 360.0f / fBlockSize;
                    if (!bAcrossed)
                    {
                        for (int i = 0; i < fBlocks; i++)
                        {
                            e.Graphics.DrawArc(penSurroundArc, retcSurrondArc, 270 + i * fBlockSize, fBlockSize * 2 / 3 > (359.0f - i * fBlockSize) ? (359.0f - i * fBlockSize) : fBlockSize * 2 / 3);
                        }
                    }
                    else
                    {
                        for (float i = fAllBlocks - 1; i >= fBlocks; i--)
                        {
                            e.Graphics.DrawArc(penSurroundArc, retcSurrondArc, 270 + i * fBlockSize, fBlockSize * 2 / 3 > (359.0f - i * fBlockSize) ? (359.0f - i * fBlockSize) : fBlockSize * 2 / 3);
                        }
                    }
                }
                else
                {
                    float fBlocks = Convert.ToSingle(dMarqueeValue / fBlockSize);
                    for (int i = 0; i < fBlocks; i++)
                    {
                        e.Graphics.DrawArc(penSurroundArc, retcSurrondArc, 270 + i * fBlockSize, fBlockSize * 2 / 3 > (359.0f - i * fBlockSize) ? (359.0f - i * fBlockSize) : fBlockSize * 2 / 3);
                    }
                }
            }

        }
        #endregion
    }
    #endregion
    #region Pie
    else if (_ProgressType == ProgressType.Pie)
    {
        //畫內部
        if (bDrawInner)
        {
            e.Graphics.FillEllipse(sbInner, rectInner);
        }

        //畫線
        if (bDrawSurroundLine)
        {
            e.Graphics.DrawEllipse(penSurrondLine, retcSurrondLine.X, retcSurrondLine.Y, retcSurrondLine.Width, retcSurrondLine.Height);
        }

        #region Continuous
        if (_ProgressStyle == ProgressStyle.Continuous)
        {
            //畫進度
            //360/100;
            float fProgress = Convert.ToSingle(_Value * 3.6);
            if (fProgress > 0)
            {
                //如果不進行fProgress>0的判斷,在設計器調整大小時如果處於其它控制元件上方時會出來異常,導致繪製失敗,雖然仍可以進行編譯和使用。
                e.Graphics.FillPie(sbFore, fRealLeftTop, fRealLeftTop, fRealWidth, fRealHeight, 270, fProgress);
            }
        }
        #endregion
        #region Blocks
        else if (_ProgressStyle == ProgressStyle.Blocks)
        {
            //獲取方塊數
            float fBlocks = 360.0f / fBlockSize;
            int iShowBlocks = Convert.ToInt32(fBlocks * _Value / 100);
            //畫進度
            for (int i = 0; i < iShowBlocks; i++)
            {
                //對於DrawArc而言,會產生在超過360度而導致重疊,所以需要判斷,同時使用360-1,以防止相接。
                //後續可以再進行優化:如果所分配的不正好是3的倍數,則取一相近值,使其能被3整除。
                e.Graphics.FillPie(sbFore, fRealLeftTop, fRealLeftTop, fRealWidth, fRealHeight, 270 + i * fBlockSize, fBlockSize * 2 / 3 > (359.0f - i * fBlockSize) ? (359.0f - i * fBlockSize) : fBlockSize * 2 / 3);
            }
        }
        #endregion
        #region 
        else if (_ProgressStyle == ProgressStyle.BlocksToContinuous)
        {
            //獲取方塊數
            float fBlocks = 360.0f / fBlockSize;
            if (_Value <= 50)
            {
                int iShowBlocks = Convert.ToInt32(fBlocks * _Value * 2 / 100);
                //畫進度
                for (int i = 0; i < iShowBlocks; i++)
                {
                    //對於DrawArc而言,會產生在超過360度而導致重疊,所以需要判斷,同時使用360-1,以防止相接。
                    //後續可以再進行優化:如果所分配的不正好是3的倍數,則取一相近值,使其能被3整除。
                    e.Graphics.FillPie(sbFore, fRealLeftTop, fRealLeftTop, fRealWidth, fRealHeight, 270 + i * fBlockSize, fBlockSize * 2 / 3 > (359.0f - i * fBlockSize) ? (359.0f - i * fBlockSize) : fBlockSize * 2 / 3);
                }
            }
            else
            {
                int iShowBlocks = Convert.ToInt32(fBlocks * (_Value - 50f) * 2 / 100);
                //畫進度
                for (int i = iShowBlocks; i < Convert.ToInt32(fBlocks); i++)
                {
                    //對於DrawArc而言,會產生在超過360度而導致重疊,所以需要判斷,同時使用360-1,以防止相接。
                    //後續可以再進行優化:如果所分配的不正好是3的倍數,則取一相近值,使其能被3整除。
                    e.Graphics.FillPie(sbFore, fRealLeftTop, fRealLeftTop, fRealWidth, fRealHeight, 270 + i * fBlockSize, fBlockSize * 2 / 3 > (359.0f - i * fBlockSize) ? (359.0f - i * fBlockSize) : fBlockSize * 2 / 3);
                }

                //畫進度
                //360/100;
                float fProgress = (_Value - 50f) * 2 * 3.6f;
                if (fProgress > 0)
                {
                    //如果不進行fProgress>0的判斷,在設計器調整大小時如果處於其它控制元件上方時會出來異常,導致繪製失敗,雖然仍可以進行編譯和使用。
                    e.Graphics.FillPie(sbFore, fRealLeftTop, fRealLeftTop, fRealWidth, fRealHeight, 270, fProgress);
                }
            }
        }
        #endregion
        #region Marquee
        else if (_ProgressStyle == ProgressStyle.Marquee)
        {
            if (L_MarqueeType == MarqueeType.SlowInSlowOut)
            {
                if (L_MarqueeStyle == MarqueeStyle.Cross || L_MarqueeStyle == MarqueeStyle.Swing)
                {
                    double fz = 360 * (Math.Sin((dMarqueeValue - 90) * Math.PI / 180) + 1) / 2 + 270 - fSlider / 2;
                    e.Graphics.FillPie(sbFore, fRealLeftTop, fRealLeftTop, fRealWidth, fRealHeight, Convert.ToSingle(fz), fSlider);
                }
                else if (L_MarqueeStyle == MarqueeStyle.Across_Continuous)
                {
                    double fz = 360 * (Math.Sin((dMarqueeValue - 90) * Math.PI / 180) + 1) / 2;
                    if (!bAcrossed)
                    {
                        e.Graphics.FillPie(sbFore, fRealLeftTop, fRealLeftTop, fRealWidth, fRealHeight, 270, Convert.ToSingle(fz));
                    }
                    else
                    {
                        e.Graphics.FillPie(sbFore, fRealLeftTop, fRealLeftTop, fRealWidth, fRealHeight, 270 + Convert.ToSingle(fz), Convert.ToSingle(360 - fz));
                    }
                }
                else if (L_MarqueeStyle == MarqueeStyle.Reciprocation_Continuous)
                {
                    double fz = 360 * (Math.Sin((dMarqueeValue - 90) * Math.PI / 180) + 1) / 2;
                    e.Graphics.FillPie(sbFore, fRealLeftTop, fRealLeftTop, fRealWidth, fRealHeight, 270, Convert.ToSingle(fz));
                }
                else if (L_MarqueeStyle == MarqueeStyle.Across_Blocks)
                {
                    double fz = 360 * (Math.Sin((dMarqueeValue - 90) * Math.PI / 180) + 1) / 2;
                    float fBlocks = Convert.ToSingle(fz / fBlockSize);
                    float fAllBlocks = 360.0f / fBlockSize;
                    if (!bAcrossed)
                    {
                        for (int i = 0; i < fBlocks; i++)
                        {
                            e.Graphics.FillPie(sbFore, fRealLeftTop, fRealLeftTop, fRealWidth, fRealHeight, 270 + i * fBlockSize, fBlockSize * 2 / 3 > (359.0f - i * fBlockSize) ? (359.0f - i * fBlockSize) : fBlockSize * 2 / 3);
                        }
                    }
                    else
                    {
                        for (float i = fAllBlocks - 1; i >= fBlocks; i--)
                        {
                            e.Graphics.FillPie(sbFore, fRealLeftTop, fRealLeftTop, fRealWidth, fRealHeight, 270 + i * fBlockSize, fBlockSize * 2 / 3 > (359.0f - i * fBlockSize) ? (359.0f - i * fBlockSize) : fBlockSize * 2 / 3);
                        }
                    }
                }
                else
                {
                    double fz = 360 * (Math.Sin((dMarqueeValue - 90) * Math.PI / 180) + 1) / 2;
                    float fBlocks = Convert.ToSingle(fz / fBlockSize);

                    for (int i = 0; i < fBlocks; i++)
                    {
                        e.Graphics.FillPie(sbFore, fRealLeftTop, fRealLeftTop, fRealWidth, fRealHeight, 270 + i * fBlockSize, fBlockSize * 2 / 3 > (359.0f - i * fBlockSize) ? (359.0f - i * fBlockSize) : fBlockSize * 2 / 3);
                    }

                }
            }
            else
            {
                if (L_MarqueeStyle == MarqueeStyle.Cross || L_MarqueeStyle == MarqueeStyle.Swing)
                {
                    e.Graphics.FillPie(sbFore, fRealLeftTop, fRealLeftTop, fRealWidth, fRealHeight, Convert.ToSingle(dMarqueeValue), fSlider);
                }
                else if (L_MarqueeStyle == MarqueeStyle.Across_Continuous)
                {
                    if (!bAcrossed)
                    {
                        e.Graphics.FillPie(sbFore, fRealLeftTop, fRealLeftTop, fRealWidth, fRealHeight, 270, Convert.ToSingle(dMarqueeValue));
                    }
                    else
                    {
                        e.Graphics.FillPie(sbFore, fRealLeftTop, fRealLeftTop, fRealWidth, fRealHeight, 270 + Convert.ToSingle(dMarqueeValue), Convert.ToSingle(360 - dMarqueeValue));
                    }
                }
                else if (L_MarqueeStyle == MarqueeStyle.Reciprocation_Continuous)
                {
                    e.Graphics.FillPie(sbFore, fRealLeftTop, fRealLeftTop, fRealWidth, fRealHeight, 270, Convert.ToSingle(dMarqueeValue));
                }
                else if (L_MarqueeStyle == MarqueeStyle.Across_Blocks)
                {
                    float fBlocks = Convert.ToSingle(dMarqueeValue / fBlockSize);
                    float fAllBlocks = 360.0f / fBlockSize;
                    if (!bAcrossed)
                    {
                        for (int i = 0; i < fBlocks; i++)
                        {
                            e.Graphics.FillPie(sbFore, fRealLeftTop, fRealLeftTop, fRealWidth, fRealHeight, 270 + i * fBlockSize, fBlockSize * 2 / 3 > (359.0f - i * fBlockSize) ? (359.0f - i * fBlockSize) : fBlockSize * 2 / 3);
                        }
                    }
                    else
                    {
                        for (float i = fAllBlocks - 1; i >= fBlocks; i--)
                        {
                            e.Graphics.FillPie(sbFore, fRealLeftTop, fRealLeftTop, fRealWidth, fRealHeight, 270 + i * fBlockSize, fBlockSize * 2 / 3 > (359.0f - i * fBlockSize) ? (359.0f - i * fBlockSize) : fBlockSize * 2 / 3);
                        }
                    }
                }
                else
                {
                    float fBlocks = Convert.ToSingle(dMarqueeValue / fBlockSize);
                    for (int i = 0; i < fBlocks; i++)
                    {
                        e.Graphics.FillPie(sbFore, fRealLeftTop, fRealLeftTop, fRealWidth, fRealHeight, 270 + i * fBlockSize, fBlockSize * 2 / 3 > (359.0f - i * fBlockSize) ? (359.0f - i * fBlockSize) : fBlockSize * 2 / 3);
                    }
                }
            }

        }
        #endregion
    }
    #endregion

    #region Text

    if (_ProgressText != ProgressText.None)
    {
        if (_ProgressStyle != ProgressStyle.Marquee)
        {
            string sText = _ProgressText == ProgressText.Number ? _Value.ToString() : _Value.ToString() + "%";
            SizeF sizeText = e.Graphics.MeasureString(sText, Font);
            float fx = (Width - sizeText.Width) / 2f;
            float fy = (Height - sizeText.Height) / 2f;
            e.Graphics.DrawString(sText, Font, _TextColor == Color.Empty ? sbFore : sbText, fx, fy);
        }
    }

    #endregion

    sbInner.Dispose();
    sbFore.Dispose();
    sbText.Dispose();
}
OnPaint
[C#] (原創)一步一步教你自定義控制元件——04,ProgressBar(進度條)
private void TTimer_Tick(object sender, EventArgs e)
{
    //進度實際繪製寬度、高度
    float fRealWidth = Width - _DrawMargin * 2;
    float fRealHeight = Height - _DrawMargin * 2;

    float fSlider = Convert.ToSingle(fRealWidth) / 5;
    if (_ProgressType != ProgressType.Bar)
    {
        //360/5
        fSlider = 72;
    }

    float fRange = 0;
    if (L_MarqueeStyle == MarqueeStyle.Swing) fRange = fRealWidth - fSlider;
    else if (L_MarqueeStyle == MarqueeStyle.Cross) fRange = fRealWidth + fSlider;
    else fRange = fRealWidth;

    double dStep = Convert.ToDouble(L_MarqueeTime) / 10;
    double dMarqueePer = 180.0 / dStep;
    if (L_MarqueeType == MarqueeType.Even)
    {
        if (_ProgressType == ProgressType.Bar)
        {
            dMarqueePer = fRange / dStep;
        }
        else
        {
            dMarqueePer = 360.0 / dStep;
        }
    }

    double dPeriod = 180;
    if (L_MarqueeStyle == MarqueeStyle.Swing || L_MarqueeStyle == MarqueeStyle.Reciprocation_Blocks || L_MarqueeStyle == MarqueeStyle.Reciprocation_Continuous) dPeriod = 360;

    if (_ProgressType == ProgressType.Bar)
    {
        if (_ProgressStyle == ProgressStyle.Marquee)
        {
            if (L_MarqueeType == MarqueeType.SlowInSlowOut)
            {
                if (dMarqueeValue > dPeriod)
                {
                    bAcrossed = !bAcrossed;
                    dMarqueeValue = 0;
                }
                dMarqueeValue += dMarqueePer;
                Invalidate();
            }
            else
            {
                if (L_MarqueeStyle == MarqueeStyle.Cross)
                {
                    bToRight = true;
                    if (dMarqueeValue > fRange) dMarqueeValue = -fSlider;
                }
                else if (L_MarqueeStyle == MarqueeStyle.Across_Blocks || L_MarqueeStyle == MarqueeStyle.Across_Continuous)
                {
                    bToRight = true;
                    if (dMarqueeValue > fRange)
                    {
                        bAcrossed = !bAcrossed;
                        dMarqueeValue = 0;
                    }
                }
                else
                {
                    if (dMarqueeValue > fRange) bToRight = false;
                    if (dMarqueeValue < 0) bToRight = true;
                }
                dMarqueeValue = bToRight ? dMarqueeValue + dMarqueePer : dMarqueeValue - dMarqueePer;
                Invalidate();
            }
        }
        else
        {
            if (dMarqueeValue > 0) dMarqueeValue = 0;
            dMarqueeValue -= 1;
            if (dMarqueeValue <-_BlockSize) dMarqueeValue = 0;                   
            Invalidate();
        }
    }
    else if (_ProgressType == ProgressType.Arc || _ProgressType == ProgressType.Pie)
    {
        //為了更符合直觀認識,即:轉到頂部時速度最變到最慢,到最底部時速度加到最快,所以需要從270度開始。
        if (L_MarqueeType == MarqueeType.SlowInSlowOut)
        {
            if (dMarqueeValue > dPeriod)
            {
                bAcrossed = !bAcrossed;
                dMarqueeValue = 0;
            }
            dMarqueeValue += dMarqueePer;
            Invalidate();
        }
        else
        {
            if (L_MarqueeStyle == MarqueeStyle.Cross)
            {
                bToRight = true;
                if (dMarqueeValue > 360) dMarqueeValue = 0;
            }
            else if (L_MarqueeStyle == MarqueeStyle.Across_Blocks || L_MarqueeStyle == MarqueeStyle.Across_Continuous)
            {
                bToRight = true;
                if (dMarqueeValue > 360)
                {
                    bAcrossed = !bAcrossed;
                    dMarqueeValue = 0;
                }
            }
            else if (L_MarqueeStyle == MarqueeStyle.Reciprocation_Blocks || L_MarqueeStyle == MarqueeStyle.Reciprocation_Continuous)
            {
                if (dMarqueeValue > 360) bToRight = false;
                if (dMarqueeValue < 0) bToRight = true;
            }
            else
            {
                if (dMarqueeValue > 270 - fSlider / 2) bToRight = false;
                if (dMarqueeValue < -90 - fSlider / 2) bToRight = true;
            }

            dMarqueeValue = bToRight ? dMarqueeValue + dMarqueePer : dMarqueeValue - dMarqueePer;
            Invalidate();
        }
    }

}
Timer_Tick

 

畫進度條,其實就是將進度條的三個組成部分——背景、邊框、進度——分別繪製出來。

1,背景

(1)橫條(Bar)

填充一個矩形,這裡的矩形範圍是控制元件範圍減去“背景收縮寬度”後的範圍。

(2)圓餅(Pie)和圓弧(Arc)

填充一個圓形,同樣範圍是控制元件範圍減去“背景收縮寬度”後的範圍。

2,邊框

(1)橫條(Bar)

繪製一個矩形框,畫筆寬度就是邊框寬度,注意繪製的範圍,包含起點和寬高,寬高是要分別減去一半的邊框寬度的,因為繪製畫筆時,是從畫筆寬度中間作畫。

(2)圓餅(Pie)和圓弧(Arc)

繪製一個圓,畫筆寬度就是邊框寬度。同樣需要注意繪製的範圍,具體同上。

3,進度

這是實現時最複雜的地方,難度並不大,主要是要繪製的效果太多了。

在畫進度時要分兩種情況,一種是進度明確的,一種是進度不明確的(Marquee樣式)。

在每種情況中,進度都有多種樣式,比如連續、分段塊等等。

(1),進度明確

1.1,連續

(1)橫條(Bar)

填充一個矩形,注意繪製的起點為屬性“進度繪製範邊緣”的值。而矩形寬度為當前進度值除以100再乘以可繪製範圍。

簡而言之就是按百分比繪製矩形。

(2)圓餅(Pie)

填充一個扇形,除了繪製範圍起點外,需要注意的是起始角度。對於方法 FillPie 而言,以水平向右方向為0度。而我們實現的起始角度是在垂直向上方向,所以啟始角度要為270。

同上,繪製的解僱就是按百分比計算:當前值/100*360。

(3)圓弧(Arc)

畫一段弧線,同上需要注意啟始角度要為270。同時還要注意的還有“弧線厚度”這一屬性,所以計算繪製範圍時要減去相應的值。

同上,繪製的解僱就是按百分比計算:當前值/100*360。

 

1.2,分段塊

(1)橫條(Bar)

 首先計算出當前可繪製的寬度範圍,然後除以“分段塊寬度”,計算出一共可畫多少個“塊”,這裡需要注意“分段塊寬度”是包含2/3的有顏色部分和1/3無顏色部分(充當間隔),在前一節中有詳細講解。

然後依次將這些“塊”繪製即可。

(2)圓餅(Pie)

 同上,不過這裡的“分段塊寬度”指的是角度,同樣計算出需要多少個“小扇形”,然後依次繪製即可。

(3)圓弧(Arc)

  同上,不過這裡的“分段塊寬度”指的是角度,同樣計算出需要多少個“小段弧線”,然後依次繪製即可。

 

1.3,兩段式


通過上圖我們可發現,兩段式就是將“連續”和“分段塊”結合起來,先繪製一遍“分段塊”再繪製一遍“連續”。

這裡需要注意的一點是每一遍都只佔50%,所以在計算相應的範圍時要乘以2。

因為“連續”和“分段塊”前面都以講過,此處便不再贅述。

 

1.4,螺旋

螺旋只有“橫條(Bar)”才支援,其本身是“分段塊”的變形,所以會使用“分段塊寬度”這一屬性。

在前節進行過詳細講解,所以此處不再贅述。

 

2,進度不明確(Marquee樣式)

雖然有多種Marquee樣式,但歸到最後無非三大類:位置變化、範圍變化、螺旋。

其中,“螺旋”在前節中詳細講解過,所以此處不再贅述。

無論“位置變化”還是“範圍變化”,都是通過定時器去按間隔迴圈改變相應的值。而“勻速”效果和“緩動”效果則是在每個間隔變化的值是否相等而已。

關於勻速和緩動我前幾篇文章都有詳細講過,此處不再贅述。

 

(1)位置變化

 

通過上面這些圖,一目瞭然,位置變化,對於橫條(Bar)而言,就是改變起始位置;對於圓餅(Pie)和圓弧(Arc)而言,則是改變起始角度。

  

(2)範圍變化

通過上面這些圖,一目瞭然,範圍變化,對於橫條(Bar)而言,就是使繪製範圍發生變化,準確的說是寬度的變化;對於圓餅(Pie)和圓弧(Arc)而言,則是繪製角度的大小變化。

 

(3)位置和範圍都發生變化

 

 

通過上面這些圖,一目瞭然,屬於前兩者的結合體。

 

 (四)其它說明

在實現時,我並沒有去限制圓餅(Pie)和圓弧(Arc)一定得是正圓,也就是令其寬度和高度必須相等。

因為這樣可以實現一些比較好玩的效果,如下:

 


 

五、效果演示

為了更好的展示出進度條的特點,所以我們按下圖這樣構造一個演示程式。

 

 

本文中大部分圖片和動圖都是使用本演示程式錄制的。

具體演示程式及原始碼工程在文末有下載,請下載後自動體驗。

 


 

 六、結束語

我們會發現Marquee樣式的動畫和我們常見的載入(Loading)動畫有些類似,實際上,載入動畫的實現方式正是本文中實現Marquee樣式時所使用的方式,所以後面我們會去實現“載入(Loading)控制元件”。

 

本文只是起一個拋磚引玉的作用,讀者不要被我的思路所限制,你可以盡情的去實現你想要的效果。

 

技術並沒有先進和落後,只有合適與不合適。

所以,對自己掌握的知識多抱有一些信心,盡情釋放自己的想像力,並在實踐中提升自己。

 


 

七、原始碼及工程下載

https://files.cnblogs.com/files/lesliexin/04,LProgressBar.7z

 

相關文章