C# WinForms 仿 Windows XP 風格側邊導航欄實現

Windows XP 左側任務面板（任務窗格）經典交互：點擊標題欄展開/摺疊內容區，伴隨下方控件整體上下位移。本文還原該交互，採用多 PictureBox + 絕對座標位移的純 WinForms 方案，無需第三方庫，代碼清晰易懂。

一、界面結構拆解

• 標題區：pictureBox2（展開圖標）、pictureBox5（摺疊圖標）
• 內容區：pictureBox4、label2、label3… 共 10+ 控件
• 下方區：pictureBox6、pictureBox8、label4~label10、pictureBox9、pictureBox11

點擊「展開」→ 內容區顯示、下方區整體 Top -= 80 上移；點擊「摺疊」→ 內容區隱藏、下方區 Top += 80 下移。

二、核心代碼實現

using System;
using System.Windows.Forms;

namespace XPStyleNavBar
{
    public partial class Form1 : Form
    {
        private const int Offset = 80; // 內容區高度

        public Form1()
        {
            InitializeComponent();
        }

        // 點擊摺疊圖標 (pictureBox5)
        private void pictureBox5_Click(object sender, EventArgs e)
        {
            CollapseContent();
        }

        // 點擊展開圖標 (pictureBox2)
        private void pictureBox2_Click(object sender, EventArgs e)
        {
            ExpandContent();
        }

        private void CollapseContent()
        {
            // 隱藏內容區控件
            pictureBox5.Visible = false;   // 摺疊圖標
            pictureBox4.Visible = false;
            label2.Visible = false;
            label3.Visible = false;

            // 下方區整體上移
            MoveControlsDown(-Offset);

            // 顯示展開圖標
            pictureBox2.Visible = true;
        }

        private void ExpandContent()
        {
            if (pictureBox5.Visible) return; // 已展開

            // 顯示內容區
            pictureBox5.Visible = true;
            pictureBox4.Visible = true;
            label2.Visible = true;
            label3.Visible = true;

            // 下方區整體下移
            MoveControlsDown(Offset);

            // 隱藏展開圖標
            pictureBox2.Visible = false;
        }

        /// 

        /// 批量移動控件垂直位置
        /// 
        private void MoveControlsDown(int deltaY)
        {
            Control[] controlsToMove = {
                pictureBox6, pictureBox8,
                label4, label5, label6, label10,
                label7, label8, label9,
                pictureBox9, pictureBox11
            };

            foreach (var ctrl in controlsToMove)
                ctrl.Top += deltaY;
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            // 支持透明背景（若 PictureBox 圖片有透明區）
            this.SetStyle(ControlStyles.SupportsTransparentBackColor, true);
        }
    }
}

三、設計器關鍵屬性

四、現代化改進建議

1. 用 FlowLayoutPanel 替代絕對座標：將內容區、下方區分別放入兩個 FlowLayoutPanel，摺疊時設 Visible=false，面板自動重排，無需手動 Top += Offset。
2. 動畫過渡：引入 Timer 每幀 Top += step，或用 AnimateWindow API，避免突兀跳動。
3. 資源管理：圖片放入 Resources.resx，避免部署遺漏。
4. 高 DPI：啟用 AutoScaleMode.Dpi，配合 TableLayoutPanel 百分比佈局。

五、完整項目結構

XPNavBarDemo/
├── Form1.cs
├── Form1.Designer.cs
├── Program.cs
├── Resources/
│   ├── expand.png      // 展開圖標
│   ├── collapse.png    // 摺疊圖標
│   ├── folder.png
│   └── file.png
└── XPNavBarDemo.csproj

六、總結

雖然 XP 風格已成歷史，但「標題點擊 → 內容展摺 → 鄰近區域位移」這一交互模式在側邊欄、手風琴菜單、樹形控件中依然普遍。本文以最原生的 WinForms 控件還原核心邏輯，助你理解佈局與座標變換本質；實際專案建議升級為 FlowLayoutPanel + 動畫，獲得更優體驗與維護性。