网页中浮动层的应用非常广泛，但Windows程序中却少有浮动层。难道Windows程序中不需要浮动层吗？根据不同的需要实现相应的功能，有人会觉得直接在界面上添加控件更简单，或者用对话窗口的方法实现是一样的，只要实现功能就可以了。当然，解决方法有很多种，这里给出采用浮动层的实现方式。比如在ComboBox控件中下拉选择项时，只能显示一列，而且项数很多的时候又不能查找，用一个带查找功能的多列下拉框会方便很多（如下图）。

 有些地方需要显示多行信息，但空间却比较小，像TextBox控件的Text属性一样，采用一个下拉文本框来显示和编辑，会更加灵活。

本示例包含三个组件，一个是提供下拉功能的组件DropdownComponent，一个是实现用鼠标移动控件位置的组件MovableComponent，一个是实现用鼠标调整控件大小的组件ResizableComponent。在示例中包含如何实现自定义可视化属性设计器UITypeEditor，如何将一个属性的值设置为多个枚举以及分解成多个枚举，如何实现类似ToolTip给其他控件添加属性的功能。

下面介绍各个组件的实现原理与要点：

下拉组件DropdownComponent

实现原理
1、点击ComboBox的下拉标志时，显示浮动控件
2、浮动控件失去焦点时，根据标志位判断是否隐藏控件
实现要点
1、需要将ComboBox控件的DropDownHeight属性设置为1（设置为0无效），避免出现多余的框
2、需要调整目标控件的显示位置，不能超出窗体的边框
3、可以根据需要不只针对ComboBox控件，只要在一个事件处理方法中显示浮动控件即可
该组件实现起来非常简单，主要是处理ComboBox控件的DropDown事件，以及浮动控件的Leave事件。
首先声明内部字段和属性

其中的FloatControlWidthMode属性用来指示浮动控件的宽度模式，当设置为UserDefine时，按照控件的设置尺寸显示，当设置为AutoWidth时，调整浮动控件的宽度与下拉框的宽度相等。
下面是下拉框事件处理以及相关的方法。其中将显示和隐藏方法重载了，一组是显示指定的控件，一组是用于显示外部控件，而且都设置为public。这里和之前用Label模拟网页链接的组件一样，可以根据需要选择是否公开方法，比如用其他控件控制显示浮动控件就必须用public。还有在显示浮动控件时，将浮动控件添加到窗体中，这是为了避免在其他容器中，浮动控件只显示一部分，添加到窗体后则可以完整显示，不会被其他容器遮挡。  

