.NET 2Share on Blogger: [ASP.NET] 自訂 Server Control 的 CSS3 屬性

2012/4/10

[ASP.NET] 自訂 Server Control 的 CSS3 屬性

ASP.NET 到底有沒有支援 CSS3? 嚴格地說, 既然我們可以在 ASP.NET 專案及網頁中毫無障礙地自訂 Style, 那麼它當然有支援 CSS3。雖然在 Visual Studio 的 IDE 裡面, 或許它不能識別 CSS3 的 tag, 也不提供 intellisense, 但是那並不是 ASP.NET 的問題。

其實, 就像 ASP.NET Control 既有的 Font, ForeColor, Height, Width... 一樣, 這些屬性也都可以使用 CSS Style 來設定, 但是在 ASP.NET 中仍然把它們特別拉出來實作為屬性。在本文中, 我要做的就是同樣的事情。

實作 Custom Control

我想先來解釋一下我打算在本文中示範什麼。我在「(CSS3) text-shadow 詳解」一文中已經對 text-shadow 這個 CSS3 屬性做過完整的介紹; 我現在要做的, 就是把 text-shadow 這個功能包進一個繼承 Label 的自訂控制項, 使得開發者可以方便的設定文字的陰影。同時, 我也打算製作 Preset 功能, 把一些預設的效果 (Presets) 加入, 讓開發者在設計時期就可以選擇套用某種預先設定的效果。開發者也可以自行加入喜歡的預設效果供未來使用。

由於這個自訂控制項是繼承 Label 控制項, 所以除了我新加入的三個公用屬性之外, 該自訂控制項的其它所有功能和行為都和普通的 Label 控制項一模一樣。

ShadowStyle 屬性

圖1. ShadowStyle 屬性設定

如上圖所示, 當我們把這個自訂控制項拉到設計頁面之後, 我們可以找到名為 ShadowStyle 的屬性, 裡面有一個「...」按鈕, 按下之後, 就會開啟一個集合編輯器。在這個視窗按下左下方的「加入」按鈕, 並賦予 HorizontalOffset、VerticalOffset、BlurRadius、SpreadDistance 和 Color 等屬性的值, 在這個自訂控制項的 innerHTML 中就會出現這些項目的相對值。

在「(CSS3) text-shadow 詳解」一文中, 我已經解釋過以上 text-shadow 的各種屬性的用法。如果你不明白 HorizontalOffset、VerticalOffset 等屬性是做什麼的, 那麼你可以回頭去參考一下關於 text-shadow 的用法。

text-shadow 屬性允許多重陰影的設定, 這是為什麼該屬性必須以集合編輯器開啟的原因。在這個視窗中, 按一次「加入」按鈕, 就多一個 ShadowStyle, 其順序是由上到下。以圖1為例, 它將產生如下的 CSS 碼:

text-shadow: 1px 1px 1px 1px rgba(128,128,128,1),
    2px 2px 2px 2px rgba(255,255,255,1);

ShadowStylePredefined 屬性

我們除了可以自行輸入 text-shadow 的個別屬性值之外, 也可以套用現成的預設樣式, 方法就是在 ShadowStylePredefined 列表中進行挑選, 如下圖所示:

ShadowStylePredefined Property Settings
圖2. ShadowStylePredefined 屬性設定

當你按下 ShadowStylePredefined 屬性時, 一個下拉式選單會展開, 讓你挑選你想套用的 Preset。

一旦挑選了 Preset (除 None 之外的任何一項), 那麼你原先設定的 Shadowstyle 就會自動失效。

ShadowStylePresetsPath 屬性

預先設定的 text-shadow 樣式可以存放在一個 XML 檔案裡面以方便編輯, 其格式如下:

<?xml version="1.0" encoding="utf-8" ?>
<Presets>
  <Preset>
    <Name>LightShadow</Name>
    <Style>1 1 1 1 rgba(0,0,0,1);</Style>
  </Preset>
  <Preset>
    <Name>HeavyShadow</Name>
    <Style>2 2 1 1 rgba(0,0,0,1);</Style>
  </Preset>
  <Preset>
    <Name>Blurry</Name>
    <Style>2 2 2 2 rgba(0,0,0,1);</Style>
  </Preset>
  <Preset>
    <Name>Gradient</Name>
    <Style>1 1 1 1 rgba(85,85,85,1), 2 2 1 1 rgba(170,170,170,1), 3 3 1 1 rgba(255,255,255,1);</Style>
  </Preset>
</Presets>

你可以把檔案存放在任何地方, 但是在使用之前, 必須指定檔案的位置, 這些預設樣式才會出現在 ShadowStylePredefined 屬性列表裡面。

圖3. ShadowStylePresetsPath 屬性設定

如圖3所示, 當你按下 ShadowStylePresetsPath 屬性時, 一個 FileEditor 就會出現, 讓你可以挑選檔案的位置, 並且可以預覽 XML 的內容。

如果你並未指明預設樣式的路徑, ShadowStylePredefined 列表中仍然會有少數幾個項目出現, 那些是寫死在程式中的預設值, 其樣式十分簡單, 充其量只是聊勝於無而已。本自訂控制項最有價值的地方應該可以算是自訂的預設樣式了, 你應該可以藉由編輯這個 XML 檔案以發揮它最大的功能。

未完待續...

.NET 2Share on Blogger