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

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

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

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

?

2、查詢功能的面板折疊

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

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

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

?

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

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

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

/// <summary>/// 初始化字典列表內(nèi)容/// </summary>private void InitDictItem(){//初始化代碼txtBodyPart.BindDictItems("脊柱部位");txtIsFirstTime.BindDictItems("首發(fā)復(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("椎體");}

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

/// <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">控件默認(rèn)值</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">控件默認(rèn)值</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();//可以加快}

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

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

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

/// <summary>/// 綁定單選框組為指定的數(shù)據(jù)字典列表/// </summary>/// <param name="radGroup">單選框組</param>/// <param name="dictTypeName">字典大類</param>/// <param name="defaultValue">控件默認(rèn)值</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、附件管理分組-影像學(xué)資料管理

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

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

?

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

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

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

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

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

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

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

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

?

總結(jié)

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

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