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


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

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

  • 相关阅读:
    STL 算法 std::min
    SAP UI5 初学者教程之五:视图控制器初探 试读版
    SAP UI5 的初始化过程
    Angular 应用里的摇树优化
    Angular 应用里的 vendor.js 是用来干什么的?
    SAP UI5 初学者教程之四:XML 视图初探试读版
    SAP UI5 初学者教程之三:开始接触第一个 SAP UI5 控件 试读版
    SAP UI5 初学者教程之二:SAP UI5 的引导过程(Bootstrap) 试读版
    SAP UI5 初学者教程之一:Hello World 试读版
    SAP UI5 初学者教程的学习目录
  • 原文地址:https://www.cnblogs.com/xiaofengfeng/p/1936941.html
Copyright © 2020-2023  润新知