ASP.NET 2.0伺服器控制項開發之控制項樣式

隨著.NET技術的不斷髮展和成熟，伺服器控制項越來越受到廣大開發人員的喜愛。同時，伺服器控制項的發展也呈現出一些趨勢，例如，功能越來越強大，很多功能逐漸從伺服器端轉移到用戶端。另外，伺服器控制項也越來越美觀。這可能與Windows作業系統越來越講求功能與外觀統一的發展思路有關。本文及其隨後的幾篇文章將重點介紹如何為伺服器控制項實現漂亮的外觀。實際上，伺服器控制項的外觀主要由樣式屬性決定。本文重點對實現控制項樣式的基本知識進行概括性講解。

　　伺服器控制項樣式簡介

　　對於普通應用開發人員而言，只需要知道伺服器控制項具有哪些樣式屬性，並瞭解每一個樣式屬性可能為控制面板帶來的影響即可。例如，如果需要修改頁面背景顏色，則需要修改樣式屬性BackgroundColor值；如果需要設定表格對象外觀，那麼可能需要設定BorderColor、BorderWidth等樣式屬性。然而，對於一名控制項開發人員而言，他們不僅需要掌握應用開發人員所掌握的相關知識，而且還必須瞭解構建控制項樣式屬性的建立方法。

　　通常，具有樣式屬性的伺服器控制項均繼承自System.Web.UI.WebControl基類。這樣，控制項類可自動繼承基類中的多個樣式屬性。這些樣式屬性包括擷取或者設定控制項背景顏色的BackColor、擷取或者設定控制項前景顏色的ForeColor、擷取或者設定控制項邊框顏色的BorderColor、擷取或者設定控制項邊框樣式的BorderStyle等等。如果控制項類從WebControl基類繼承，那麼這些樣式屬性可自動得到繼承，並且允許開發人員根據具體情況，對這些樣式屬性進行重寫。另外，如果控制項類繼承自其他現有控制項類，例如 GridView，那麼自訂控制項將自動繼承GridView基類的樣式屬性，如設定交替資料行樣式的AlternatingRowStyle、設定正在編輯的資料行的樣式EditRowStyle等等。很顯然，這些繼承自已有伺服器控制項的樣式屬性並非此處要討論的重點。然而，讀者應瞭解樣式屬性允許從基類繼承並無需修改即可直接使用的。下面繼續討論WebControl類中的樣式屬性。

　　WebControl類的樣式均封裝在ControlStyle屬性中。該屬性值是Style資料類型。為了更好的瞭解ControlStyle，下面列舉了ControlStyle屬性的定義代碼。

private Style _controlStyle;
//定義ControlStyle屬性
public Style ControlStyle{
　get {
　　if(_controlStyle == null) {
　　　_controlStyle = CreateControlStyle();
　　　if(IsTrackingViewState) {
　　　　((IStateManager)_controlStyle).TrackViewState();
　　　}
　　}
　}
}
//定義CreateControlStyle方法
protected virtual Style CreateControlStyle(){ return new Style(ViewState);}

　　如上代碼所示，ControlStyle是一個唯讀屬性，其資料類型為Style。當第一次訪問該屬性的時候被建立，其過程為：首先，判斷_controlStyle是否為空白，如果為空白，則調用CreateControlStyle方法來建立_controlStyle對象，即一個Style的執行個體。然後，執行檢視狀態跟蹤任務，其具體過程由Style類所提供的TrackViewState方法來完成。

　　在初步瞭解ControlStyle屬性之後，接著我們應瞭解與該屬性密切相關的Style類。

　　Style類用於表示伺服器控制項的樣式，其包括以下幾個屬性：

　　（1）BackColor，擷取或者設定Web伺服器控制項的背景色；

　　（2）BorderColor，擷取或者設定控制項的邊框顏色；

　　（3）BorderStyle，擷取或者設定控制項的邊框樣式；

　　（4）BorderWidth，擷取或者設定控制項的邊框寬度；

　　（5）CssClass，擷取或者設定控制項在用戶端轉譯的階層式樣式表類；

