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

最新推荐文章于 2024-03-22 13:51:39 发布

dengdaibingningm

最新推荐文章于 2024-03-22 13:51:39 发布

阅读量564

点赞数

分类专栏： .Net 控件开发(WebForm) 文章标签： webform .net attributes xhtml null assembly

本文链接：https://blog.csdn.net/dengdaibingningm/article/details/6729899

版权

.Net 控件开发(WebForm) 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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所有,转载请注明出处!