Code
        #region 浮动控件操作及事件处理

        private void AddDropDownEventHandler()
        {
            if (m_TargetComboBox != null)
            {
                TargetComboBox.DropDown += new EventHandler(TargetComboBox_DropDown);
                this.m_TargetComboBox.DropDownHeight = 1;
            }
        }

        private void RemoveDropDownEventHandler()
        {
            if (m_TargetComboBox != null)
            {
                TargetComboBox.DropDown -= new EventHandler(TargetComboBox_DropDown);
                this.m_TargetComboBox.DropDownHeight = 106;
            }
        }

        private void AddLeaveEventHanlder()
        {
            if (m_FloatControl != null)
            {
                FloatControl.Leave += new EventHandler(FloatControl_Leave);
                this.m_FloatControl.Visible = false;
            }
        }

        private void RemoveLeaveEventHandler()
        {
            if (m_FloatControl != null)
            {
                FloatControl.Leave -= new EventHandler(FloatControl_Leave);
            }
        }

        void FloatControl_Leave(object sender, EventArgs e)
        {
            if (m_FloatControl != null && m_AutoHide)
                this.HideFloatControl(this.m_FloatControl);
        }

        void TargetComboBox_DropDown(object sender, EventArgs e)
        {
            if (m_FloatControl != null)
                this.ShowFloatControl(this.m_TargetComboBox, this.m_FloatControl);
        }

        /// <summary>
        /// 显示设置的浮动控件
        /// </summary>
        public void ShowFloatControl()
        {
            this.ShowFloatControl(this.m_TargetComboBox, this.m_FloatControl);
        }

        /// <summary>
        /// 隐藏设置的浮动控件
        /// </summary>
        public void HideFloatControl()
        {
            this.HideFloatControl(this.m_FloatControl);
        }

        #endregion 浮动控件操作及事件处理


        #region 浮动控件公共操作

        /// <summary>
        /// 显示指定的浮动控件
        /// </summary>
        /// <param name="DropdownControl">下拉控件，可以不是ComboBox</param>
        /// <param name="FloatControl">要显示的控件</param>
        public void ShowFloatControl(Control DropdownControl, Control FloatControl)
        {
            if (DropdownControl == null)
                throw new ArgumentNullException("DropdownControl", "指定的下拉控件为null。");

            if (FloatControl == null)
                throw new ArgumentNullException("FloatControl", "指定要显示的浮动控件为null。");

            if (this.OnFloatControlDisplayChanging(FloatControl).Cancel)
                return;

            Form ParentForm = DropdownControl.FindForm();

            //将浮动控件添加到窗体上
            if (!ParentForm.Controls.Contains(FloatControl))
                ParentForm.Controls.Add(FloatControl);

            //调整浮动控件宽度
            if (this.m_FloatControlWidthMode == DropDownControlWidthModeEnum.AutoWidth)
                FloatControl.Width = DropdownControl.Width;

            //计算坐标
            Control ParentControl = DropdownControl.Parent;
            int intLeft = 0, intTop = 0;
            intLeft = DropdownControl.Left;
            intTop = DropdownControl.Top + DropdownControl.Height;

            //获取相对窗体的位置
            while (ParentControl != ParentForm)
            {
                intLeft += ParentControl.Left;
                intTop += ParentControl.Top;
                ParentControl = ParentControl.Parent;
            }

            //判断是否超出窗体范围
            if (intLeft + FloatControl.Width > ParentForm.Width)
            {
                int intOffset = FloatControl.Width - DropdownControl.Width;
                if (intLeft - intOffset > 0)
                {
                    intLeft -= intOffset;
                }
                if (this.m_FloatControlWidthMode == DropDownControlWidthModeEnum.AutoWidth)
                    FloatControl.Width = FloatControl.Width - intOffset;
            }

            if (intTop + FloatControl.Height > ParentForm.Height)
            {
                int intOffset = FloatControl.Height + DropdownControl.Height;
                if (intTop - intOffset > 0)
                {
                    intTop -= intOffset;
                }
            }

            //设置浮动控件位置
            FloatControl.Left = intLeft;
            FloatControl.Top = intTop;

            //显示浮动控件
            FloatControl.Visible = true;
            FloatControl.BringToFront();
            FloatControl.Select();

            this.OnFloatControlDisplayChanged(FloatControl);
        }

        /// <summary>
        /// 隐藏指定的浮动控件
        /// </summary>
        /// <param name="FloatControl">要隐藏的控件</param>
        public void HideFloatControl(Control FloatControl)
        {
            if (FloatControl == null)
                throw new ArgumentNullException("FloatControl", "指定要显示的浮动控件为null。");

            Form ParentForm = this.m_TargetComboBox.FindForm();
            if (ParentForm.Controls.Contains(FloatControl))
            {
                if (this.OnFloatControlDisplayChanging(FloatControl).Cancel)
                    return;

                ParentForm.Controls.Remove(FloatControl);
                FloatControl.SendToBack();
                FloatControl.Visible = false;

                this.OnFloatControlDisplayChanged(FloatControl);
            }
        }

        #endregion 浮动控件公共操作
        //另外组件中还添加了几个事件，可以更灵活控制浮动控件的显示。
        #region 内部事件及事件处理

        /// <summary>
        /// 浮动控件显示状态即将改变事件
        /// </summary>
        [Description("浮动控件显示状态即将改变事件。")]
        public event FloatControlDisplayChangingEventHandler FloatControlDisplayChanging;
        /// <summary>
        /// 浮动控件显示状态已改变事件
        /// </summary>
        [Description("浮动控件显示状态已改变事件。")]
        public event FloatControlDisplayChangdEventHandler FloatControlDisplayChanged;

        private FloatControlDisplayChangingEventArgs OnFloatControlDisplayChanging(Control FloatControl)
        {
            FloatControlDisplayChangingEventArgs myEventArgs = new FloatControlDisplayChangingEventArgs(FloatControl);
            if (this.FloatControlDisplayChanging != null)
                this.FloatControlDisplayChanging(this, myEventArgs);
            return myEventArgs;
        }

        private void OnFloatControlDisplayChanged(Control FloatControl)
        {
            if (this.FloatControlDisplayChanged != null)
                this.FloatControlDisplayChanged(this, new FloatControlDisplayChangedEventArgs(FloatControl));
        }

        #endregion 内部事件及事件处理

 

下面介绍鼠标相关的两个组件，这两个组件有一定的关联性。

