Devexpress实现自适应布局

摘要:
本文总结了最近使用DXP空间设计自适应布局的经验。如下图4所示,将PanelControl拖到1和2.5的中间。右键单击HideText以隐藏layoutControlItem1文本。左侧的布局将根据数字而改变。5.将layoutControl拖到groupControl1中,并将Dock属性设置为Fill6.将TextEdit和ComboboxEdit控件拖到layoutControl中以调整布局。

总结了一下题主最近使用DXP空间设计自适应布局的经验。好的,让我们开始

一、设计一个simplebutton水平居中并且高度可调整

1、拖入一个PanelControl并设置其Dock为Bottom

2、拖入LayoutControl到PanelControl中并设置其Dock为Fill

3、LayoutControl上右键,选择CreateEmptySpaceItem生成两个空白辅助排版区域。将他们水平排放。如下图

Devexpress实现自适应布局第1张

4、拖拽一个PanelControl放入1和2中间

Devexpress实现自适应布局第2张

5、右键HideText可隐藏layoutControlItem1文字。同时拖拽调整保证1和2宽度相同。设置中间的PanelControl的BorderStyle为NoBorder

Devexpress实现自适应布局第3张

6、拖拽一个SimpleButton到中间的PanelControl上,并设置Dock属性为Fill。这样便可以自由调整SimpleButton的高度和宽度啦,总之要灵活应用PanelControl

Devexpress实现自适应布局第4张

二、设计N个水平方向等距的按钮(这里以3个为例)

如下图,参考一中可以实现

Devexpress实现自适应布局第5张

三、设计一个simplebutton垂直居中

1、在PanelControl放入一个LayoutControl并设置其Dock为Fill

2、生成两个EmptySpaceItem并拖拽使其垂直排列

Devexpress实现自适应布局第6张

3、拖入一个PanleControl放在中间,并HideText。设置BorderStyle为NoBorder

Devexpress实现自适应布局第7张

4、将SimpleButton放入中间的PanelControl中并设置Dock属性为Fill

Devexpress实现自适应布局第8张

四、设计N个垂直方向等距的按钮(这里以3个为例)

1、参考三中的步骤,可设计如下界面

Devexpress实现自适应布局第9张

程序运行后效果如下图

Devexpress实现自适应布局第10张

五、设计一个自适应分选项卡信息填写页面

1、在Panel上拖入一个LayoutControl控件并设置其Dock属性为Fill

Devexpress实现自适应布局第11张

2、拖入一个GroupControl并HideText

Devexpress实现自适应布局第12张

3、LayoutControl上右键选择Customize Layout调整布局

Devexpress实现自适应布局第13张

4、设置SizeConstraintsType为Custom

Devexpress实现自适应布局第14张

5、调整MaxSize和MinSize属性到合适数字。左边布局会根据数字的变化而变化

Devexpress实现自适应布局第15张

 5、在groupControl1中再拖入一个LayoutControl并设置Dock属性为Fill

Devexpress实现自适应布局第16张

6、拖拽TextEdit和ComboboxEdit控件到layoutControl中即可自适应布局。可用来做信息展示和输入

Devexpress实现自适应布局第17张

拉长之后效果如下图

Devexpress实现自适应布局第18张

免责声明:文章转载自《Devexpress实现自适应布局》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇C 语言popen函数,实现shell和读取内容[转]C# Invoke的使用方法下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

iframe高度自适应

前两天在网上看到了一道面试题,问iframe高度自适应的问题。发现自己之前几乎没有关注过iframe的问题,所以在这里记录一下。 原题目是: 页面A的域名是:http://www.taobao.com,页面B的域名是http://www.tmall.com,如果A使用iframe引用页面B,如何做到iframe的高度自适应(即B内容有多高,iframe就有...

Bootstrap自适应各种设备

<!DOCTYPE html><html><head><title>Bootstrap 实例 - 手机、平板电脑、台式电脑</title><meta charset="utf-8"><meta name="viewport" content="width=device-width...

Vue中CodeMirror组件设置高度自适应

写在前面 由于项目中需要使用代码编辑器插件,于是找到了CodeMirror,这个插件功能十分强大,官网地址:https://codemirror.net/ 但是,当把插件集成到项目时,发现编辑器显示高度是默认的300px,这个高度显然是不友好的,所以需要将高度改为自适应。 查看官方文档说是将height设置为auto即可,但是加上知乎发现这个样式根本不起...

DevExpress ASP.NET ASPxGridView使用方法大全

dev的控件是比较好的开发的控件,写一些dev的学习笔记,共以后参考。 1、 绑定IList ASPxGridView1.KeyFieldName = "ID";//指定主键。直接更新数据和子表绑定需要用到 ASPxGridView1.DataSource = list;//指定Grid的数据 ASPxGridView1.DataBind(); //执行绑...

DevExpress 控件使用技巧

DevExpress是非常主流的.NET控件,眼下全世界和中国都用非常多用户使用,只是因为是英文版,初次接触的同学可能会认为困难。这里就总结DevExpress常见的10个使用技巧。1.TextEditor(barEditItem)取文本  string editValue = barEditItem1.EditValue.ToString();   ...

手机端自适应字体大小和元素宽度自适应

以前在做手机端页面时候通过媒体查询的方法定义字体或者宽高。 这样看设计稿切图时一切字体大小、内容宽度全靠感觉去定义,media定义好之后,拿起键盘就是干。 字体、宽高都用rem来定义,此方法略爽! @media (min-0px){ html{font-size:12px;} } @media (min- 320px){ html{...