所有繼承 WebControl 的伺服器控制項,自動擁有 ControlStyle 屬性(型別 Style),封裝 BackColor、ForeColor、BorderColor、BorderStyle、BorderWidth、Font、CssClass 等通用樣式。ControlStyle 為唯讀,首次存取時由 CreateControlStyle() 建立實例,並自動追蹤 ViewState。
| 屬性/方法 | 說明 |
|---|---|
| BackColor, ForeColor, BorderColor, BorderStyle, BorderWidth, Font, CssClass, Height, Width | 通用樣式屬性,值儲存於內部 ViewState |
| IsEmpty | 是否已有任何樣式值存入 ViewState |
| IsTrackingViewState | 是否正在追蹤 ViewState 變更 |
| RegisteredCssClass | 已向頁面註冊的 CSS 類別名稱 |
| ViewState | 取得內部 StateBag,直接操作底層儲存 |
| AddAttributesToRender(HtmlTextWriter, WebControl) | 將樣式輸出為 HTML 屬性/CSS(核心渲染方法) |
| CopyFrom(Style), MergeWith(Style), Reset() | 樣式複製、合併、重設(支援樣式繼承鏈) |
| FillStyleAttributes(CssStyleCollection, IUrlResolutionService) | 新版 CSS 集合輸出(ASP.NET 2.0+ 推薦) |
private Style _controlStyle;
public Style ControlStyle
{
get
{
if (_controlStyle == null)
{
_controlStyle = CreateControlStyle();
if (IsTrackingViewState) ((IStateManager)_controlStyle).TrackViewState();
}
return _controlStyle;
}
}
protected virtual Style CreateControlStyle() { return new Style(ViewState); }
WebControl 即自動擁有,無需額外程式碼。GridView)會取得其專屬樣式型別(TableItemStyle 等)。無需寫代碼,頁面開發者可直接設定 BackColor="Red"、BorderStyle="Dashed" 等。
public class MyButton : Button
{
protected override Style CreateControlStyle()
{
return new MyButtonStyle(ViewState); // 自訂 Style 衍生類
}
}
配合型別化樣式開發(參考前文章),可新增 GradientBackground、CornerRadius 等專屬屬性。
復合控制項將子控制項的 ControlStyle 暴露為頂層屬性(如 HeaderStyle、RowStyle),參考「復合控制項樣式」文章實作。
protected override void Render(HtmlTextWriter writer)
{
// 1. 將 ControlStyle 套用至最外層標籤
ControlStyle.AddAttributesToRender(writer, this);
writer.RenderBeginTag(HtmlTextWriterTag.Div); // 或 Span、Table 等
// 2. 渲染內容
RenderContents(writer);
writer.RenderEndTag();
}
AddAttributesToRender 會自動輸出 style="..."、class="..."、border="..." 等屬性。
CssClass 參考外部 CSS,維護性佳、可快取、關注點分離。style。ControlStyle.CssClass 設定時會自動合併至輸出的 class 屬性。[PersistenceMode(PersistenceMode.InnerProperty)] 讓屬性視窗展開 ControlStyle 子屬性。[DefaultValue]、[Description]、[Category("Appearance")]。[ToolboxBitmap(typeof(MyButton), "MyButton.bmp")]。| 問題 | 原因 | 解決 |
|---|---|---|
| 樣式不生效、不輸出 | 未呼叫 ControlStyle.AddAttributesToRender、或 Render 未呼叫 base.Render | 確保 Render 方法正確套用樣式 |
| ViewState 過大 | 大量控制項皆設定樣式,ViewState 膨脹 | 改用 CssClass、或關閉 ViewState、或使用 ControlState |
| 設計時屬性視窗錯誤 | Style 衍生類別未正確實作 IStateManager、或缺少建構子 | 提供 StateBag 建構子、正確覆寫 CopyFrom/MergeWith/Reset |
ControlStyle + Style 是 ASP.NET 伺服器控制項樣式系統的基石。理解其建立時機、ViewState 整合、渲染輸出流程、衍生擴充與設計時支援,即可打造外觀靈活、效能優異、設計時友善的專業控制項。