C# 類 Windows XP 風格導航介面：PictureBox 顯隱與座標位移動畫

設計思路

使用 2-3 個 PictureBox 控制顯示/隱藏與座標位移，模擬 Windows XP 左側導航面板的摺疊/展開動畫效果。

核心程式碼

public partial class Form1 : Form
{
    private void Form1_Load(object sender, EventArgs e)
    {
        SetStyle(ControlStyles.SupportsTransparentBackColor, true);
    }

    private void pictureBox5_Click(object sender, EventArgs e)  // 收合
    {
        int offset = 80;
        pictureBox5.Visible = false;
        pictureBox4.Visible = false;
        label2.Visible = false;
        label3.Visible = false;
        
        // 下方元素整體上移
        pictureBox6.Top -= offset;
        pictureBox8.Top -= offset;
        label4.Top -= offset;
        label5.Top -= offset;
        label6.Top -= offset;
        label10.Top -= offset;
        label7.Top -= offset;
        label8.Top -= offset;
        label9.Top -= offset;
        pictureBox9.Top -= offset;
        pictureBox11.Top -= offset;
    }

    private void pictureBox2_Click(object sender, EventArgs e)  // 展開
    {
        if (!pictureBox5.Visible)
        {
            int offset = 80;
            pictureBox5.Visible = true;
            pictureBox4.Visible = true;
            label2.Visible = true;
            label3.Visible = true;
            
            // 下方元素整體下移
            pictureBox6.Top += offset;
            pictureBox8.Top += offset;
            label4.Top += offset;
            label5.Top += offset;
            label6.Top += offset;
            label10.Top += offset;
            label7.Top += offset;
            label8.Top += offset;
            label9.Top += offset;
            pictureBox9.Top += offset;
            pictureBox11.Top += offset;
        }
    }
}

技術特點

• 座標直接操作：修改 Control.Top 實現位移
• 批次移動：相關控件統一加減固定偏移量
• 可見度切換：Visible 屬性控制摺疊區塊顯隱
• 透明背景支援：SetStyle(SupportsTransparentBackColor, true)

現代化改良建議

1. 使用 Timer 或 Task.Delay 實現漸進動畫 (逐像素位移)
2. 封裝為 CollapsiblePanel 自訂控件，支援任意內容
3. WPF 專案可用 GridLengthAnimation 或 VisualStateManager 更優雅實現
4. 考慮無障礙設計：鍵盤導航、螢幕閱讀器支援