你是否也有這樣的疑惑，當(dāng)窗口拖拽之后，要如何才能填補(bǔ)右側(cè)和下方的空缺？
有些人直接固定窗體大小，不允許用戶拖拽。。。
也有萌新直接問我，MaterialSkin里面沒有什么辦法能讓拖拽的時候，控件也跟著動嗎？
其實(shí)這些功能在系統(tǒng)的Panel里面早就有了，只是大家不知道或者不會用而已。
?就在工具欄的“容器”這一欄目，別看就這幾個控件，其實(shí)能解決大部分的布局問題。
下面看看使用布局之后的軟件是什么樣子的：
正常：
縮?。?/p>
?放大：
這屬于放大的超級大了哈，比較一下可以看到，右下角的幾個開關(guān)控件，從兩列變?yōu)橐涣杏肿優(yōu)槿?，這是FlowLayoutPanel的功能。
而這幾幅圖中，左側(cè)文本部分和右側(cè)按鈕部分始終保持著一比一的比例進(jìn)行縮放的，這是SpliteContainer的功能。
?而四個按鈕之間，各自維持著一定的間距，還能一起變大變小，這是使用了兩行兩列的TableLayoutPanel
具體還涉及到了什么情況需要用到哪種Panel，如何嵌套使用，如何設(shè)置填充、?？?、設(shè)置間距屬性等內(nèi)容，東西比較多，大家可以新創(chuàng)建一個項(xiàng)目，一步一步來跟著做，我也拿一個空白窗體來演示。
1.TableLayoutPanel
拖出來是這樣子滴，跟表格一樣，可以點(diǎn)擊右上角的小三角添加行或者列
?我們添加一行一列，并拖拽他們的間距，可以讓其顯示為一個九宮格。
看上去已經(jīng)很完美了，但是當(dāng)拖動右下角，拉大這個TableLayoutPanel時，發(fā)現(xiàn)新添加的行和列的大小沒有隨之變化。表格之間又變得不均勻了。
?這是因?yàn)樾绿砑拥男谢蛄惺悄J(rèn)以寬度（高度）數(shù)值為基準(zhǔn)的，并不是比例的形式。
如果需要更準(zhǔn)確的平分，需要點(diǎn)擊小三角里面的最后一個選項(xiàng)??“編輯行或列”? 來進(jìn)行詳細(xì)設(shè)置。
?從這個樣式表中，我們可以看到，第一列第二列都是50% ，這是比重的意思，而第三列是固定數(shù)值，這就是第三列不會改變大小的原因，我們把它也改成百分比類型，50%（這個比重可以隨意寫，總共超過100%也沒關(guān)系，會被重新計(jì)算的）可以看到三列都是50% ，這就是1:1:1的形式。
?點(diǎn)擊確定，可以看到三列已經(jīng)被平分，我們用同樣的方法，將行也平分三份
?將顯示切換到行，設(shè)置方法跟上面相同，TableLayoutPanel被分為完美的3*3方格，并且拖動方格，都是均勻變化，至此TableLayoutPanel就算是設(shè)置成功了。
接下來要往里面填充元素，這里我們用按鈕來演示，將9宮格中，每個里面都放一個按鈕。
我們想要每個按鈕占滿一整個格子，這里介紹一個技巧，按住鍵盤Ctrl鍵，可以分別選中多個控件一起改屬性，這里我們按住Ctrl鍵，鼠標(biāo)將這9個按鈕全部選中，更改這兩個屬性：
?AutuSize之前已經(jīng)講過，改為False，我們就可以更改按鈕的大小，Dock設(shè)置為Fill意思即為填充滿，更改過后，拖拽TableLayoutPanel可以發(fā)現(xiàn)每個按鈕都會隨之變大或變小。
這里出現(xiàn)閃爍不要緊，因?yàn)槭窃O(shè)計(jì)模式，真正運(yùn)行時基本不會閃爍
同理我們選中TableLayoutPanel，更改它的屬性，將Dock也設(shè)置為Fill，這樣TableLayoutPanel就可以填充滿整個窗體，隨著窗體的變化而變化了。
運(yùn)行一下程序，試著改變一下窗體大小看看吧。
?
?整個窗體一直是被填滿的狀態(tài)，窗體變化，按鈕也變化，這就是我們想要的效果！
這也是通過布局控制界面控件大小的基本原理，理解了下面就很簡單啦。
接下來講一些細(xì)節(jié)，比如我覺得按鈕之間的間距太小，看起來太密集，怎么將他們之間的間距調(diào)大呢？
將所有按鈕選中，然后更改他們的Margin屬性，Margin屬性四個值分別表示控件距離容器邊緣左上右下的間距，我們把它全部改為10。可以看到間距發(fā)生了變化，間距更大了。
當(dāng)然如果想只改變左右的間距，就分別設(shè)置左右對應(yīng)的Margin就可以了，按照左上右下的順序，是第一位和第三位（你們應(yīng)該都懂就不多說啦）
如果我想要一個按鈕橫跨多行或多列呢？類似于鍵盤的空格鍵和刪除鍵一樣。
將Button6、Button9刪除，點(diǎn)擊button3，到屬性列表中找到布局->RowSpan
這是能夠跨幾行的意思，我們將其改為3，表示這個控件可以占用3行的空間
改完之后如圖，最右邊一列全是Button3的：
?同理，我們將Button8刪除，點(diǎn)擊Button7，將ColumnSpan 設(shè)置為2 ，這樣Button7 就可以占用兩列的空間。
?這樣其實(shí)就無形之中給我們的布局分成了不同的功能區(qū)，我為了便于演示用的是按鈕，把按鈕換成功能組件，其實(shí)就是我們?nèi)粘?yīng)用的軟件了。這個TableLayoutPanel就相當(dāng)于地基啦，正是因?yàn)樗?，各個組件才能自動跟隨窗體改變大小的哦~
如果想做一個固定高度的底部狀態(tài)欄或者菜單欄，類似于我們?yōu)g覽器最下方的狀態(tài)欄，是固定高度的，不會跟隨窗體大小來變化。如下圖：
?那也很簡單，新增加一行，將高度設(shè)置為固定高度（非百分比形式）即可，一般默認(rèn)就是這種形式，不需要多做修改。
然后將橫跨幾列的屬性設(shè)置一下，將Dock設(shè)置為Fill，如下圖所示，不管是長還是扁的，最下方狀態(tài)條那里高度都不會變化。
至此TableLayoutPanel的內(nèi)容也就介紹的差不多了，剩下的功能大家在日常使用中自行體會，我也就不過多描述了。
2.SplitContainer
SplitContainer是一個用于界面分隔的控件，也會在布局中使用，其效果是將界面分為兩部分。
?可以分成左右兩部分或者上下兩部分，同樣的劃分的比例也是可以調(diào)節(jié)的。
可以用在對布局要求不大的地方，比如像微信這樣的聊天軟件就基本上是左右布局，左邊聯(lián)系人，右邊信息欄，布局簡單，就可以使用SplitContainer。
可以嵌套使用，比如右邊還想再分隔成上下兩部分，就在右邊的Panel中再拖入一個SplitContainer，如下圖：
?不過SplitContainer一旦多了就會出現(xiàn)問題，就是選中的時候不好選中，經(jīng)常選到的是里面的Panel，而不是外面的SplitContainer，這時就需要右鍵一下，手動選擇SplitContainer。
強(qiáng)烈建議大家使用的時候?qū)⒚總€Panel都命名一下，比如上圖，時間久了，你根本不知道SplitContainer2到底指的是哪一個，就會很混亂。
正是因?yàn)楦鱾€Panel的名字比較混亂，一旦多了很不好管理，所以如果布局再復(fù)雜一些，就去用上面說的TableLayoutPanel
還是同樣的，將SplitContainer的Dock設(shè)置為Fill，就能跟隨窗體變化了。
3.FlowLayoutPanel
又稱為流式布局，適合于重復(fù)的樣式，如名片、菜單、訂單等，我們只需要往里面添加控件，FlowLayoutPanel便會自行排列，如果空間夠3列不夠4列便會顯示為3列，以此類推，將AutoScroll設(shè)置為TRUE，還會自動顯示可以滾動條。
下圖是我自行創(chuàng)建了UserControl之后，將其添加到FlowLayoutPanel中的效果。（你們可以自行在項(xiàng)目中添加UserControl）
其中我只繪制了名片部分，布局由FlowLayoutPanel自動完成。（FlowLayoutPanel的Dock屬性設(shè)置為Fill）
UserControl內(nèi)容：
?
添加 9個UserControl到FlowLayoutPanel中，由于現(xiàn)在的窗口比較小，所以自動顯示為兩列，由于只能顯示6個，右側(cè)自動出現(xiàn)滾動條。
將窗體拖動，讓窗體大小改變，F(xiàn)lowLayoutPanel便會自動顯示為3列。
由于顯示完全，滾動條自動消失。
?這種布局方式也是經(jīng)常用的，需要熟知！
如果想在后臺動態(tài)地添加控件到FlowLayoutPanel中，可以使用下面這段代碼：
this.flowLayoutPanel1.Controls.Add(new UserControl1());就可以在后臺代碼中增加自定義控件到FlowLayoutPanel中，如圖，名片變成了10個。
?使用起來是相當(dāng)?shù)姆奖愫挽`活的。
FlowLayoutPanel的功能也就是上面這些了，總的來講還是相當(dāng)強(qiáng)大的。
4.綜合運(yùn)用
能像我們之前寫的側(cè)邊欄項(xiàng)目，使用了TabCotrol，我們就需要把布局的Panel放在相應(yīng)的Tabpage里面。
這里先用了SplitContainer做了左右分隔，使左右兩部分始終保持1:1比例的放大縮小。
左側(cè)由于有三行，選擇使用TableLayoutPanel，分為三行。
右側(cè)上半部分，使用TableLayoutPanel分為兩行兩列，讓按鈕均勻放大縮小。
右下采用FlowLayoutPanel來讓開關(guān)自適應(yīng)排列
文章來源：http://www.zghlxwxcb.cn/news/detail-462773.html
?好了就說到這里吧，希望對大家有所幫助哦！文章來源地址http://www.zghlxwxcb.cn/news/detail-462773.html
到了這里，關(guān)于MaterialSkin與系統(tǒng)Panel容器結(jié)合使用，實(shí)現(xiàn)自適應(yīng)舒適布局的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
