C#使用splitContainer控件制作收縮展開面板

原創 2011年07月19日 17:18:02

• 標簽：
• c# /
• object /
• 擴展 /
• 測試

• 15690

        最近對Squid Ink公司的一款PC端軟件系統上的一個收縮伸展面板很感興趣，加上自己做的噴碼機數據管理系統的界面非常單調，想在現在界面的基礎上將這個功能加上去。我個人只是寫c#的一個菜鳥，在網上查了C#的很多控件，很多人都是用GroupBox和SplitContainer實現的，於是就對這兩個控件進行了測試。
附Squid Ink公司軟件的界面效果：

        先說GroupBox這個控件，這個基本上能實現面板伸縮和擴展的功能，但是個人感覺GroupBox其本身那個框讓人感覺不是很爽，再加上我想在點擊處加上伸縮和展開的圖標，並且鼠標放在點擊處會變成手型（GroupBox的話鼠標放在整個控件都會變成手型，不只是標題處），於是就沒深究這個框到底能不能去掉。

        再去網上搜了一下SplitContainer這個控件的用法，這個控件總共有兩個面板，網上很多人用這個控件都是采用點擊第一個面板，隱藏第二個面板的方法：

private void SplitContainer_Panel1_MouseClick(object sender, MouseEventArgs e)
{
            int i;

            SplitterPanel splitPanel = (SplitterPanel)sender;

            for (i = 0; i < 10; i++)
                if (splitContainers[i].Panel1 == splitPanel)
                    break;

            splitContainers[i].Panel2Collapsed = !splitContainers[i].Panel2Collapsed;
}

        首先在第一個面板上面添加鼠標點擊事件，用點擊的方法將第二個面板伸縮和展開，由於監聽的是第一個面板，而第二個面板隱藏需要SplitContainer需要整個控件的變量，所以我把所有Form里面的SplitContainer都添加到splitContainers這個數組里面。如果只有一個SplitContainer控件需要隱藏的話，那么這個功能基本上就能實現了，但是如果有多個面板需要隱藏的話，這個方法的排版會很麻煩，因為第二個面板只是隱藏，不是消失，第二個面板位置跟上去的話會出現控件的覆蓋問題。如果有朋友解決了這個問題的話，可以指點我一下。

       本來是山窮水盡了，一個意外的想法突然出現在腦海中。其實我一直是抓着SplitContainer這個控件的面板隱藏功能不放，換一種思路，我們可以像GroupBox一樣，直接設置SplitContainer控件的大小：

private void SplitContainer_Panel1_MouseClick(object sender, MouseEventArgs e)
{
    int i;

    SplitterPanel splitPanel = (SplitterPanel)sender;

    for (i = 0; i < 10; i++)
        if (splitContainers[i].Panel1 == splitPanel)
            break;

    //splitContainers[i].Panel2Collapsed = !splitContainers[i].Panel2Collapsed;
    if (splitContainers[i].Size.Height <= 50)
    {
        splitContainers[i].Size = containerSizes[i];
        splitContainers[i].Panel1.BackgroundImage = global::inkjet.Properties.Resources.展開;
    }
    else
    {
        splitContainers[i].Size = new Size(splitContainers[i].Size.Width, 20);
        splitContainers[i].Panel1.BackgroundImage = global::inkjet.Properties.Resources.收縮;
    }
}

        事實證明，重新設置SplitContainer的大小之后，再修改下面的SplitContainer控件的位置能很好地滿足我的需求。后來我發現，將所有的SplitContainer控件放到FlowLayoutPanel里面，在修改SplitContainer控件大小之后，無需修改位置就能解決這個問題。

附 效果圖：

        當然界面的顏色還需完善，展開和收縮的圖標是從Squid Ink公司的軟件截圖而來。但是已經能滿足這款軟件的需求，如果路過的朋友有更好的方法的話，歡迎指點。