　　（6）Font，擷取與控制項關聯的字型屬性；

　　（7）ForeColor，擷取或者設定控制項的前景顏色；

　　（8）Height，擷取或者設定控制項的高度；

　　（9）IsEmpty，擷取一個值，該值指示是否已經在ViewState中定義任何樣式元素；

　　（10）IsTrackingViewState，返回一個值，該值指示是否正在跟蹤其檢視狀態的更改。

　　（11）RegisteredCssClass，擷取已向控制項註冊的階層式樣式表類；

　　（11）ViewState，擷取儲存樣式元素的檢視狀態。

　　另外，Style類中還包括一些成員方法。利用它們可以很方便的對樣式進行操作。下面列舉了來自WebControl和Style類的，用於實現樣式操作的方法。

　　（1）protected virtural Style CreateControlStyle()

　　建立由WebControl類在內部用來實現所有與樣式有關的屬性的樣式對象。

　　（2）public void ApplyStyle(Style s)

　　將指定樣式的所有非空白元素複製到伺服器控制項，改寫控制項的所有現有的樣式元素。其中s表示要複製的樣式。

　　（3）public void MergeStyle(Style s)

　　將指定樣式的所有非空白元素複製到伺服器控制項，但不改寫該控制項現有的任何樣式元素。其中s表示要複製的樣式。

　　以上三個方法均來自WebControl類。下面兩個方法來自Style類。

　　（4）public virtual void CopyFrom(Style s)

　　將指定的Style的樣式屬性複製到從中調用此方法的Style類的執行個體中。s表示要複製的樣式的Style。使用此方法Style類的當前執行個體中的所有屬性都將替換為s參數指定的Style中的關聯屬性。

　　（5）public virtual void MergeWith(Style s)

　　將指定Style的樣式屬性與從中調用此方法的Style類的執行個體組合。其中s表示要合并的樣式的Style。此方法通過將每個在Style類的當前執行個體中未設定的屬性設定為s參數指定的Style的對應屬性中的值，將兩個Style對象的屬性聯結起來。只有尚未設定的屬性將被替換。如果沒有設定s參數中的屬性，則它將不替換Style類的當前執行個體中的對應屬性。

　　為了協助讀者加深對於以上方法的理解，下面列舉了一段範例程式碼。

//定義兩個Style對象執行個體
Style s1 = new Style();
Style s2 = new Style();
//分別為s1和s2定義ForeColor屬性值
s1.ForeColor = Color.Red;
s2.ForeColor = Color.White;
//調用相關方法
s1.CopyFrom(s2);
s1.MergeFrom(s2);

　　上面的代碼比較簡單。Style對象執行個體s1在調用CopyFrom方法之後，其ForeColor的屬性值將被修改為Color.White；s1在調用MergeFrom之後，其ForeColor的屬性值則不變，仍然為Color.Red。

 

　　重寫樣式屬性

　　樣式屬性的重載與其他屬性的重載沒有什麼區別。然而，在實現過程中必須注意的是，對屬性值所作的修改必須上傳給控制項的ControlStyle屬性。下面列舉了一個應用程式範例，其重寫了Table控制項的樣式屬性CellSpacing和Caption。伺服器控制項原始碼如下所示。

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebControlLibrary{
　[DefaultProperty("Text")]
　[ToolboxData("＜{0}:WebCustomControl runat=server＞＜/{0}:WebCustomControl＞")]
　public class WebCustomControl : Table {
　　//建立建構函式
　　public WebCustomControl() {
　　　base.Caption = "工作安排列表";
　　　base.CellSpacing = 0;
　　}
　　// 重寫CellSpacing屬性
　　[ Bindable(false), Browsable(false), DefaultValue(0) ]
　　public override int CellSpacing {
　　　get {
　　　　return base.CellSpacing;
　　　}
　　　set {
　　　　throw new NotSupportedException("不能設定CellSpacing屬性.");
　　　}
　　}
　　//重寫Caption屬性
　　[DefaultValue("工作安排列表")]
　　public override string Caption {
　　　get { return base.Caption; }
　　　set { base.Caption = value; }
　　}
　}
}

