asp.net2.0自定义控件---鼠标移到按钮上更改背景颜色,移出后恢复 _asp文件 <asp: button onmouseover=''>-CSDN博客

如果你想让鼠标移到按钮上更改背景颜色,移出后恢复，一般用以下代码，那能不能把他写成自定义控件呢？

<asp:Button ID="Button1" runat="server" onmouseover="this.style.backgroundColor='DodgerBlue';this.style.color='black';"
onmouseout="this.style.backgroundColor='Silver';this.style.color='black';" Text="Button" BackColor="Silver" BorderWidth="1px" Height="21px" />

现在我们就开始吧：
1、建立项目 ButtonColor，选择 Web 控件库

2、删除默认的文件 WebCustomControl1.cs，选择项目 ButtonColor 右键->添加-新建项，在弹出以下的窗口里选择 Web 自定义控件，名字为 ButtonColor

3、找到类 ButtonColor.cs 中的代码 public class ButtonColor : WebControl 一行，替换为：public class ButtonColor : System.Web.UI.WebControls.Button
4、删除 public class ButtonColor : System.Web.UI.WebControls.Button 一行下面大括号所包含的全部有代码，而替换为以下代码

        protected override void Render(HtmlTextWriter output)
        {
            //设定按钮默认属性
            base.Text = "Button";
            base.BorderWidth = |3'3|
            base.Height = 21;
            base.Width = 57;
            base.BackColor = System.Drawing.Color.Silver;
            //获得用户设置的按钮颜色
            base.Attributes.Add("onmouseover", "this.style.backgroundColor='DodgerBlue';this.style.color='black';");
            base.Attributes.Add("onmouseout", "this.style.backgroundColor='Silver';this.style.color='black';");
            base.Render(output);
        }

5、选择项目 ButtonColor 右键->生成,如果没有发现错误，则一个控件就做完了
6、新建立一个网站 TestButtonColor，把生成的控件添加到工具箱里，方法是在工具箱的常规选项卡里点右键->选择项(见下图）

7、在弹出的对话框里，点“浏览”找到你刚才创建的控件 ButtonColor.dll

确定后，控件就加如到工具箱里了

8、拖放两个控件 ButtonColor 到网页里运行，效果如下，当鼠标放到控件上时，自动更改颜色

9、下面我们增加两个属性来改变鼠标放到按钮上的颜色，和鼠标移开按钮的颜色。首先打开刚才建立的项目 ButtonColor
10、选择项目 ButtonColor 下的引用，点右键->添加引用->选择 System.Windows.Forms->确定(原因是，属性里加个帮助对话框）

11、倒入命名空间 using System.Drawing;删除 ButtonColor.cs 里 Render 方法及其代码，替换为以下代码

        private Color _MouseOverBgColor = Color.DodgerBlue;
        private Color _MouseOutBgColor = Color.Silver;
        /// </summary>
        /// 设置鼠标在按钮上时，背景的颜色。
        /// </summary>
        [Browsable(true),
         Category("Appearance"),
         Description("设置鼠标在按钮上时，按钮背景的颜色")]
        public Color MouseOverBgColor
        {
            get
            {
                return this._MouseOverBgColor;
            }
            set
            {
                this._MouseOverBgColor = value;
            }
        }
        /// <summary>
        /// 设置鼠标移出后，按钮背景颜色。
        /// </summary>
        [Browsable(true),
         Category("Appearance"),
         Description("设置鼠标移出按钮后，按钮背景颜色")]
        public Color MouseOutBgColor
        {
            get
            {
                return this._MouseOutBgColor;
            }
            set
            {
                this._MouseOutBgColor = value;
            }
        }
        /// <summary>
        /// 将颜色转换为带“#”前缀的字符串（不是颜色名）
        /// </summary>
        /// <param name="color">颜色</param>
        /// <returns>带#前缀的字符串</returns>
        private string ColorToString(Color color)
        {
            return "#" + color.R.ToString("x").PadLeft(2, '0') +
                color.G.ToString("x").PadLeft(2, '0') + color.B.ToString("x").PadLeft(2, '0');
        }
        /// <summary>
        /// 将字符串(#RRGGBB)转换为 GDI+颜色（此处没用到，但很多人问，还是写上了）
        /// </summary>
        /// <param name="str">要转换的字符串</param>
        /// <returns>GDI+颜色</returns>
        private Color ColorFromString(string str)
        {
            return ColorTranslator.FromHtml(str);
        }
        /// <summary>
        /// 指定控件的帮助信息
        /// </summary>
        private string _help = "帮助";
        [CategoryAttribute("自定义编辑器"),
        DefaultValueAttribute("1.0"),
        DescriptionAttribute("获得控件主要属性的帮助。"),
        ReadOnlyAttribute(true),
        EditorAttribute(typeof(AppVerConverter), typeof(System.Drawing.Design.UITypeEditor))]
        public string Help
        {
            get { return this._help; }
            set { this._help = value; }
        }
        /// <summary>
        /// 自定义UI的属性编辑器(弹出消息)
        /// </summary>
        public class AppVerConverter : System.Drawing.Design.UITypeEditor
        {
            /// <summary>
            /// 覆盖此方法以返回编辑器的类型。
            /// </summary>
            public override System.Drawing.Design.UITypeEditorEditStyle GetEditStyle(System.ComponentModel.ITypeDescriptorContext context)
            {
                return System.Drawing.Design.UITypeEditorEditStyle.Modal;
            }
            /// <summary>
            /// 覆盖此方法以显示版本信息，Button 控件，版本 V1.0
            /// </summary>
            public override object EditValue(System.ComponentModel.ITypeDescriptorContext context, System.IServiceProvider provider, object value)
            {
                string help = "改变按钮背景颜色帮助信息 ";
                help += "主要属性： ";
                help += "MouseOverBgColor 属性：设置鼠标在按钮上时，按钮背景的颜色。 ";
                help += "MouseOutBgColor 属性：设置鼠标移出按钮后，按钮背景颜色。 ";
                help += "Help 属性：弹出对话框，获得控件主要属性的帮助。 ";
                help += "版本更新： Version1.0：2007年";
                System.Windows.Forms.MessageBox.Show(help, "帮助信息");
                return value;
            }
        }
        protected override void Render(HtmlTextWriter output)
        {
            //设定按钮默认属性
            base.Text = "Button";
            base.BorderWidth = |3'3|
            base.Height = 21;
            base.Width = 57;
            base.BackColor = _MouseOutBgColor;
            //获得用户设置的按钮颜色
            if (_MouseOutBgColor.ToString() != "" && _MouseOverBgColor.ToString() != "")
            {
                base.Attributes.Add("onmouseover", "this.style.backgroundColor='" + ColorToString(_MouseOverBgColor) + "';this.style.color='black';");
                base.Attributes.Add("onmouseout", "this.style.backgroundColor='" + ColorToString(_MouseOutBgColor) + "';this.style.color='black';");
            }
            base.Render(output);
        }