让你的网站实现水平翻转效果
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>
<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>
3、可以看到border-collapse这个属性我们在控件属性里找不到，我们就把这个属性增加到控件里，定义一个类，类名叫TestControlStyle2，继承TableStyle(必须是Style或者Style的子类)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web.UI.WebControls;
namespace WebFormControl
{
public class TestControlStyle2:TableStyle
{
}
}
4、定义个枚举因为border-collapse这个属性有几个值可以选择的
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
namespace WebFormControl
{
public enum BorderCollapse
{
Collapse,
Inherit,
separate
}
}
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>
<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>
代码下载地址：点击下载