关闭

asp.net2.0自定义控件---鼠标移到按钮上更改背景颜色,移出后恢复

3176人阅读 评论(4) 收藏 举报

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

<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 = 1
;
            
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 
+= " 开发作者:延边职大.许老师在线支持:xuhongkaicn@yahoo.com.cn"
;
                help 
+= " 版本更新: Version1.0:2007年"
;

                System.Windows.Forms.MessageBox.Show(help, 
"帮助信息"
);
                
return
 value;
            }
        }

        
protected override void
 Render(HtmlTextWriter output)
        {
            
//设定按钮默认属性

            base.Text = "Button";
            
base.BorderWidth = 1
;
            
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);
        }

12、重新生成此控件,并添加到工具箱里,此时拖放控件到网页里选择控件后,查看属性,发现此按钮多了MouseOverBgColor属性,MouseOutBgColor属性,Help属性。

 

 


























13、当点帮助属性时,会弹出一个对话框,获得此控件的帮助
抓图太累了,这是第一个例子就详细点吧,以后就只写类了。

0
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1137281次
    • 积分:14165
    • 等级:
    • 排名:第852名
    • 原创:313篇
    • 转载:266篇
    • 译文:0篇
    • 评论:236条
    最新评论