　　以上代碼主要用於說明重寫樣式屬性的實現方法。具體分析如下所示。

　　（1）控制項類WebCustomControl繼承自Table。這樣，自訂控制項則自動繼承了Table控制項所具有的所有樣式屬性。這為重寫樣式屬性奠定了基礎。

　　（2）在控制項類的建構函式中設定了Caption和CellSpacing的屬性值。

　　（3）重寫CellSpacing屬性。通過中繼資料屬性標記設定了該屬性不可被資料繫結（Bindable），告訴設計器該屬性不可被瀏覽（Browsable），最後設定了預設值為0（DefaultValue）。另外，在CellSpacing屬性的設定作業中定義了一個異常。當開發人員設定該屬性時將顯示該異常。

　　（4）重寫Caption屬性，為該屬性設定預設值。

　　可能有些讀者認為建構函式的設定內容沒有什麼意義。實際上，實現本例的核心就在於此。只有在建構函式中設定新的屬性值，才能夠將新值傳遞給ControStyle屬性。因為ControlStyle屬性主要完成的工作是負責樣式狀態管理以及樣式屬性的產生。如果沒有把改變傳到ControlStyle，那麼重寫的樣式屬性就不會按照預期的那樣顯示。

　　下面列舉了為測試自訂控制項WebCustomControl而建立的Default.aspx頁面原始碼。

＜%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %＞
＜%@ Register TagPrefix="wcc" Namespace="WebControlLibrary" Assembly="WebControlLibrary" %＞
＜!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＞
＜/head＞
＜body＞
　＜form id="form1" runat="server"＞
　　＜div＞
　　＜wcc:WebCustomControl ID="demo1" runat="server" Font-Size="small" BorderWidth="1px" CellPadding="4" BorderColor="black" GridLines="both"＞
　　＜asp:TableRow＞
　　　＜asp:TableCell font-bold="True" runat="server"＞工作項目＜/asp:TableCell＞
　　　＜asp:TableCell font-bold="True" runat="server"＞截至日期＜/asp:TableCell＞
　　　＜asp:TableCell font-bold="True" runat="server"＞備忘＜/asp:TableCell＞
　　＜/asp:TableRow＞
　　＜asp:TableRow runat="server"＞
　　　＜asp:TableCell runat="server"＞工作1＜/asp:TableCell＞
　　　＜asp:TableCell runat="server"＞7月17日＜/asp:TableCell＞
　　　＜asp:TableCell runat="server"＞備忘內容＜/asp:TableCell＞
　　＜/asp:TableRow＞
　　＜asp:TableRow runat="server"＞
　　　＜asp:TableCell runat="server"＞工作2＜/asp:TableCell＞
　　　＜asp:TableCell runat="server"＞7月27日＜/asp:TableCell＞
　　　＜asp:TableCell runat="server"＞備忘內容＜/asp:TableCell＞
　　＜/asp:TableRow＞
　　＜asp:TableRow runat="server"＞
　　　＜asp:TableCell runat="server"＞工作3＜/asp:TableCell＞
　　　＜asp:TableCell runat="server"＞7月29日＜/asp:TableCell＞
　　　＜asp:TableCell runat="server"＞備忘內容＜/asp:TableCell＞
　　＜/asp:TableRow＞
　＜/wcc:WebCustomControl＞
＜/div＞
＜/form＞
＜/body＞
＜/html＞

　　下面顯示了樣本應用。

　　根據Default.aspx原始碼以及應用可知，中的表格標題（Caption），以及相鄰表格間距(CellSpacing)均由自訂控制項內建設定，而不是通過控制項的顯式標記來完成。這就是重寫控制項樣式屬性的結果。

　　小結

　　本文首先對伺服器控制項樣式的基本知識進行了簡要介紹，然後，通過一個典型樣本說明了重寫控制項樣式屬性的方法。希望讀者通過這些內容，能夠對伺服器控制項樣式屬性建立一個更為深入的理解。在隨後的文章中，我們將講解實現樣式屬性的具體方法。