[IT168 技术文档] 上一篇讲了关于属性方面的一些东西 ,这次讲的是关于样式.
位于WebControls命名空间的style类为优异样式类.大部分标准控件都拥有其样式属性.
1.下面为设置样式方法
(1)你可以直接设置控件样式
Button1.BackColor = System.Drawing.Color.Red;(2)通过获取web控件的样式集合来设置
Button1.ControlStyle.BackColor = System.Drawing.Color.Red;(3)通过设置样式类,利用WebControl类的ApplyStyle方法来复制非空样式,并改写现有样式
myStyle.BackColor = System.Drawing.Color.Red; Button1.ApplyStyle(myStyle);(4)一直定义样式表属性,不使用控件属性,与定义HTML样式相同.
style="background-color: red"下面引出话题,为什么要使用样式?大家知道定义样式可以使用统一风格,定义好的样式,可以重复使用.再回来看上面设置样式方法.
2.了解WebControl.BackColor和Style.BackColor
(1)和(2)是差不多的.但(3)则不同,(3)的定义方法有通用性,你可以定义一种样式,然后利用控件的ApplyStyle方法来引用样式.给样式编程提供了方面
WebControl类定义了通用的样式.(1)和(2)使用的样式属性为
WebControl.BackColor(3)则不同,使用的为
Style.BackColor3.自定义样式属性
刚开始就讲了style类为通用的优异样式类,但需求是会发生变化的. 好了,下面真正开始编码了.
下面以改写label控件为例子
(1)改写样式属性,让其默认背景为红色,相信大家一定看的懂
示例一
namespace CustomComponents{ [ToolboxData(@"<{0}:ImageLabel1 BackColor='Red' runat='server'></{0}:ImageLabel1>") ] public class ImageLabel1 : Label { public override string Text { get { return ViewState["Text"] != null ? (string)ViewState["Text"] : base.ID; } set { ViewState["Text"] = value; } } public override System.Drawing.Color BackColor { get { return base.BackColor = System.Drawing.Color.Red; } set { base.BackColor = value; } } }}控件初始效果为下图
(2)为label新增一个背景图片的属性,重写了一下AddAttributesToRender方法,添加一个样式属性,AddAttributesToRender方法以前为大家讲过,这里不多讲了.
示例二
namespace CustomComponents{ public class ImageLabel2 : Label { [BrowsableAttribute(true)] [DescriptionAttribute("背景")] [CategoryAttribute("Appearance")] public virtual String ImageUrl { get { return ViewState["imageUrl"] != null ? (string)ViewState["imageUrl"] : ""; } set { ViewState["imageUrl"] = value; } } override protected void AddAttributesToRender(HtmlTextWriter writer) { writer.AddStyleAttribute(HtmlTextWriterStyle.BackgroundImage, ImageUrl); base.AddAttributesToRender(writer); } }}使用控件效果如下
(3)上面示例二中我们定义了背景样式,其实.net已经为我们把工作做好了
从style类派生了很多样式类,扩展了style类的属性,满足不同控件样式的需求.
WebControl类中有一个CreateControlStyle 方法,其返回为一个样式集合.其默认情况下实现如下
protected override Style CreateControlStyle() { return new Style(ViewState); }我们可以通过改写此方法来使控件拥有style派生类的功能,改写后如下,让label控件拥有TableStyle类的样式
protected override Style CreateControlStyle() { return new TableStyle(ViewState); }注意点:默认情况下,当label控件使用ApplyStyle复制除style之外的样式属性集合,将只返回默认style类的样式属性集合.
看了下面效果后请再回头再理解这句话.
看下面自定义控件代码,真是简单的不的了
示例三
namespace CustomComponents{ public class ImageLabel3 : Label { protected override Style CreateControlStyle() { return new TableStyle(ViewState); } }}示例四
protected void Page_Load(object sender, EventArgs e) { //默认label控件 TableStyle a = new TableStyle(); a.BackImageUrl = "images4.bmp"; a.BackColor = System.Drawing.Color.Red; Label1.ApplyStyle(a); //自定义控件 ImageLabel3_1.ApplyStyle(a); }看一下,使用的效果,看到下面效果再来理解下我上面说的注意点吧.我想这样会理解的更深刻.
(4)使用派生样式类,定义控件样式属性.示例四中说过了,没有定义控件样式属性,只改写了CreateControlStyle方法.那就意味了你定义的控件样式属性可以直接使用TableStyle类中的属性,但默认情况下的样式属性为style类中属性,所以需要强行转换.如下对比
默认情况下
public override Color BackColor { get { return ((Style)ControlStyle).BackColor; } set { ((Style)ControlStyle).BackColor = value; } }定义TableStyle样式属性,必须转换为TableStyle类型
public virtual string BackImageUrl { get { return ((TableStyle)ControlStyle).BackImageUrl; } set { ((TableStyle)ControlStyle).BackImageUrl = value; } }好了,讲清楚上面这一点.我们再来测试一下.看下面示例(还是采用我们第一讲的例子)
下面只给出定义样式属性的代码,其他的类似.
控件样式#region 控件样式 protected override Style CreateControlStyle() { return new TableStyle(ViewState); } [BrowsableAttribute(true)] [DescriptionAttribute("网格线")] [CategoryAttribute("Appearance")] public virtual GridLines GridLines { get { return ((TableStyle)ControlStyle).GridLines; } set { ((TableStyle)ControlStyle).GridLines = value; } } [BrowsableAttribute(true)] [DescriptionAttribute("单元格间距")] [CategoryAttribute("Appearance")] public virtual int CellSpacing { get { return ((TableStyle)ControlStyle).CellSpacing; } set { ((TableStyle)ControlStyle).CellSpacing = value; } } [BrowsableAttribute(true)] [DescriptionAttribute("单元格边距")] [CategoryAttribute("Appearance")] public virtual int CellPadding { get { return ((TableStyle)ControlStyle).CellPadding; } set { ((TableStyle)ControlStyle).CellPadding = value; } } [BrowsableAttribute(true)] [DescriptionAttribute("表水平对齐")] [CategoryAttribute("Appearance")] public virtual HorizontalAlign HorizontalAlign { get { return ((TableStyle)ControlStyle).HorizontalAlign; } set { ((TableStyle)ControlStyle).HorizontalAlign = value; } } [BrowsableAttribute(true)] [DescriptionAttribute("表背景图片")] [CategoryAttribute("Appearance")] public virtual string BackImageUrl { get { return ((TableStyle)ControlStyle).BackImageUrl; } set { ((TableStyle)ControlStyle).BackImageUrl = value; } } #endregion使用此控件
<custom:CreditCardForm6 BackColor="Black" ForeColor="White" runat="server" ID="example" Font-Bold="true" Font-Italic="true" GridLines="None" CellSpacing="5" BackImageUrl="images4.bmp" Font-Size="Larger" BorderColor="Yellow" BorderWidth="20px" BorderStyle="Ridge" HorizontalAlign="NotSet" EnableViewState="False" />效果如下
好了,上面的基础讲完了.希望大家能够有所理解.下面还我们要讲一个重点的东西.
