使用 C# 開發自訂使用者控制項：百分比進度條完整實作教學

專案建立與設計介面

1. 啟動 Visual Studio .NET，選擇 Visual C# 專案 → Windows 控制項程式庫，命名為 Percent。
2. 切換至 Percent.cs [設計] 頁面，在方案總管將 UserControl1.cs 改名為 Percent.cs。
3. 從工具箱拖曳一個 Label 至設計面，設定屬性：
   • Name：lbPercent
   • BackColor：Transparent
   • Text：100%
   • 調整大小剛好顯示文字
4. 右鍵設計面選擇「檢視程式碼」進入編輯器。

定義私有欄位與事件

namespace Percent
{
    public class Percent : System.Windows.Forms.UserControl
    {
        // 私有欄位
        private int iCurPercent = 0;
        private Color clPercent = Color.Blue;
        private Color clText = Color.Black;

        // 事件定義
        public delegate void PercentChangeHandler(int CurrentPercent);
        public event PercentChangeHandler OnPercentChange;

        // ... 屬性與方法實作
    }
}

三大核心屬性實作

CurrentPercent（目前進度 0~100）

public int CurrentPercent
{
    get { return iCurPercent; }
    set
    {
        if (value >= 0 && value <= 100)
        {
            iCurPercent = value;
            OnPercentChange?.Invoke(iCurPercent);  // 觸發事件
            this.Invalidate();                     // 重繪控制項
        }
    }
}

PercentBackColor（進度條顏色）

public Color PercentBackColor
{
    get { return clPercent; }
    set { clPercent = value; this.Invalidate(); }
}

PercentTextColor（文字顏色）

public Color PercentTextColor
{
    get { return clText; }
    set { clText = value; this.Invalidate(); }
}

Paint 事件：自訂繪製邏輯

在設計檢視選擇控制項本體，屬性視窗切換至事件（閃電圖示），雙擊 Paint 產生事件處理常式：

private void Percent_Paint(object sender, PaintEventArgs e)
{
    // 1. 繪製 3D 邊框（黑/白線條模擬凹陷效果）
    Pen penBlack = new Pen(Color.Black, 1);
    Pen penWhite = new Pen(Color.White, 1);

    e.Graphics.DrawLine(penBlack, 0, 0, this.Width - 1, 0);          // 上
    e.Graphics.DrawLine(penBlack, 0, 0, 0, this.Height);             // 左
    e.Graphics.DrawLine(penWhite, this.Width - 1, 0, this.Width - 1, this.Height); // 右
    e.Graphics.DrawLine(penWhite, 0, this.Height - 1, this.Width, this.Height - 1); // 下

    // 2. 繪製進度填充區域
    SolidBrush brushFill = new SolidBrush(PercentBackColor);
    Rectangle rcFill = new Rectangle(2, 2, 
        iCurPercent * (this.Width - 3) / 100, this.Height - 3);
    e.Graphics.FillRectangle(brushFill, rcFill);

    // 3. 置中顯示百分比文字
    lbPercent.Left = this.Width / 2 - lbPercent.Width / 2;
    lbPercent.Top = this.Height / 2 - lbPercent.Height / 2;
    lbPercent.Text = iCurPercent.ToString() + "%";
    lbPercent.ForeColor = PercentTextColor;
}

Resize 事件：尺寸變更時重繪

private void Percent_Resize(object sender, EventArgs e)
{
    this.Invalidate();  // 觸發 Paint 重繪
}

建立測試專案驗證控制項

1. 方案總管右鍵 → 新增專案 → Windows 應用程式，命名 TestPercent。
2. 測試專案右鍵 → 加入參考 → 專案頁面 → 選取 Percent。
3. 工具箱會自動出現 Percent 控制項，拖曳至表單。
4. 再加入 Button 與 Timer 元件。

測試程式碼

// Button 點擊：啟動計時器
private void button1_Click(object sender, EventArgs e)
{
    timer1.Enabled = true;
}

// Timer Tick：每次遞增進度
private void timer1_Tick(object sender, EventArgs e)
{
    percent1.CurrentPercent = percent1.CurrentPercent + 1;
}

// 訂閱進度變更事件：同步更新視窗標題
private void percent1_OnPercentChange(int CurrentPercent)
{
    this.Text = CurrentPercent.ToString();
}

執行結果與跨語言互通性

設定 TestPercent 為啟動專案並執行，點擊按鈕即可看到進度條動畫與標題同步更新。此控制項編譯為 .NET 組件，可直接在 Visual Basic.NET、C++/CLI 等任何 .NET 語言專案中重複使用，展現 .NET 語言互通性優勢。

開發環境備註

本範例於 Celeron 366 / 128MB RAM / Windows 2000 Advanced Server SP2 / VS.NET Beta 2 中文版 編譯通過。