第一章 .Net 控件开发(WebForm) 开发简单自定义控件(6) 自定义Style类

来源:互联网 发布:阿里大数据竞赛 编辑:程序博客网 时间:2024/06/06 01:34

 1、在写这章之前,要补充下上章没讲完的一点,我们把控件拖到页面上看到了很多属性除了我们定义的两个属性(CellPadding和CellSpacing)外,大家可以设置下。

2、我们可以看到TableStyle只支持部分Css属性,所以我们要重新定义个样式,让它支持更多的Css.定义个新类必须继承Style或者TableStyle,我们先看下实现的效果图和生成的HTML源码。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title> </title>    <style type="text/css">        #TestControl21        {          border-collapse:collapse;        }         #TestControl21 tr td         {             border-color:Black;             border-style:solid;             border-width:1px;         }    </style></head><body>    <form method="post" action="Default.aspx" id="form1"><div class="aspNetHidden"><input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTIyMDcwODcwNmRklsDUr4A0E/gAA0Qlh47G6fDyYmXq2UPgtXywVTJTHqA=" /></div>     <div>        <table id="TestControl21"><tr><td>姓名</td><td><input id="Txt_Name" type="text" name="Txt_Name" /></td></tr><tr><td colspan="2" align="center"><input id="Btn_Show" type="submit" value="显示" name="Btn_Show" /></td></tr></table>    </div>    </form></body></html>

 5、定义TestControlStyle2类的默认构造函数以及对构造函数的重载,使用默认构造函数进行实例化的自定义Style类的用户,期望该类使用自身的ViewState集合管理页面回传的属性状态,我们在后面会讲到状态管理的时候回讲到。我们对构造函数进行重载传个StateBag集合参数给该类,并且希望利用该类使用StateBag集合来管理页面回传的属性。

public TestControlStyle2()        {        }        public TestControlStyle2(StateBag statebag)            : base(statebag)        {        }

6、定义个私有方法返回枚举的字符串值。

private string GetBorderCollapseName(BorderCollapse bordercollapse)        {            string result = "collapse";            switch (bordercollapse)            {                case BorderCollapse.Collapse:                    result = "collapse";                    break;                case BorderCollapse.Inherit:                    result = "inherit";                    break;                case BorderCollapse.Separate:                    result = "separate";                    break;            }            return result;        }

7、自定义的Style类必须为每个所支持的新的Css样式属性公开个强类型属性。每个属性都必须使用Style类的ViewState集合作为内部存储。

public BorderCollapse BorderCollapse        {            get { return ViewState["BorderCollapse"] != null ? (BorderCollapse)ViewState["BorderCollapse"] : BorderCollapse.Collapse; }            set { ViewState["BorderCollapse"] = value; }        }

8、我们在定义一个内部方法表示ViewState集合中是否存在该键,存在返回true,否则返回false。

 internal bool IsSet(string key)        {            return ViewState[key] != null;        }

9、重写IsEmpty属性,重写该属性可以有效的指示了是否设置了自定义Style类的样式属性。

public override bool IsEmpty        {            get            {                return base.IsEmpty && !IsSet("BorderCollapse");            }        }

10、由于自定义的Style类的每个属性的set访问器都向ViewState集合添加了新项,所以要重写Reste方法,以便删除已经添加到集合中的属性项。

public override void Reset()        {            base.Reset();            if (IsEmpty)            {                return;            }            if (IsSet("BorderCollapse"))                ViewState.Remove("BorderCollapse");        }

11、重写FillStyleAttributes方法,该方法将集合作为参数,以便将所支持的的Css样式属性添加到集合中。

        protected override void FillStyleAttributes(CssStyleCollection attributes, IUrlResolutionService urlResolver)        {            base.FillStyleAttributes(attributes, urlResolver);            if(IsSet("BorderCollapse"))                attributes.Add("border-collapse",GetBorderCollapseName(BorderCollapse));        }

12、重写CopyForm方法,以便将参数Style对象的属性值复制给相关的样式属性。

public override void CopyFrom(Style s)        {            if (s == null)                return;            base.CopyFrom(s);            TestControlStyle2 ts = s as TestControlStyle2;            if (ts == null || ts.IsEmpty)                return;            if (IsSet("BorderCollapse"))                BorderCollapse = ts.BorderCollapse;        }

 13、重写MergeWith方法,将参数Style对象的样式属性值分别与自身的样式属性合并。

public override void MergeWith(Style s)        {            if (s == null)                return;            if (IsEmpty)            {                CopyFrom(s);                return;            }            TestControlStyle2 ts = s as TestControlStyle2;            if (ts == null || ts.IsEmpty)                return;            if (!IsSet("BorderCollapse") && ts.IsSet("BorderCollapse"))                BorderCollapse = ts.BorderCollapse;        }

14、使用自定义的样式,修改TestControl2的CreateControlStyle方法。

 protected override Style CreateControlStyle()        {            //return new TableStyle(ViewState);//控件与ControlStyle共享ViewState            //return base.CreateControlStyle();            return new TestControlStyle2(ViewState);//使用自定义样式        }

15、新增TestControl2公开BorderCollapse属性。

 public virtual BorderCollapse BorderCollapse        {            get { return ((TestControlStyle2)ControlStyle).BorderCollapse; }            set { ((TestControlStyle2)ControlStyle).BorderCollapse = value; }        }

16、我们把控件拖到页面上设置控件的BorderCollapse为Collapse,生成的界面就是我们刚开始的界面了,看下生成后的Html源码,已经设置属性了。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><%@ Register Assembly="WebFormControl" Namespace="WebFormControl" TagPrefix="cc1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title></title>    <style type="text/css">         #TestControl21 tr td         {             border-color:Black;             border-style:solid;             border-width:1px;         }    </style></head><body>    <form id="form1" runat="server">    <div>        <cc1:TestControl2 ID="TestControl21" runat="server" BorderCollapse="Collapse" />    </div>    </form></body></html>

 

 <table id="TestControl21" style="border-collapse:collapse;"><tr><td>姓名</td><td><input id="Txt_Name" type="text" name="Txt_Name" /></td></tr><tr><td colspan="2" align="center"><input id="Btn_Show" type="submit" value="显示" name="Btn_Show" /></td></tr></table>

代码下载地址:点击下载

本博客内容有些来源于网络或书籍如果侵害到你的权益,请及时联系我(hch458458@vip.qq.com)版权归nethch所有,转载请注明出处!

 

	
				
		
原创粉丝点击