Devexpress實現自適應布局


 

總結了一下題主最近使用DXP空間設計自適應布局的經驗。好的,讓我們開始

一、設計一個simplebutton水平居中並且高度可調整

1、拖入一個PanelControl並設置其Dock為Bottom

2、拖入LayoutControl到PanelControl中並設置其Dock為Fill

3、LayoutControl上右鍵,選擇CreateEmptySpaceItem生成兩個空白輔助排版區域。將他們水平排放。如下圖

4、拖拽一個PanelControl放入1和2中間

5、右鍵HideText可隱藏layoutControlItem1文字。同時拖拽調整保證1和2寬度相同。設置中間的PanelControl的BorderStyle為NoBorder

6、拖拽一個SimpleButton到中間的PanelControl上,並設置Dock屬性為Fill。這樣便可以自由調整SimpleButton的高度和寬度啦,總之要靈活應用PanelControl

 

二、設計N個水平方向等距的按鈕(這里以3個為例)

如下圖,參考一中可以實現

 

三、設計一個simplebutton垂直居中

1、在PanelControl放入一個LayoutControl並設置其Dock為Fill

2、生成兩個EmptySpaceItem並拖拽使其垂直排列

3、拖入一個PanleControl放在中間,並HideText。設置BorderStyle為NoBorder

4、將SimpleButton放入中間的PanelControl中並設置Dock屬性為Fill

 

四、設計N個垂直方向等距的按鈕(這里以3個為例)

1、參考三中的步驟,可設計如下界面

 

程序運行后效果如下圖

 

五、設計一個自適應分選項卡信息填寫頁面

1、在Panel上拖入一個LayoutControl控件並設置其Dock屬性為Fill

2、拖入一個GroupControl並HideText

3、LayoutControl上右鍵選擇Customize Layout調整布局

 

4、設置SizeConstraintsType為Custom

5、調整MaxSize和MinSize屬性到合適數字。左邊布局會根據數字的變化而變化

 

 5、在groupControl1中再拖入一個LayoutControl並設置Dock屬性為Fill

6、拖拽TextEdit和ComboboxEdit控件到layoutControl中即可自適應布局。可用來做信息展示和輸入

拉長之后效果如下圖

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM