Go homepage(回首页)
Upload pictures (上传图片)
Write articles (发文字帖)

The author:(作者)delv
published in(发表于) 1/27/2014 6:45:39 AM
.net控件开发(六)之深究控件样式_[Asp.Net教程]

前言：

上节中已讲述了呈现原理，我们在开发自已控件时，重写了Render方法来创建自定义输出，ASP.net给控件开发者提供了编程方式控制样式的途径。样式控制控件的可视化外观。如果您开发支持样式的控件，则从 System.Web.UI.WebControls.WebControl 派生，它将样式作为强类型属性（例如 Font、Height、Width 等）公开并为使用样式属性提供方法

概要：

1.样式概述，了解控件样式属性的创建方法

2.操作ControlStyle的几种方法

3．WebControl是如何把样式生成委托给ControlStyle属性的

4．样式的状态管理

5．重写样式属性

6．实现自定义类型化样式

正题

一．样式概述：样式是如何工作的

我们都知道在webcontrol类中已经内含了许多样式属性，这些属性由生成的html元素的可视化外观。WebControl类的样式功能封装在controlstyle属性中，样式属性实际上是ControlStyle属性的子属性。我们来看看示例就清楚了，这段代码包含了webcontrol 的BorderColor属性的定义。

public virtual Color BorderColor
{
get
{
if (!this.ControlStyleCreated)
{
return Color.Empty;
}
return this.ControlStyle.BorderColor;
}
set
{
this.ControlStyle.BorderColor = value;
}
}

其中的this.ControlStyle.BorderColor中，从这里可以看出BorderColor的内部属性，那么我们有必要来看看ControlStyle的源代码，它是如何实现的。一步一步的解析其实现

public Style ControlStyle
{
//定义一个ControlStyle属性
get
{
if (this.controlStyle == null)
{
this.controlStyle = this.CreateControlStyle();
if (base.IsTrackingViewState)
{
this.controlStyle.TrackViewState();
}
if (this._webControlFlags[1])
{
this._webControlFlags.Clear(1);
this.controlStyle.LoadViewState(null);
}
}
return this.controlStyle;
}
}

protected virtual Style CreateControlStyle()
{
//定义CreateControlStyle方法
return new Style(this.ViewState);
}

ControlStyle是一个只读属性，返回一个Style类型，当第一次访问该属性的时候被创建。其实现过程：当controlStyle不存在时，我们就调用了CreateControlStyle方法去创建一个Style类型，然后，执行视图状态跟踪任务，其具体过程由Style类所提供的TrackViewState方法来完成。然后加载视图状态。

对于上述代码，我们来了解两点：

1．为什么是由Style类提供的TrackViewState方法完成呢。我们接下来看看如过程：

在ControlStyle我们调用了this.controlStyle.TrackViewState()方法，而其中的TrackViewState方法调用的是Style的TrackViewState方法：

伪代码如下：style中的TrackViewState方法

protected internal virtual void TrackViewState
{

this.ViewState.TrackViewState();

}

2．那么我们来看看CreateControlStyle为我们做了什么。

CreateControlStyle方法的默认实现返回一个Style对象，调用其Style的构造函数，接收一个ViewState状态包，那么ViewState是在WebControl是如何实现的呢， protected virtual StateBag ViewState
{
get
{
if (this._viewState == null)
{
this._viewState = new StateBag(this.ViewStateIgnoresCase);
if (this.IsTrackingViewState)
{
this._viewState.TrackViewState();
}
}
return this._viewState;
}
}

它去实例化一个StateBag，创建一个状态包实例,再判断其视图状态是否跟踪了其视图状态，在这里是确保视图被正确保存到了ViewState中。它是一个虚方法，所以我们可以在派生的控件中可以重载其方法来创建并返回一个自定义的Style类的自定义样式。

ControlStyle属性返回的的类型是System.Web.UI.WebControls.Style类，而Style实现了样式属性并有内建了状态管理和生成功能。

伪代码：

public class Style : Component, IStateManager
{
…}

二．操作ControlStyle的几种方法

为了操作ControlStyle属性，WebControl定义了三种方法。

1.CreateControlStyle 自定义控件可以重载该方法来修改样式属性的默认值或为ControlStyle属性创建一个新的类型化样式。

格式：

protected virtural Style CreateControlStyle()

创建由WebControl类在内部用来实现所有与样式有关的属性的样式对象。

注意：因为WebControl不会自动保存ControlStyle的ViewState,所以如果要重写CreateControlStyle,那么最好按默认的策略,把ViewState作为Style保存数据的地方:

示例：

protected override Style CreateControlStyle()
{
return new TableStyle(ViewState);
}

1. ApplyStyle把上传给该方法的样式中设置的样式属性复制到控件自已的ControlStyle中。

格式：

public void ApplyStyle(Style s)

将指定样式的所有非空白元素复制到服务器控件，改写控件的所有现有的样式元素。其中s表示要复制的样式。

示例：
开始：如下

Style style = new Style();
style.BorderColor = Color.Red;
this.controlTable.ApplyStyle(style);//这里的controlTable是一个自定义控件
应用样式后：

1.MergeStyle 从上传给该方法的样式中复制样式属性到控件自已的ControlStyle中，即复制那些指定的样式中设置的而不是在ControlStyle中设置的属性。

格式：

public void MergeStyle(Style s)

　　将指定样式的所有非空白元素复制到服务器控件，但不改写该控件现有的任何样式元素。其中s表示要复制的样式。

示例：

开始：如下