Devexpress之LayoutControl的使用及其控件布局設計

引言

Devexpress給我們提供了更加美觀、更加豐富控件，但在學習和使用的同時經常會遇到諸多麻煩。今天在使用Devexpress的LayoutControl控件進行界面控件的布局設計時遇到了如下的麻煩：

1.添加控件后，不知道如何修改控件的尺寸

2.由1引起的不知道如何講兩個控件放在同一行

經過摸索解決了以上問題。首先看我的需求是通過LayoutControl控件設計圖1所示的窗體：

 圖1 

下面從該界面的設計過程，說明上面兩個問題的解決辦法：

1.向窗體中添加LayoutControl控件

在將該控件拖入窗體后，最好立即設置該控件的尺寸和位置，否則修改起來會比較麻煩（准確的說我還不知道怎么修改）。拖入后，在如圖2所示的情況下，開始修改尺寸和位置（在這里設置的是填充整個窗體）

 圖2

2.向LayoutControl中添加控件

（1）添加GroupBox控件名為groupControl1，拖入后如圖3所示，控件默認填充整個GroupControl，而且在界面中或者groupControl1的屬性中是無法直接修改大小的。

 

 圖3 

（2）隱藏控件的layoutControlItem(Text)。在向LayoutControl中添加控件后，會默認在其左側添加一個layoutControlItem，隱藏該部分的方法是右鍵layoutControlItem，點擊【Hide Text】，隱藏后如圖4所示。

      圖4      

（3）修改groupControl1的尺寸。

右鍵layoutControlGroup1(鼠標必須在該控件上右鍵)，在彈出的菜單中點擊【CustomizeLayout】→【Layout Tree View】→【layoutControlItem1】，如圖5，6所示。

（注意：在添加多個控件后會對應多個layoutControlItem*（*代表序號，1,2,3...），修改某一個控件時，必須找到其對應的layoutControlItem*進行屬性的修改）

 圖5

 

 

 圖6

然后在屬性窗口中修改layoutControlItem1的屬性：①將SizeConstraintsType設置為Custom；②設置MaxSize的Height為70（MaxSize的Height屬性來設置控件的高度，Width屬性設置控件的寬），如圖7所示。

 

 圖7

設置完成后groupBox1的高度變為70，,效果如圖8下：

 

 圖8

（4）以相同的方法依次添加正文和附注兩個GroupBox控件，添加完成后如圖9所示：

 

圖9

（5）添加兩個按鈕

在附注GroupBox下面添加兩個SimpleButton，添加后兩個按鈕的寬度默認填充整個LayoutControl，且上下分布，如圖10所示：

 

 圖10

下面將修改兩個按鈕的尺寸，然后將兩個按鈕設置為同一行。

①若想將兩個按鈕並行，必須先修改兩個按鈕的寬度（兩個按鈕的寬度和不超過LayoutControl的寬度）。修改按鈕尺寸的方法和前面講到的一樣，不再贅述，修改完成后如圖11所示：

 

 圖11

 

②將兩個按鈕並行

鼠標左鍵點擊其中一個按鈕所屬的layoutControlItem*開始拖動其位置，如圖12所示：

 

 圖12

以上過程解決了引言當中我所遇到的問題。最后向GroupBox控件中再添加其他控件，完成引言當中的需求，結果見圖1.

通過這些基本操作進行，可以利用LayoutControl控件進行更復雜的布局設計，有興趣的可自行研究。

 

 

出處：https://blog.csdn.net/BinGISer/article/details/78020970

https://blog.csdn.net/weixin_30819085/article/details/98335069

============================================================

      C#開發中，軟件布局設計，主要用TableLayoutPanel能很好地支持縮放功能，對自身的Label、TextBox等控件支持的很好，是通過這些控件的Anchor屬性設為:Top, Bottom, Left, Right、TextAlign屬性設為：MiddleCenter來實現縮放和定位的。
      但是VS中自身的控件，樣式比較簡單和單調。而DEV控件在美觀樣式設置上更盛一籌。更多的屬性支持勢必導致DEV控件的使用的復雜。初次使用每個DEV控件都是很費時費力的！
     今天下午研究了半天的LayoutControl的使用，使用原因：1.TableLayoutPanel對DEV控件支持性不夠，無法實現縮放控制。2.項目要求使用DEV控件，方便控制樣式和改善美觀性。
      LayoutControl的使用 ：
      1.一般控件使用，直接拉入，如：TextEdit控件拉入后，只需更改 前面的 layoutControlItem的Text屬性。
      2.特殊的如空白填充Empty Space Item、Label等特殊的，可以在LayoutControl里右鍵——》Customize Layout，如下圖，將需要控件拉入即可。