C# 類 QQ 介面實作：Dock 屬性動態切換與 ListView/Button 協同布局

設計概念

使用多個 ListView 與 Button，透過動態切換 Dock 屬性與 BringToFront/SendToBack 實現類 QQ 側邊欄摺疊/展開效果。

核心程式碼

public partial class Form1 : Form
{
    private void Form1_Load(object sender, EventArgs e)
    {
        listView1.Clear();
        listView1.LargeImageList = imageList1;
        listView1.Items.Add("小豬", "小豬", 0);
        listView1.Items.Add("小狗", "小狗", 1);
        listView1.Items.Add("嬌嬌", "嬌嬌", 2);
    }

    private void button1_Click(object sender, EventArgs e)  // 群組 1
    {
        listView1.Dock = DockStyle.None;
        button1.Dock = DockStyle.Top;
        button2.Dock = DockStyle.Bottom;
        button3.SendToBack(); button3.Dock = DockStyle.Bottom;
        listView1.BringToFront(); listView1.Dock = DockStyle.Bottom;
        listView1.Clear();
        listView1.Items.Add("小豬", "小豬", 0);
        listView1.Items.Add("小狗", "小狗", 1);
        listView1.Items.Add("嬌嬌", "嬌嬌", 2);
    }

    private void button2_Click(object sender, EventArgs e)  // 群組 2
    {
        listView1.Dock = DockStyle.None;
        button2.Dock = DockStyle.Top;
        button1.SendToBack(); button1.Dock = DockStyle.Top;
        button3.Dock = DockStyle.Bottom;
        listView1.Dock = DockStyle.Bottom;
        listView1.Clear();
        listView1.Items.Add("北風", "北風", 3);
    }

    private void button3_Click(object sender, EventArgs e)  // 群組 3
    {
        listView1.Dock = DockStyle.None;
        button3.SendToBack(); button3.Dock = DockStyle.Top;
        button2.SendToBack(); button2.Dock = DockStyle.Top;
        button1.SendToBack(); button1.Dock = DockStyle.Top;
        listView1.Dock = DockStyle.Bottom;
        listView1.Clear();
        listView1.Items.Add("冰雨", "冰雨", 5);
    }
}

關鍵技巧解析

優缺點分析

• ✅ 純 WinForms 原生控件，無需第三方庫
• ✅ 程式碼簡潔，邏輯直觀
• ⚠️ 手動管理 Dock/Z-order 易出錯，擴充群組需大量重複程式碼
• ⚠️ 無動畫過渡，體驗較生硬
• 💡 現代專案建議使用 FlowLayoutPanel + 自訂控件或 WPF 實現更優雅的側邊欄