脊柱外科病人资料管理系统的界面设计分析

在日常的学习研究中，或者有时候由于开发项目的各类须要，会对界面设计进行各类方式的改良尝试，遇到好的经验实践，就一直在我本身的各类项目中沿用下去，本文主要分析个人一款病人资料管理系统-脊柱外科病人资料管理系统的系统界面设计，以及如何基于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开发框架中的优化和改善，总之，但愿这些在实际项目中的一些案例使用，但愿对你们有启发做用，期待你们在这方面的共同探讨。