在設(shè)計(jì)界面的時(shí)候，不管是在Web端，還是在WinForm端，或者是WPF或者移動(dòng)界面等應(yīng)用上，我們對(duì)界面的組織布局，一直是比較有趣的話題，而組織界面的好壞從用戶的感受來(lái)看，可以提供程序可使用性高低，也體現(xiàn)了開發(fā)者的開發(fā)界面的功力。良好的界面布局，可以使得我們組織內(nèi)容更加合理，也更加美觀。本篇隨筆主要羅列我自己在開發(fā)Winform界面的時(shí)候，對(duì)界面的組織布局的一些小小案例和心得。

界面的組織布局，我這里分為了三個(gè)部分，一個(gè)是主界面組織布局、列表界面組織布局、新增編輯界面組織布局。

一、主界面組織布局

主界面的組織布局，主要就是應(yīng)用多窗體的布局方式，一般可以考慮使用多文檔容器界面，這種也是常規(guī)的方式；或者可以考慮基于用戶控件的變化實(shí)現(xiàn)同一個(gè)面板顯示不同的控件內(nèi)容。

如早期的WinForm，我使用默認(rèn)樣式的WinForm界面，布局采用控件"WeifenLuo.WinFormsUI.Docking"來(lái)承載窗體界面內(nèi)容，如下所示。

前者也主要是使用多文檔的方式來(lái)處理不同窗體的界面顯示，隨著時(shí)間的推移，后來(lái)逐漸引入了DevExpress的界面套件的方式來(lái)做界面，這個(gè)界面控件可以實(shí)現(xiàn)更加豐富的界面效果，而以界面代碼生成工具（代碼生成工具Database2Sharp）生成列表和編輯界面后，調(diào)整更加方便，因此主要的WinForm界面前端就是使用DevExpress的方式來(lái)處理，使用DevExpress可以使用Ribbon窗體，也能夠很好的支持多文檔的界面，因此主界面的效果還是更勝一籌。

這些主界面，后來(lái)基本上都是沿襲一致的界面呈現(xiàn)方式，使用了RibbonForm和樹列表等展示內(nèi)容，列表界面部分可以使用分頁(yè)控件統(tǒng)一呈現(xiàn)，實(shí)現(xiàn)比較統(tǒng)一的界面效果。

二、列表界面組織布局

上面的內(nèi)容，我們主要介紹了主界面的組織方式，一般主界面是多文檔界面，因此列表界面也會(huì)最終展示在主界面框架上的。一般來(lái)說，我們展示常規(guī)內(nèi)容的時(shí)候，分為列表內(nèi)容和明細(xì)顯示界面，也就是列表內(nèi)容分頁(yè)展示數(shù)據(jù)庫(kù)里面的記錄信息，而我們查看明細(xì)界面內(nèi)容的時(shí)候，就是顯示單條記錄的詳細(xì)內(nèi)容。

如對(duì)于列表內(nèi)容的展示，一般展示效果如下所示，主要展示數(shù)據(jù)庫(kù)里面的二維表信息。

有時(shí)候列表查詢的字段不夠的時(shí)候，我們通過列表的高級(jí)查詢進(jìn)行補(bǔ)充這個(gè)短板，以便對(duì)于表有大量字段的時(shí)候的，對(duì)一些不常見的字段進(jìn)行高級(jí)查詢操作。

但是一旦列表內(nèi)容比較多，我們?nèi)绻枰ㄎ徊煌暮Y選信息的時(shí)候，如果僅僅通過一些查詢字段的查詢，也不是那么友好。因此可能引入一些樹形列表來(lái)區(qū)分不同的內(nèi)容。

通過這些列表展示的方式，我們可以進(jìn)一步細(xì)化內(nèi)容的展示，如權(quán)限系統(tǒng)的內(nèi)容展示，通過對(duì)用戶組織架構(gòu)和角色的區(qū)分，我們可以快速定位系統(tǒng)用戶，也可以通過查詢字段進(jìn)行查詢，兩相結(jié)合更加方便使用。

字典模塊內(nèi)容展示，通過不同字典大類的樹形列表展示，可以使得我們過濾字典信息更加方便。

而角色管理者摒棄了傳統(tǒng)二維表的方式展示數(shù)據(jù)，通過樹列表控件、表單信息和選項(xiàng)卡信息，更好維護(hù)角色數(shù)據(jù)的處理。

對(duì)于客戶關(guān)系管理系統(tǒng)的客戶信息的列表界面，這個(gè)界面對(duì)客戶信息的不同屬性進(jìn)行樹形列表展示，可以使得定位客戶信息更加精確化，更加友好。

以及對(duì)一些特定范疇的數(shù)據(jù)統(tǒng)一管理，可以結(jié)合樹結(jié)構(gòu)的控件展示，處理起來(lái)更方便合理。

