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

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

      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，如下图，将需要控件拉入即可。

3.拉入控件时，注意放置位置和方式，可以通过自己尝试。

出处：https://www.cnblogs.com/wuhenke/archive/2009/09/09/1563592.html

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

PanelControl是一个控件容器；

通常将LayoutControl结合使用，LayoutControl可以在窗体变大或者变小时，使得LayoutControl的控件能同比变化；

例如：

LayoutControl中的Group可以将控件分组；

右键点击group控件选择Add Control可以添加相应的控件；

像这样：

删除LayoutControl，因为一般我们通常将Dock设置为了Fill,所以很难通过鼠标选择到LayoutControl，通过点击属性栏，我们可以选择当前窗体上的所有控件。

在LayoutControl中添加控件的方式二：

特殊的如空白填充Empty Space Item、Label等特殊的，可以在LayoutControl里右键——》Customize Layout，如下图，将需要控件拉入即可。

layoutControlItem中的一个比较恶心的情况就是，下面这张图所显示的：

文字和包含控件之间的距离很恶心，

解决办法是：

layoutControlItem中有一个TextAlignMode属性，设置为CustomSize，然后设置TextSize的大小就可以了！！！

出处：https://blog.csdn.net/ClearLoveQ/article/details/80990329

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

首先需求是通过LayoutControl控件设计下图所示的窗体：

从该界面的设计过程

1.向窗体中添加LayoutControl控件

在将该控件拖入窗体后，最好立即设置该控件的尺寸和位置。拖入后，在如下图所示的情况下，开始修改尺寸和位置（在这里设置的是填充整个窗体）

2.向LayoutControl中添加控件

（1）添加DateEdit控件名为dateEdit1，拖入后下图所示，控件默认填充整个DateEdit，而且在界面中或者dateEdit1的属性中是无法直接修改大小的。

（2）修改dateEdit1的尺寸。

右键layoutControlGroup1(鼠标必须在该控件上右键)，在弹出的菜单中点击【CustomizeLayout】→【Layout Tree View】→【layoutControlItem4】

然后在属性窗口中修改layoutControlItem1的属性：①将SizeConstraintsType设置为Custom；②设置MaxSize和MinSize（MaxSize的Height属性来设置控件的高度，Width属性设置控件的宽）这两个属性的宽和高，自己试下就知道效果了，如下图所示。

（3） 设置文字到控件的间距，需要设置LayoutControl.OptionsItemText.TextToControlDistance属性。设置该属性之后，里面的每个子控件都按照这个距离显示文字到控件的距离。

（4） 设置各子控件之间的间距，设置子控件的Spacing属性。可以统一设置全方位的间距，也可以单独设置某一个方位的间距。

出处：https://www.cnblogs.com/herojy886/p/8295960.html

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

设置 LayoutControl中的控件居中：

比如下面的界面，我已经自定义查询按钮的大小(设置方式可参考前面)，然后让按钮居中，点击按钮所在的行的空白处，在属性面板中找到ControlAlignment 属性，设置为：MiddleCenter

如果是Label控件，则AppearanceItemCaption  -> TextOptions -> Halignment设置成Center

再给个参考链接：

https://blog.csdn.net/spw55381155/article/details/83339078

https://documentation.devexpress.com/WindowsForms/DevExpress.XtraLayout.LayoutControlGroup.members