在平常的學習研究中，或者有時候因為開發(fā)項目的各種需要，會對界面設(shè)計進行各種方式的改良嘗試，遇到好的經(jīng)驗實踐，就一直在我自己的各種項目中沿用下去，本文主要分析我的一款病人資料管理系統(tǒng)-脊柱外科病人資料管理系統(tǒng)的系統(tǒng)界面設(shè)計，以及如何基于DevExpress控件的具體實現(xiàn)，從而為用戶提供更好的界面效果體驗。

1、系統(tǒng)主體界面設(shè)計

系統(tǒng)主體界面設(shè)計，遵循我的《WInform開發(fā)框架》的技術(shù)特點，使用基于Ribbon樣式的多文檔布局界面框架，通過在主工具欄里面對功能進行分類，實現(xiàn)更多的功能點排列，如下界面所示。

這樣的界面效果適合大多數(shù)的Mis系統(tǒng)的布局，也較好呈現(xiàn)相關(guān)功能點。

?

2、查詢功能的面板折疊

從上圖我們看到，患者資料的查詢條件比較多，已經(jīng)占用了大部分的界面篇幅，但是我們常用的條件又需要放在在主面板里面，因此我通過在主界面中放置一個SplitContainerControl的控件，對屏幕控件進行分開，可以通過上下調(diào)整屏幕空間，并且還可以通過下圖中間的一個三角符號，進行上面查詢條件面板的隱藏，從而實現(xiàn)較好的屏幕調(diào)整。

在系統(tǒng)的運行狀態(tài)界面中，單擊面板的三角符號可以把界面折疊到上面，折疊后查詢條件的面板全部隱藏起來，需要展開在單擊三角符號即可，折疊效果如下所示。

以上界面效果，通過在界面里面放置一個SplitContainerControl控件，然后在上下面板放置好相關(guān)的控件，并設(shè)置SplitContainerControl其中的一些屬性即可，屬性設(shè)置如下所示。

?

3、字典控件的數(shù)據(jù)綁定

在一般的系統(tǒng)界面里面，我們往往需要從字典模塊中提取數(shù)據(jù)，綁定到一些界面控件上，例如，下拉列表控件、單選組合控件，復選框組合控件等。下面介紹這些字典控件的數(shù)據(jù)綁定方面的案例代碼。

我們看看這個界面的數(shù)據(jù)綁定代碼。

/// <summary>/// 初始化字典列表內(nèi)容/// </summary>private void InitDictItem(){//初始化代碼txtBodyPart.BindDictItems("脊柱部位");txtIsFirstTime.BindDictItems("首發(fā)復發(fā)");txtInDiagnosis.BindDictItems("入院診斷");txtDoctor.BindDictItems("主管醫(yī)生");txtTreatingPhysician.BindDictItems("經(jīng)治醫(yī)生");txtLeaveDiagnosis.BindDictItems("最后診斷");txtLeaveCondition.BindDictItems("出院情況");txtSurgeonDoctor.BindDictItems("主刀醫(yī)生");txtSurgeryName.BindDictItems("手術(shù)名稱");txtSurgeryType.BindDictItems("手術(shù)方式");txtPathology.BindDictItems("病理診斷");txtIntervertebral.BindDictItems("椎間隙");txtVertebral.BindDictItems("椎體");}

這種方式是直接使用了擴展方法的方式定義控件的BindDictItems方法，把所有字典控件類型都擴展了該函數(shù)，以便實現(xiàn)更好的統(tǒng)一操作，ComboBoxEdit控件的擴展方法定義如下所示。

/// <summary>/// 設(shè)置下拉列表選中指定的值/// </summary>/// <param name="combo">下拉列表</param>/// <param name="value">指定的CListItem中的值</param>public static void SetComboBoxItem(this ComboBoxEdit combo, string value){for (int i = 0; i < combo.Properties.Items.Count; i++){CListItem item = combo.Properties.Items[i] as CListItem;if (item != null && item.Value == value){combo.SelectedIndex = i;}}}/// <summary>/// 綁定下拉列表控件為指定的數(shù)據(jù)字典列表/// </summary>/// <param name="combo">下拉列表控件</param>/// <param name="dictTypeName">數(shù)據(jù)字典類型名稱</param>public static void BindDictItems(this ComboBoxEdit combo, string dictTypeName){BindDictItems(combo, dictTypeName, null);}/// <summary>/// 綁定下拉列表控件為指定的數(shù)據(jù)字典列表/// </summary>/// <param name="combo">下拉列表控件</param>/// <param name="dictTypeName">數(shù)據(jù)字典類型名稱</param>/// <param name="defaultValue">控件默認值</param>public static void BindDictItems(this ComboBoxEdit combo, string dictTypeName, string defaultValue){Dictionary<string, string> dict = BLLFactory<DictData>.Instance.GetDictByDictType(dictTypeName);List<CListItem> itemList = new List<CListItem>();foreach (string key in dict.Keys){itemList.Add(new CListItem(key, dict[key]));}BindDictItems(combo, itemList, defaultValue);}/// <summary>/// 綁定下拉列表控件為指定的數(shù)據(jù)字典列表/// </summary>/// <param name="combo">下拉列表控件</param>/// <param name="itemList">數(shù)據(jù)字典列表</param>public static void BindDictItems(this ComboBoxEdit combo, List<CListItem> itemList){BindDictItems(combo, itemList, null);}/// <summary>/// 綁定下拉列表控件為指定的數(shù)據(jù)字典列表/// </summary>/// <param name="combo">下拉列表控件</param>/// <param name="itemList">數(shù)據(jù)字典列表</param>/// <param name="defaultValue">控件默認值</param>public static void BindDictItems(this ComboBoxEdit combo, List<CListItem> itemList, string defaultValue){combo.Properties.BeginUpdate();//可以加快 combo.Properties.Items.Clear();combo.Properties.Items.AddRange(itemList);if (!string.IsNullOrEmpty(defaultValue)){combo.SetComboBoxItem(defaultValue);}combo.Properties.EndUpdate();//可以加快}

