C# 自定義動態圖像按鈕（一）：架構設計與透明度預生成

需求背景

專案中工具欄按鈕過於簡陋，參考 Mac OS X Dock 風格，實現鼠標進入放大、透明度漸變的動態圖像按鈕。

控件繼承體系

public class DynamicImageButton : UserControl
{
    // 核心字段
    private Bitmap[] bmp = new Bitmap[4]; // 0=原圖, 1/2/3=遞增透明度
    private Graphics g, g2;               // 螢幕畫布、雙緩衝畫布
    private Image dblBuffer;              // 雙緩衝位圖
    private Timer timer;                  // 動畫定時器
    // ... 幾何參數 curX, curY, curW, curH, itvW 等
}

Image 屬性與透明度預生成

public Bitmap Image
{
    get => bmp[0];
    set
    {
        bmp[0] = value;
        bmp[1] = ApplyAlpha(value, 60);   // 較低透明度
        bmp[2] = ApplyAlpha(value, 120);
        bmp[3] = ApplyAlpha(value, 180);  // 最高透明度
        Draw(); // 觸發重繪
    }
}

// 像素級 Alpha 修改
public static Bitmap ApplyAlpha(Bitmap src, int alphaReduce)
{
    Bitmap dst = new Bitmap(src);
    for (int x = 0; x < src.Width; x++)
        for (int y = 0; y < src.Height; y++)
        {
            Color c = src.GetPixel(x, y);
            if (c.A > 0)
                dst.SetPixel(x, y, Color.FromArgb(Math.Max(0, c.A - alphaReduce), c.R, c.G, c.B));
        }
    return dst;
}

設計亮點

1. 運行時零計算：所有透明度變體在屬性設置時一次性生成，動畫幀率穩定、CPU 佔用極低。
2. 繼承 UserControl：自帶雙緩衝支持（SetStyle(ControlStyles.AllPaintingInWmPaint | ControlStyles.UserPaint | ControlStyles.OptimizedDoubleBuffer, true)），無需手動管理 WM_PAINT。
3. GDI+ 核心：Graphics、Bitmap、Color.FromArgb 構建像素操作基礎。

界面效果

後續內容

下一篇將詳細講解動畫定時器邏輯、幾何插值計算、幀區間選擇策略、鼠標事件綁定與完整運行代碼。