另外，有些情況下，我們需要考慮在列表界面上展示主從表信息，那么也可以利用DevExpress的列表控件來(lái)實(shí)現(xiàn)效果，如下所示。

三、新增、編輯界面組織布局

除了列表界面，另外一個(gè)就是對(duì)數(shù)據(jù)的明細(xì)展示界面了，這個(gè)界面內(nèi)容可以更加多元化，如在里面承載各種控件，如文本、日期、圖片、下拉列表、樹形列表，以及我們自定義的一些控件，如對(duì)于附件的通過管理展示控件。

有時(shí)候，明細(xì)內(nèi)容還涉及到一些主從表明細(xì)的錄入，如下所示是主從表明細(xì)內(nèi)容直接錄入的案例。

如果明細(xì)內(nèi)容較多，我們可以考慮使用選項(xiàng)卡的方式來(lái)維護(hù)數(shù)據(jù)，通過選項(xiàng)卡把不同類別的數(shù)據(jù)區(qū)分管理，如下面客戶基本資料就是一個(gè)案例。

后者系統(tǒng)用戶信息的展示也是基于同樣的理念。

不過如果對(duì)于需要集中展示明細(xì)信息外，以及整合相關(guān)的記錄信息，那么一兩個(gè)選項(xiàng)卡肯定不夠，如下面案例的人員基本信息的展示，除了展示自身的基礎(chǔ)信息外，也把一些人員關(guān)聯(lián)的信息一并展示，那么需要分為很多選項(xiàng)卡來(lái)容納這些信息，但是太多又會(huì)導(dǎo)致我們的界面擁擠，因此可以在選項(xiàng)卡后面添加一個(gè)配置按鈕，使得用戶可以方便維護(hù)自己感興趣的選項(xiàng)卡內(nèi)容。

不過如果內(nèi)容還是很多，我們?nèi)绻€需要精確的分開不同部分的內(nèi)容，我們也可以考慮下面一種方案。

如對(duì)于膠質(zhì)瘤的病人資料，我們基礎(chǔ)信息這么展示，雖然內(nèi)容不少，但是還是比較合理。

但是，如果對(duì)于信息病理內(nèi)容很多，如果一股腦的展示在一個(gè)內(nèi)容頁(yè)面上，肯定比較難看，而且也不好維護(hù)數(shù)據(jù)，如下是不好的案例展示。

合理的方式是引入選項(xiàng)卡或其他區(qū)分方式，我這里使用了一種不一樣的方式，就是通過結(jié)合樹列表和用戶控件的方式，實(shí)現(xiàn)一個(gè)選項(xiàng)卡里面，對(duì)不同區(qū)域內(nèi)容的展示和維護(hù)，這樣錄入界面和定位不同部分的數(shù)據(jù)也顯得更加方便得體。

下面是對(duì)于病人資料內(nèi)容展示的較為合理的案例。

對(duì)于一個(gè)病人，不同的屬性對(duì)應(yīng)不同的圖片附件信息，我們可以統(tǒng)一區(qū)分管理，如下所示。

以上就是對(duì)于主界面界面、列表界面、明細(xì)編輯界面的幾種界面案例的分析，我們一般在開發(fā)的時(shí)候，往往都是先使用代碼生成工具（我的代碼生成工具Database2Sharp），統(tǒng)一生成標(biāo)準(zhǔn)的列表界面，和明細(xì)展示的編輯界面，然后在對(duì)它進(jìn)行一定的潤(rùn)色和修改，如調(diào)整字典下拉列表類型，增加一些樹形列表，調(diào)整不同的選項(xiàng)卡展示內(nèi)容，增加附件管理控件，增加一些特殊的界面效果，只有在一些特殊的情況下，我們需要徹底重新構(gòu)建明細(xì)界面展示。

以上所有案例都是我在WinForm開發(fā)的時(shí)候，逐步形成一些經(jīng)驗(yàn)或者布局改變的思路，當(dāng)然有些也是一而再，再而三的優(yōu)化界面，從而達(dá)到更好的顯示和處理效果，希望大家喜歡，也歡迎多提意見。

DevExpress WinForm界面控件| 下載試用

DevExpress WinForm擁有180+組件和UI庫(kù)，能為Windows Forms平臺(tái)創(chuàng)建具有影響力的業(yè)務(wù)解決方案。DevExpress WinForms能完美構(gòu)建流暢、美觀且易于使用的應(yīng)用程序，無(wú)論是Office風(fēng)格的界面，還是分析處理大批量的業(yè)務(wù)數(shù)據(jù)，它都能輕松勝任！

本文轉(zhuǎn)載自：

DevExpress技術(shù)交流群4：715863792      歡迎一起進(jìn)群討論