上面我定義了好幾種方法的擴展，方便更好的對控件的字典數(shù)據(jù)的控制，如可以指定默認值，可以指定數(shù)據(jù)字典的類型名稱即可綁定，或者可以指定一個列表集合即可。

在上面的最后一個函數(shù)代碼里面，值得注意的是，我在其中添加注釋說明的紅色代碼，這個可以很好提高界面的響應(yīng)效率，利用BeginUpdate()和EndUpdate()的方法，可以極大提高數(shù)據(jù)綁定的效率，特別在數(shù)據(jù)源很大（如幾百個以上的數(shù)據(jù)項目），速度可以提高好幾倍，所以如果控件提供了這樣的兩個方法，我們在數(shù)據(jù)綁定的時候，最好堅持使用，如TreeView控件也提供了。

除了ComoboBoxEdit控件的數(shù)據(jù)源綁定操作，我們也可以通過以上相同的方法擴展其他數(shù)據(jù)源控件，如下面是RadioGroup控件的數(shù)據(jù)綁定擴展方法定義，也提供了上面類似的BindDictItems()方法的定義，直接可以綁定數(shù)據(jù)字典里面的內(nèi)容。

/// <summary>/// 綁定單選框組為指定的數(shù)據(jù)字典列表/// </summary>/// <param name="radGroup">單選框組</param>/// <param name="dictTypeName">字典大類</param>/// <param name="defaultValue">控件默認值</param>public static void BindDictItems(this RadioGroup radGroup, string dictTypeName, string defaultValue){Dictionary<string, string> dict = BLLFactory<DictData>.Instance.GetDictByDictType(dictTypeName);List<RadioGroupItem> groupList = new List<RadioGroupItem>();foreach (string key in dict.Keys){groupList.Add(new RadioGroupItem(dict[key], key));}radGroup.Properties.BeginUpdate();//可以加快 radGroup.Properties.Items.Clear();radGroup.Properties.Items.AddRange(groupList.ToArray());//可以加快if (!string.IsNullOrEmpty(defaultValue)){SetRaidioGroupItem(radGroup, defaultValue);}radGroup.Properties.EndUpdate();//可以加快}

?

4、附件管理分組-影像學資料管理

在很多病人資料管理模塊中，都需要管理影像學資料，這個在我的Winfrom開發(fā)框架中，提供了一個附件管理的通用模塊供重復使用，因此對這些操作并不會增加太多的工作量，統(tǒng)一使用即可，界面效果如下所示。

附件管理模塊提供了分類的附件管理，圖片縮略圖預覽和圖片預覽，多文件上傳、下載、刪除等附件操作，滿足我們對附件管理的大多數(shù)要求，如下界面所示。更詳細的通用附件管理模塊的呈現(xiàn)和使用，可參考我之前的隨筆《Winform開發(fā)框架之附件管理應(yīng)用》，以及《Winform開發(fā)框架之通用附件管理模塊》隨筆。

?

5、特殊界面布局的調(diào)整

在錄入數(shù)據(jù)的界面的設(shè)計中， 我一般傾向于使用LayoutControl控件實現(xiàn)布局功能，這個控件對我們排版各種控件非常方便。

不過由于該布局控件使用類似于表格單元格的模式，如下這種方式的布局是常規(guī)的控件排列方式（設(shè)計模式下界面），在LayoutControl控件中通過拉動排列控件即可很好實現(xiàn)。

但也是由于該控件的布局設(shè)計有點類似于表格行列的方式，因此也要設(shè)計更多樣化的界面效果也有所約束，但總體來說，不失為一種非常棒的布局控件，它的一些缺點，可以通過一些特殊的操作進行避免。下面是我在其中的一個界面中使用該控件調(diào)整后得到的一個多樣化一點的界面表達方式，有點類似于分組分類的方式，使得輸入的內(nèi)容更加易讀。

這個調(diào)整好的界面布局的設(shè)計模式下的效果如下所示。

?其中我們以“感覺系統(tǒng)”標簽為例，我們在設(shè)計界面中增加一個EmptySpaceItem（注意不要拖入LableControl控件，這個標簽控件不適合標題），調(diào)整到最佳位置后，需要設(shè)置好其相關(guān)的屬性，才可以得到更好的界面效果，設(shè)計屬性如下所示。

第二個的縮進標題的效果，也是通過類似的方式，設(shè)置控件的約束類型為Custom，然后調(diào)整它的最大最小寬度（Width），并且不設(shè)置文本為顯示狀態(tài)，從而控制標簽的位置，實現(xiàn)占位符的效果。屬性如下所示。

?以上就是我在脊柱外科病人資料管理系統(tǒng)里面中，對程序界面設(shè)計分析和內(nèi)在使用的一些經(jīng)驗總結(jié)，這些積累很大程度上，也是基于我的Winform開發(fā)框架中的優(yōu)化和改善，總之，希望這些在實際項目中的一些案例使用，希望對大家有啟發(fā)作用，期待大家在這方面的共同探討。

?

總結(jié)

以上是生活随笔為你收集整理的脊柱外科病人资料管理系统的界面设计分析的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。