asp.net控件开发基础(6) ----------简单介绍自定义控件样式属性

        上一篇讲了关于属性方面的一些东西 ,这次讲的是关于样式.

位于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.BackColor

(3)则不同,使用的为

Style.BackColor

3.自定义样式属性

刚开始就讲了style类为通用的顶级样式类,但需求是会发生变化的. 好了,下面真正开始编码了.
下面以改写label控件为例子

(1)改写样式属性,让其默认背景为红色,相信大家一定看的懂

示例一

namespace CustomComponents
}

控件初始效果为下图


(2)为label新增一个背景图片的属性,重写了一下AddAttributesToRender方法,添加一个样式属性,AddAttributesToRender方法以前为大家讲过,这里不多讲了.

示例二

namespace CustomComponents
}

使用控件效果如下



(3)上面示例二中我们定义了背景样式,其实.net已经为我们把工作做好了

从style类派生了很多样式类,扩展了style类的属性,满足不同控件样式的需求.

CreateControlStyle 方法,其返回为一个样式集合.其默认情况下实现如下

        protected override Style CreateControlStyle()
        }

我们可以通过改写此方法来使控件拥有style派生类的功能,改写后如下,让label控件拥有TableStyle类的样式

        protected override Style CreateControlStyle()
        }

注意点:默认情况下,当label控件使用ApplyStyle复制除style之外的样式属性集合,将只返回默认style类的样式属性集合.

看了下面效果后请再回头再理解这句话.

看下面自定义控件代码,真是简单的不的了

示例三

namespace CustomComponents
}

再看默认label控件与其的对比,因为没有给控件定义样式属性,所以只能通过编程的方式来定义样式,如下

示例四

    protected void Page_Load(object sender, EventArgs e)
    }

看一下,使用的效果,看到下面效果再来理解下我上面说的注意点吧.我想这样会理解的更深刻.




(4)使用派生样式类,定义控件样式属性.示例四中说过了,没有定义控件样式属性,只改写了CreateControlStyle方法.那就意味了你定义的控件样式属性可以直接使用TableStyle类中的属性,但默认情况下的样式属性为style类中属性,所以需要强行转换.如下对比

默认情况下

        public override Color BackColor
        }

定义TableStyle样式属性,必须转换为TableStyle类型

        public virtual string BackImageUrl
        }

好了,讲清楚上面这一点.我们再来测试一下.看下面示例(还是采用我们第一讲的例子)

下面只给出定义样式属性的代码,其他的类似.

#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" />

效果如下




好了,上面的基础讲完了.希望大家能够有所理解.下面还我们要讲一个重点的东西.

4.自定义类型化样式属性

如果样式属性无法满足你需求,则你可以通过自定义类型化样式来实现.
什么是自定义类型化样式?就是该类从style类派生,对其进行修改和扩充(书上就这么写了...我就这么理解了-_-)

如Table控件,一方面控件自身定义的样式属性,另一方面又定义了TableStyle类.你可以在使用控件样式属性和TableStyle类中进行选择.

但TableStyle类具有通用性,具有一定的灵活性.好了下面我们又要开始看代码了.当然从简单开始

(1)简单呈现样式属性

需要说明的注意点如下

1.重写LabelStyle(StateBag viewState)构造函数
2.样式属性需用视图状态来声明
3.Style类的重载的AddAttributesToRender方法需用两个参数的方法
AddAttributesToRender(HtmlTextWriter writer, WebControl owner)

示例5  自定义类型化样式:LabelStyle类 

    public class LabelStyle :Style
    }

下面再来看控件实现方法,注意此处CreateControlStyle方法返回为自己定义的LabelStyle(ViewState)

示例6

    public class ImageLabel4 : Label
    }

让我们来测试一下,你会发现界面上并未呈现背景图片,给控件加一个属性CssClass=""以后效果就出来了,如下



让我们来思考为什么在未定义CssClass=""属性时无法呈现自定义属性.
        //判断视图状态是否为空
        internal bool IsSet(string key)
        }