可移动组件MovableComponent

实现原理
1、鼠标移动到指定控件上，改变鼠标样式为可移动状态
2、按下鼠标时记录鼠标的当前位置
3、鼠标移动时检测是否按下左键，如果按下左键则根据当前位置和之前记录的位置计算位移
4、根据鼠标的位移设置控件的坐标
5、鼠标离开则恢复默认鼠标样式
实现要点：
1、被移动控件和响应鼠标操作的控件不一定是同一个，比如示例中列标题响应操作，内容区域不响应，移动的是最外层的那个Panel。需要设置两个属性，一个响应操作，一个被移动，两者可以一致。
2、响应操作的控件内部子控件也要有不同的响应，比如示例中标题栏中的图标和标题文字响应操作，但关闭按钮不响应。这里用扩展属性实现该功能，可以给内部控件添加一个是否响应操作的属性，让设置更加灵活。

可改变大小组件ResizableComponent

实现原理
1、这里将控件分成9个区域，上左、上中、上右、中左、中央、中右、下左、下中、下右。中央区域被其他8个区域包围形成一个虚拟的边框。边框的宽度可以自定义，中央区域不响应操作，其他8个区域可以选择性响应操作。
2、鼠标移动过程中检测鼠标坐标。如果处在边缘处，则根据不同的位置设置不同的改变大小的鼠标样式。
3、在鼠标按下事件中记录下当前鼠标坐标
4、鼠标移动过程中，如果鼠标左键按下，则根据当前位置和之前记录的位置计算位移
5、根据鼠标位移和鼠标所处的区域，调整控件的大小和位置
6、鼠标移开时恢复默认鼠标样式
实现要点
1、内部控件可能覆盖边缘，内部控件也需要处理鼠标事件。和可移动组件一样通过扩展属性指示内部控件是否允许响应操作。
2、可响应改变大小的位置可以自定义，实现自定义UITypeEditor，可视化设置。
3、向上或向右改变大小需要同时改变控件的位置，非对角线方向改变大小时要忽略与当前移动方向垂直的位移。

下面介绍详细的实现过程。
枚举：
DirectionEnum：方向枚举，All-所有方向，Horizontal-水平方向，Vertical-垂直方向。该枚举在移动操作和改变大小操作中都可以用到。
ResizeHandleAreaEnum：改变大小可处理区域枚举，把需要处理改变大小的控件分成3*3的区域，除了Center区域，其他区域都允许响应鼠标操作。该枚举变量用自定义UITypeEditor进行编辑，后面再详细介绍。

MovableComponent

 ResizableComponent组件的属性有：

为了让该枚举值在PropertyGrid中编辑时显示自定义的UI界面，需要继承UITypeEditor类，关于UITypeEditor的具体介绍请参考MSDN，这里的实现代码如下：

Code
    internal class ResizeHandleAreaUITypeEditor : UITypeEditor
    {
        private ResizeHandleAreaEditorControl m_EditorControl = null;

        public override UITypeEditorEditStyle GetEditStyle(ITypeDescriptorContext context)
        {
            return UITypeEditorEditStyle.DropDown;
        }

        public override object EditValue(ITypeDescriptorContext context, IServiceProvider provider, object value)
        {
            if (m_EditorControl == null)
                m_EditorControl = new ResizeHandleAreaEditorControl();

            m_EditorControl.SetValue((ResizeHandleAreaEnum)value);

            IWindowsFormsEditorService edSvc = (IWindowsFormsEditorService)provider.GetService(typeof(IWindowsFormsEditorService));
            edSvc.DropDownControl(m_EditorControl);

            return m_EditorControl.ResizeHandleAreas;
        }
    }

在该枚举上添加Editor特性[Editor(typeof(ResizeHandleAreaUITypeEditor), typeof(System.Drawing.Design.UITypeEditor))]，之后只要使用到该属性，在PropertyGrid中显示的就是UI编辑界面。 

ResizableComponent组件也用到了扩展属性，和上面的MovableComponent组件的实现方法类似，这里不再介绍。

示例中用一个下拉框调用一个浮动层，浮动层的标题栏可以拖动，但标题栏边框不响应改变大小操作。因为将标题栏的相关控件的HandleResize属性设置为了False，否则会造成移动的同时改变大小。要实现本篇开头给出的多列下拉框的效果，可以做一个自定义控件，将一个包含DataGridView控件的Panel控件作为浮动控件通过DropdownComponent组件附加到ComboBox上即可。至于数据项的绑定，会在以后的示例中介绍到。

