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

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

一、主界面組織布局

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

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

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

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

二、列表界面組織布局

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

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

有時候列表查詢的字段不夠的時候，我們通過列表的高級查詢進行補充這個短板，以便對于表有大量字段的時候的，對一些不常見的字段進行高級查詢操作。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

DevExpress WinForm界面控件| 下載試用

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

本文轉(zhuǎn)載自：

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