脊柱外科病人資料管理系統的界面設計分析

在日常的學習研究中，或者有時候由於開發項目的各類須要，會對界面設計進行各類方式的改良嘗試，遇到好的經驗實踐，就一直在我本身的各類項目中沿用下去，本文主要分析個人一款病人資料管理系統-脊柱外科病人資料管理系統的系統界面設計，以及如何基於DevExpress控件的具體實現，從而爲用戶提供更好的界面效果體驗。

一、系統主體界面設計

系統主體界面設計，遵循個人《WInform開發框架》的技術特色，使用基於Ribbon樣式的多文檔佈局界面框架，經過在主工具欄裏面對功能進行分類，實現更多的功能點排列，以下界面所示。

這樣的界面效果適合大多數的Mis系統的佈局，也較好呈現相關功能點。

 

二、查詢功能的面板摺疊

從上圖咱們看到，患者資料的查詢條件比較多，已經佔用了大部分的界面篇幅，可是咱們經常使用的條件又須要放在在主面板裏面，所以我經過在主界面中放置一個SplitContainerControl的控件，對屏幕控件進行分開，能夠經過上下調整屏幕空間，而且還能夠經過下圖中間的一個三角符號，進行上面查詢條件面板的隱藏，從而實現較好的屏幕調整。

在系統的運行狀態界面中，單擊面板的三角符號能夠把界面摺疊到上面，摺疊後查詢條件的面板所有隱藏起來，須要展開在單擊三角符號便可，摺疊效果以下所示。

以上界面效果，經過在界面裏面放置一個SplitContainerControl控件，而後在上下面板放置好相關的控件，並設置SplitContainerControl其中的一些屬性便可，屬性設置以下所示。

 

三、字典控件的數據綁定

在通常的系統界面裏面，咱們每每須要從字典模塊中提取數據，綁定到一些界面控件上，例如，下拉列表控件、單選組合控件，複選框組合控件等。下面介紹這些字典控件的數據綁定方面的案例代碼。

咱們看看這個界面的數據綁定代碼。

        /// <summary>
        /// 初始化字典列表內容
        /// </summary>
        private void InitDictItem()
        {
            //初始化代碼
            txtBodyPart.BindDictItems("脊柱部位");
            txtIsFirstTime.BindDictItems("首發復發");
            txtInDiagnosis.BindDictItems("入院診斷");
            txtDoctor.BindDictItems("主管醫生");
            txtTreatingPhysician.BindDictItems("經治醫生");

            txtLeaveDiagnosis.BindDictItems("最後診斷");
            txtLeaveCondition.BindDictItems("出院狀況");
            txtSurgeonDoctor.BindDictItems("主刀醫生");
            txtSurgeryName.BindDictItems("手術名稱");
            txtSurgeryType.BindDictItems("手術方式");
            txtPathology.BindDictItems("病理診斷");
            txtIntervertebral.BindDictItems("椎間隙");
            txtVertebral.BindDictItems("椎體");
        }

這種方式是直接使用了擴展方法的方式定義控件的BindDictItems方法，把全部字典控件類型都擴展了該函數，以便實現更好的統一操做，ComboBoxEdit控件的擴展方法定義以下所示。

        /// <summary>
        /// 設置下拉列表選中指定的值
        /// </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>
        /// 綁定下拉列表控件爲指定的數據字典列表
        /// </summary>
        /// <param name="combo">下拉列表控件</param>
        /// <param name="dictTypeName">數據字典類型名稱</param>
        public static void BindDictItems(this ComboBoxEdit combo, string dictTypeName)
        {
            BindDictItems(combo, dictTypeName, null);
        }

        /// <summary>
        /// 綁定下拉列表控件爲指定的數據字典列表
        /// </summary>
        /// <param name="combo">下拉列表控件</param>
        /// <param name="dictTypeName">數據字典類型名稱</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>
        /// 綁定下拉列表控件爲指定的數據字典列表
        /// </summary>
        /// <param name="combo">下拉列表控件</param>
        /// <param name="itemList">數據字典列表</param>
        public static void BindDictItems(this ComboBoxEdit combo, List<CListItem> itemList)
        {
            BindDictItems(combo, itemList, null);
        }

        /// <summary>
        /// 綁定下拉列表控件爲指定的數據字典列表
        /// </summary>
        /// <param name="combo">下拉列表控件</param>
        /// <param name="itemList">數據字典列表</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();//能夠加快
        }

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

在上面的最後一個函數代碼裏面，值得注意的是，我在其中添加註釋說明的紅色代碼，這個能夠很好提升界面的響應效率，利用BeginUpdate()和EndUpdate()的方法，能夠極大提升數據綁定的效率，特別在數據源很大（如幾百個以上的數據項目），速度能夠提升好幾倍，因此若是控件提供了這樣的兩個方法，咱們在數據綁定的時候，最好堅持使用，如TreeView控件也提供了。

除了ComoboBoxEdit控件的數據源綁定操做，咱們也能夠經過以上相同的方法擴展其餘數據源控件，以下面是RadioGroup控件的數據綁定擴展方法定義，也提供了上面相似的BindDictItems()方法的定義，直接能夠綁定數據字典裏面的內容。

        /// <summary>
        /// 綁定單選框組爲指定的數據字典列表
        /// </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();//能夠加快
        }

 

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

在不少病人資料管理模塊中，都須要管理影像學資料，這個在個人Winfrom開發框架中，提供了一個附件管理的通用模塊供重複使用，所以對這些操做並不會增長太多的工做量，統一使用便可，界面效果以下所示。

附件管理模塊提供了分類的附件管理，圖片縮略圖預覽和圖片預覽，多文件上傳、下載、刪除等附件操做，知足咱們對附件管理的大多數要求，以下界面所示。更詳細的通用附件管理模塊的呈現和使用，可參考我以前的隨筆《Winform開發框架之附件管理應用》，以及《Winform開發框架之通用附件管理模塊》隨筆。

 

五、特殊界面佈局的調整

在錄入數據的界面的設計中， 我通常傾向於使用LayoutControl控件實現佈局功能，這個控件對咱們排版各類控件很是方便。

不過因爲該佈局控件使用相似於表格單元格的模式，以下這種方式的佈局是常規的控件排列方式（設計模式下界面），在LayoutControl控件中經過拉動排列控件便可很好實現。

但也是因爲該控件的佈局設計有點相似於表格行列的方式，所以也要設計更多樣化的界面效果也有所約束，但整體來講，不失爲一種很是棒的佈局控件，它的一些缺點，能夠經過一些特殊的操做進行避免。下面是我在其中的一個界面中使用該控件調整後獲得的一個多樣化一點的界面表達方式，有點相似於分組分類的方式，使得輸入的內容更加易讀。

這個調整好的界面佈局的設計模式下的效果以下所示。

 其中咱們以「感受系統」標籤爲例，咱們在設計界面中增長一個EmptySpaceItem（注意不要拖入LableControl控件，這個標籤控件不適合標題），調整到最佳位置後，須要設置好其相關的屬性，才能夠獲得更好的界面效果，設計屬性以下所示。

第二個的縮進標題的效果，也是經過相似的方式，設置控件的約束類型爲Custom，而後調整它的最大最小寬度（Width），而且不設置文本爲顯示狀態，從而控制標籤的位置，實現佔位符的效果。屬性以下所示。

 以上就是我在脊柱外科病人資料管理系統裏面中，對程序界面設計分析和內在使用的一些經驗總結，這些積累很大程度上，也是基於個人Winform開發框架中的優化和改善，總之，但願這些在實際項目中的一些案例使用，但願對你們有啓發做用，期待你們在這方面的共同探討。