C#巧用anchor和dock設計複雜介面（控制項隨著表單大小的變化而變化）

程式介面如上

各部分簡要說明： 整個表單上覆蓋一個splitcontainer。

splitcontainer的panel1上放置一個label與一個treeview.

splitcontainer的panel2上放置一個tabcontrol.

tabcontrol上面有兩個tabpage

tabpage1上放置一個組合框，按鈕兩個。go 為button1,back 為button2.下面是一個webbrowser

tabpage2上放置了依次放置的控制項為label 2，textbox1,label3,textbox2(具有multiline屬性)

tabcontrol下方放了四個按鈕。依次為button3,button4,button5,button6

下面簡要介紹下dock和anchor的意義：

dock屬性控制子控制項在父視窗的固定位置；anchor屬性控制子控制項與父控制項之間的距離（自己動手試一下就明白了）

下面介紹各個控制項的dock和anchor屬性設定情況：

splitcontainer1:

1.anchor:top left;

2.dock :fill(充滿整個表單，使splitcontainer的大小隨著winform的大小的改變而改變);

 

label1:

1.anchor: top left;

2.dock :none;

 

treeview1:

1.anchor:top left bottom right(即使表單變化時，保持treeview1的四個邊距離其父控制項的距離不變，也就是treeview1跟著變大的意思);

2.dock:none;

 

tabcontrol1:

1.anchor:top left

2.dock:fill;

combobox1:

1.anchor:top left right（即當表單變化時此控制項的上邊，左邊，右邊距離父控制項的位置不變）;

2.dock:none;

 

button1(go),button2(back):

1.anchor: top right;

2.dock:none.

 

webbrowser1:

1.anchor:top left right bottom

2.dock:none

 

tabpage2 上的 label2,label3 設定如label1;

textbox2,textbox3設定如combobox1

下面介紹四個button如何設定

我們設定button3（文章提取）的anchor為  left,bottom,dock 為none；其他button的anchor屬性設定為bottom,dock屬性設定為none;

    當表單長度發生變化時，我們將tabcontrol的長度分成四份(因為有四個button)。a1,a2,a3,a4,分別配給每個button。每個button的長度為其所佔用長度的3/4(這個可以隨意設)代碼如下：

 

表單變化也button變化
 private void Form1_Resize(object sender, EventArgs e)
        {
   
            int length = this.tabControl1.Width / 4;
            int s=length*3/4;
            
            button3.Width = s;
            button4.Width = s;
            button5.Width = s;
            button6.Width = s;
            button4.Location =new  Point(button3.Location.X + length, button3.Location.Y);
            button5.Location = new Point(button4.Location.X + length, button4.Location.Y);
            button6.Location = new Point(button5.Location.X+length, button5.Location.Y);
           
            

        }

注意：要在form1_load中加入代碼句： this.Resize += new System.EventHandler(this.Form1_Resize);//託管

 

當我們拖拽splitcontainer時也應該有button變化。故設計代碼如下：

 

表單不變，panel1和pannel2相對變化，button也變化
 private void splitContainer1_SplitterMoved(object sender, SplitterEventArgs e)
        {
            int length = this.tabControl1.Width / 4;
            int s = length * 3 / 4;

            button3.Width = s;
            button4.Width = s;
            button5.Width = s;
            button6.Width = s;
            button4.Location = new Point(button3.Location.X + length, button3.Location.Y);
            button5.Location = new Point(button4.Location.X + length, button4.Location.Y);
            button6.Location = new Point(button5.Location.X + length, button5.Location.Y);
        }

 

經過如上設定，我們的表單介面就設計好了。我還是菜鳥，有理解不對的地方，還懇請大家指證。

15:30:11

 

源碼可以到http://finallyliuyu.download.csdn.net/下載

沒有CSDN號的朋友可以http://www.cnblogs.com/finallyliuyu/admin/Files.aspx下載