另外这里有个小bug，当快速移动鼠标时，改变大小和移动操作都会产生滞后的效果，希望有解决方法的朋友留言。

示例代码下载： http://files.cnblogs.com/conexpress/TestMouseComponent.zip

 

Enable：指示组件是否可用

EnableInnerControl：当内部控件覆盖目标可缩放控件的边缘时，是否允许内部控件响应鼠标改变大小操作

MinSize：可缩放控件可以调整的最小尺寸

ResizableControl：目标可改变大小的控件

ResizeBorderWidth：响应改变大小操作的边框宽度，对应可缩放控件的内部虚拟边框，当鼠标移动到这一个虚拟边框中会改变样式

ResizeDirection：可改变大小的方向，水平、垂直和不限制

ResizeHandleAreas：响应改变大小操作的控制区域，用自定义UITypeEditor实现。效果如下图所示：

 

该组件处理目标控件的三个鼠标事件，MouseMove、MouseLeave和MouseDown。

MouseMove处理方法中，检测鼠标的坐标所处的区域，然后根据区域和允许调整大小的方向设置不同的鼠标样式。

如果鼠标左键按下，则检测鼠标的位移量，再根据所处的区域调整控件的大小和位置。

MouseDown处理方法中，记录下鼠标的位置，供调整大小时计算位移量。

MouseLeave处理方法中，恢复鼠标样式。

• 共4页:
• 上一页
• 1
• 2
• 3
• 4
• 下一页

• 上一篇：ASP.NET数据库连接池Data Connection Framework
• 下一篇：ASP.NET动态设置页面标题方法

分享到： QQ空间 新浪微博 人人网 开心网 更多

精彩图集

精彩文章

• asp.net实现word文档在线预览功能的
• AspNetPager控件的最基本用法示例介
• ASP.NET中使用TreeView显示文件的方法
• 使用asp.net调用谷歌地图api示例
• 一个ASP.NET的MYSQL的数据库操作类自
• Repeater控件与PagedDataSource结合实现
• asp.net不同页面间数据传递的多种
• asp.net自定义分页控件示例
• 压缩aspx页面删除多余空格的两种
• asp.net 备份和恢复数据库的方法示

热点文章

• 免费打印控件推荐：Web打印控件
• C#开发ActiveX控件.NET开发OCX控件案
• VS2008发布项目出现“因为某项目未
• C#屏幕捕捉编程之C#使用Screen类等
• 关于Server Error in / Application
• C#使用Tesseract组件来识别OCR验证码
• 设置Asp.net应用debug为false,关闭AS
• asp.net导出excel数据的常见方法汇总
• 免费图表控件MsChart教程系列之实
• ASP.Net巧用窗体母版页实例

• 最新文章
• 最新日志
• 最新帖子

• ASP.NET中MVC从后台控制器传递数据到前台视
• ASP.NET在MVC中MaxLength特性设置无效的解决方
• asp.net使用AJAX实现无刷新分页
• asp.net+ajaxfileupload.js 实现文件异步上传代码
• asp.net fileupload控件上传文件与多文件上传
• .NET验证组件Fluent Validation使用指南
• asp.net FileUpload控件实现文件格式判断与文件
• smtp发送带附件的邮件代码分享
• ASP.NET自定义Web服务器控件之Button控件

• 不能看到某个圆圈中的数字，就说明某方面潜伏问题
• 恶搞新交规
• 三个故事说穿了许多人
• Linux下安装、启动MySQL
• 学习PHP&MySQL之——字符编码篇（
• Navicat连接本地Mysql出现10061错
• MySQL Connector/Net 6.6.
• mysql主从同步图
• "未找到 Oracle 客户端和网络组

热门标签

mysql自动备份 dll生成lib connections nginx 相册 3D扇形 捕获 双括号 SQLAlchemy 虚继承 验证用户名 os模块 bg is 创建Web服务 屏蔽HOME键 data-* Twitter 页面显示 华为 dbi overload 城市判断 过滤选择器 Oracle用户解锁 边 连续获取 基础 无域 updatepanel用 js获取属性 readfile 解 构造icmp 逐行读取 水平滚动 读写分离 getopt模块 PHPThumb 自动调节 移除tr 音效 简介 排序数组 WinExec 大容量数据 sql数据库连接 脚本全局 charset 不用图片 mbstring扩展 php变量作用域 logcat命令 线程并发 横向报表 JS获取URL 目标函数 主框架 主分区 并发插入优化 PHP ddos

赞助商链接