【火星人】Expression Blend 2.X ( Silverlight ): Ch 01-04　專案管理　Managing Your Projects（1）

很無奈地，以下要先講一些 WPF / *.EXE、Silverlight 與 XAML 的例子，不然您將很難瞭解 Expression Blend 的面板與功能
當然啦，這些經驗值大部份都可以轉移到 Silverlight 去
　
HTML 的經驗值，一樣可以轉移到 XAML
您將發現：比起 Flash + ActionScript 來說，Expression Blend + XAML 既簡單、又易學、而且功能更強大 !!
　
　
　　‧　沿著路徑移動的動畫　Motion Path WPF / *.EXE
　
　　‧　淡入淡出　Fade In / Out
　
　　‧　Silverlight 1.0 基礎（1）
　
　　　　。　基礎
　
　　　　。　基本範例　Basic
　
　　　　　　-　頂畫布上的物件　the Canvas object
　
　　　　　　-　繪製與填色　Drawing and Painting
　
　　　　　　　　　　‧　橢圓　Ellipse
　　　　　　　　　　‧　矩形　Rectangle
　　　　　　　　　　‧　線　Line
　　　　　　　　　　‧　多邊形 / 折線　Polygon / Polyline
　　　　　　　　　　‧　路徑　Path
　　　　　　　　　　‧　以筆刷填色　painting shapes with brushes
　　　　　　　　　　　　。　純色筆刷　SolidColorBrush
　　　　　　　　　　　　。　線性漸層筆刷　LinearGradientBrush
　　　　　　　　　　　　。　放射漸層筆刷　RadialGradientBrush
　　　　　　　　　　　　。　影像筆刷　ImageBrush
　　　　　　　　　　　　。　視訊筆刷　VideoBrush
　
　　　　　　-　通用的圖形性質　Common Graphic Properties
　
　　　　　　　　　　‧不透明度　Opacity Property
　　　　　　　　　　‧不透明度遮罩　OpacityMask Property
　　　　　　　　　　‧裁切　Clip Property
　　　　　　　　　　‧變形　RenderTransform Property
　
　　　　　　-　影像　Images
　
　　　　　　-　文字　Text（TextBlock）
　
　　　　　　　　　　‧文字區元素　TextBlock Element
　　　　　　　　　　‧通用文字區性質　Common TextBlock Propeties
　　　　　　　　　　‧運行元素　Run Element
　　　　　　　　　　‧多種字型的設定　Specifying Multiple Fonts
　
　　　　　　-　媒體　Media ( Audio / Video )
　
　　　　　　　　　　‧置入媒體　MediaElement ( 以 *.WMV 與 *.WMA 檔為主 )
　　　　　　　　　　‧加上介面的基礎物件 ( UIElement Objects )
　　　　　　　　　　‧套用放射漸層筆刷
　　　　　　　　　　‧全螢幕播放　Full-Screen Media Playback
　　　　　　　　　　‧視訊檔填塗　Painting With Video
　　
　
　

　
　
　
　
沿著路徑移動的動畫　Motion Path
　
　
( 1 / 3 )　版面
　
首先，開啟 WPF / *.EXE 的專案
　

　
　
切換到性質面板 ( Propreties Panel ) 的 版面 ( Layout )，然後調整文件的長寬
　

　
　
在性質面板 ( Propreties Panel ) > 筆刷 ( Brushes ) > Background 右側的小方塊按一下，設定底色
( 在 Silverlight 的專案中，底色可以設為透明 )
　

　
　　　　　　　　　　↑　注意到沒，在 Silverlight 專案中的 Canvas，現在變成了 Window > LayoutRoot
　
　
按 空白鍵 ( 手形工具 )，把工作區移到 Artboard 的中央
( 連按兩下手形工具、連按兩下縮放工具 ( 放大鏡 ) 亦可 )
　

　
　
　
( 2 / 3 )　畫顆球
　
１. 切換到橢圓 ( Ellipse ) 工具
２. 按 Shift 畫出個正圓
３. 切換到性質面板，準備填色 ( 要像一顆球，但不要有邊框 )
４. 在筆刷區 ( Brushes ) 作業
　　4.1　OpacityMask 已是 NoBrush，故不需再處理
　　4.2　Stroke ( 筆劃、外框 ) 是黑色外框，等一下要去掉
　　4.3　圓形填入的顏色是白色，等一下要改成放射狀漸層
　

　
　
點選到 Stroke 欄、按右側的小框框、然後點選 Reset ( 重置 )，外框就去掉了
　

　
　
點選到 Fill ( 填色 ) 欄，再點選到 Gradient Brush ( 漸層筆刷 ) 的標籤，就可以看到圓的填色變成了從黑到白的線狀漸層
　

　
　
點選到漸層色盤下方的 Radial Gradient ( 放射狀漸層 )，可以發現已有球的樣子了
但中間應該是比較亮的反光面，周圍應該深一點
　

　
　
點選到漸層色盤左側的控制鈕，然後選擇比較淡 ( 亮 ) 的顏色
　

　
　
同理，點選右側的控制鈕，選擇比較深的顏色
　

　
　
這樣子就像顆球了
　

　
　
　　　　如果想要改變中心點的物置，用 Brush Transform ( 變換筆刷工具 ) 即可
　
　　　　
　
　
　
( 3 / 3 )　路徑動畫
　
不管是 HTML、CSS、DIV、JavaScript、ActionScript，通常在編撰時，都會給物件一個名稱 ( ID or Name or .... )
XAML ( 不管是 WPF / *.EXE or Silverlight ) 也不例外
因為有了名稱，做起事來才會方便很多 ( 不然誰知道你要叫哪個物件去動作 )
　
點選到物件時，在 Properties 面板最上方來命名最快，也最方便
也可以在時間軸 ( Objects and Timeline ) 左側，按右鍵 > Rename 之
　
把剛才那顆球，命名為火星球
　

　
　
開始畫路徑：以鉛筆工具大概畫個路徑的粗胚即可 ( 等一下還可以再修改 )
不過之前火星球的填色設定還在，所以鉛筆工具畫完後會自動填色之
　

　
　
切換到 Properties > Brushes，先點選到 Fill 欄，然後再點選其左下方的 No Brush 的標籤
路徑就沒有那個討人厭的填色了 ( 即：單純就只是路徑線 )
　

　
　
路徑畫好後，填色去掉後，在路徑是被選取的情況下，按下拉選單 > Object ( 物件 ) > Path ( 路徑 ) > Convert to Motion Path ( 轉成路徑動畫 )
啊這個路徑動畫要對哪一個物件作用勒 ?! 在彈出來的視窗中，點選剛命名的火星球
　

　
　
至此，路徑線已經可以功成身退了，點選之，然後按 Delete 鍵
　

　
　
按一下播放鍵 ( Play ) 看看，確實是照著路徑走 !!
　

　
　
按火星球左側的小三角形，直到 Motion Path 出現為止
( 這就是剛才之所以刪掉路徑物件的原因：一 Convert 後，就會把路徑塞到火星球中 )
物件中的路徑，在時間軸中只有頭尾兩個小欄框可以控制
　

　
　
把起點與終點的小藍框拉到滿意為止
　

　
　
最後，以 Direct Selection ( 引導選取工具 ) 工具就可以再編修路徑
　

　
　
一切都滿意後，按 F5 看成品
　
　
　
　　　　筆者還是不死心，以 Silverlight 的專案再試了一次，依舊不行：( 下拉選單 > Object > Path 中，無法使用 Convert to Motion Path )
　
　　　　
　
　　　　　　　這種基本的功能 Silverlight 居然不支援 ( 雖說以 Frame by Frame 的方法來搞也很快 )，有點扯 ....
　
　
　

　
　
　
　
淡入淡出　Fade In / Out
　
　
先來看看下面這兩個例子：( 在本 Blog 每一頁的最下方，亦可看到 )
　
筆者搞的一些小作品　
　
上兩例不管是以 JavaScript 的方式或是以 Flash 來搞，本質上都只是 Fade In / Out 而已
所以就來看看 Expression Blend 的 Fade In / Out 的功能
　
　
先準備 3 張圖：( 可以拖曳到 Photoshop 中 )
　

　
　　
　
　
先按 Ctrl + I，載入上述三張圖檔
　

　
　
連按兩下，就可以把圖檔置入到工作區 ( 本例是底圖 )
　

　
　
再載入 Gaussian Blur 的那張圖
　

　
　
打開時間軸
　

　
　
‧替這兩張圖命名 ( Background、Blur )
‧在 Blur 欄上點一下、把時間軸軌線拉到第一格、然後按時間軸上方左側的 Record Keyframe 以產生關鍵格
　

　
　
再把時間軸軌線拉到第 2秒，再按時間軸上方左側的 Record Keyframe 以產生關鍵格
　

　
　
本例先把 Gaussiab Blur 那張圖 Fade Out ( 淡出，即慢慢變透明 )
所以要在第 2 秒這個關鍵格把圖變透明：
　
‧可以在漸層筆刷的標籤中，把起點與終點色之 Alpha 調為 0%
　
　
　
　
‧也可以在純色筆刷標籤中，把 Alpha 調為 0%
　
　
　
　
‧還可以把 Appearance > Opacity 設為 0%
　
　
　
　
按 F5，就可以在 IE 中觀看：( 下圖是 Fade Out 中 )
　

　
　
再載入沒有 Gaussian Blur ( 命名為 Clear ) 的圖檔，依下圖調整時間軸與 Alpha ( α )，就完成了 Fade In / Out 的效果
　

　
　
下載上述 Fade In / Out 的範例：
　

　
‧點選其中的 Default.html，就可以看網頁檔 ( 要再看一次請按 F5 )

‧載入檔案的方式：
　按下拉選單 > File ( 檔案 ) > Open Project ( 開起專案 )，就可以開啟剛下載的檔案了
　
　
　
　
　如果工作區裡的東東沒出現，請 DbClick Project 面板中的 Scene.xaml
　
　
　
　
　如果時間軸沒出現，按紅框處的下拉選單，點選 Timeline1 即可
　
　
　
　
　

　
　
　
　
Silverlight 1.0 基礎（1）
　
　
基礎　
　
　
看看 Expression Blend ( Silverlight 專案 ) 的面板
　

　
看起來最少要 5 個檔案：Default.html, Default.html.js, Scene.xaml, Scene.xaml.js, Silverlight.js
以下就以 Silverlight 官網的這一篇為腳本來小小研究一下
　
　
　
準備
　
要搞 Silverlight 的東東，至少必需準備下面 3 種東東：
　
‧The Silverlight Plug-in
　沒有 Browser 的 Plug-In，就無法看到 Silverlight 的東東 ( 這一點跟 Flash Player 完全一樣 )
　如果您還沒安裝 Silverlight 這個 Browser 的 Plug-In，請趕快安裝： Silverlight 1.0 Beta or 1.1 Alpha ( 反正都是測試版，就安裝 1.1 Alpha 唄 )
　
‧HTML 檔
　既然是 Browser 的 Plug-In，當然得有個網頁來包住 Silverlight
　有不少人的習慣很不好：搞完一個 Flash 後，就把 *.swf 檔直接丟上網路 ( 沒有以 HTML 包住 )
　
SampleHTMLPage.html ( 第 1 個檔案 ) ← 對應到 Silverlight 專案中的 Default.html
　

第 1, 2 行，在筆者正式寫 Expression Web 之前，請先參考筆者以前寫的底稿 ( 第 #3 ～ #5 則 )
開啟 Windows 記事本，然後 Copy / Paste 上述語法，再存成 *.html 檔 ( 下述會一直在這個 HTML 檔裡面加入語法 )
　
【註】: 上面的語法框是修改自 Ticore' Blog，特此聲明 ( see also: Google Code )
　
　
‧Text Editor ( 文字編輯器，如 Windows 記事本，甚至是 Dreamweaver、Expression Web )
　要編製 HTML 檔，當然得有個文字編輯器
　
　
　
Step 1：在 HTML 頁面中加入 Silverlight.js
　
請先下載 Silverlight.js ( 右鍵 > 另存目標 )，把 Silverlight.js ( 第 2 個檔案 ) 與上述的 HTML 檔擺在同一個檔案夾
再把載入 Silverlight.js 的 JavaScript 語法，擺在 <head></head> 中
　

Silverlight.js 的主要目的就是以 JavaScript 來控制，以確保 Silverlight 的東東可以跨平台
　
　
　
Step 2：在 HTML 頁面中加入 createSilverlight.js
　
請先下載 createSilverlight.js ( 右鍵 > 另存目標 )
‧同 Silverlight.js 一樣，儲存在與上述 HTML 檔相同的檔案夾
‧與 Silverlight.js 不一樣，Silverlight.js 不需要修改，但是 createSilverlight.js 的內容得視情況修改
　

第 6 行：在 <head></head> 中塞入 createSilverlight.js ( 第 3 個檔案 ) ← 對應到 Silverlight 專案中的 Default.html.js
　
　
createSilverlight.js：( 大概看得懂即可 )
　

function createMySilverlightControl()
{
    Sys.Silverlight.createObject(
        "myxaml.xaml",                  // Source property value. 《 XAML 檔的路徑與檔名 ( 第 4 個檔案 ) 》
        parentElement,                   // DOM reference to hosting DIV tag. 《　請參考：1、2、3、4，原則上不懂無傷 》
        "mySilverlightControl",          // Unique control ID value. 《 控制項的唯一名稱 》
        {                                // Control properties.
            width:'300',                // Width of rectangular region of 《 寬度, pixels, 畫素 》
                                              // control in pixels.
            height:'300',               // Height of rectangular region of 《 高度, Pixels, 畫素 》
                                              // control in pixels.
            inplaceInstallPrompt:false, // Determines whether to display 《 偵測 Silverlight 的版本，若有必要會提示安裝 》
                                              // in-place install prompt if
                                        // invalid version detected.
            background:'#D6D6D6',       // Background color of control. 《 背景色 》
              isWindowless:'false',       // Determines whether to display control 《 決定是否要顯示一般 Windows 的外觀 》
                                              // in Windowless mode.
            framerate:'24',             // MaxFrameRate property value. 《 每秒最大的格數 》
              version:'0.9'               // Control version to use. 《 Silverlight 的版本，即 Silverlight 1.0β = 0.9 版 》
        },
        {
            onError:null,               // OnError property value -- 《 onError 值 = 空 》
                                              // event handler function name.
            onLoad:null                 // OnLoad property value -- 《 onLoad 值 = 空 》
                                              // event handler function name.
        },
        null);                          // Context value -- event handler function name. 《 Context 值 = 空 》
}

　
　
Step 3：置入 Silverlight
　

mySilverlightControlHost

// Retrieve the div element you created in the previous step.

mySilverlightControlHost

// This function creates the Silverlight control.

createMySilverlightControl

‧第 5、6 行：載入上述的兩個 JavaScript 檔
　
‧第 10 ～ 12 行：Silverlight 就擺在這邊
　
　。網頁裡要出現的東東，當然要擺在 <body></body> 中，所以 10 ～ 12 行也得擺在 <body></body> 中
　
　。一個網頁裡，可能擺置了一個以上的 Silverlight
　　故每一個 Silverlight 都要有自己的 ID ( 同一頁網頁裡，每一個 Silverlight 的 ID 都不能相同 )
　　Silverlight 都放置在 DIV 中，本例則為：id="mySilverlightControlHost"
　　( 您也可以改成您好記的 ID，但是別忘了所有相關的語法處，都得一併修改之 )
　
‧第 14 ～ 23 行：載入了 JavaScript，也給 Silverlight 一個 ID，但是這兩者尚未連接上，所以需要一段 Script 來執行之
　
　。這段 Script 要緊跟在 Silverlight </DIV> 的後面
　
　。每新增一個 Silverlight，就得新增一段 Script，一樣得跟在屁股後面 ( 但是別忘了，相關的 ID 也要跟著修改 )
　
　
　
【整理】一個 Silverlight 檔，共計至少需要 4 個檔案：
　
　

　
　
　
Step 4：微軟，俺被你打敗了…
　
‧就只是語法的簡單說明，微軟 Silverlight 的官網就可以寫得「很有學問 ( ← 很難懂之意 )」、文義與段落還前後錯置 ....
　
‧還可以把檔名、ID 等命名，故意搞得跟 Expression Blend 的 Silverlight 專案檔 ( 上圖 ) 不同
　
‧最後還又玩一次，要您下載 ( ←筆者已經幫您整理成一包了 ) 命名又不一樣的東東 …，俺真的徹底被打敗了　＝..＝凸
　
‧還沒完，更扯的是檔案有誤 ( 上述的下載檔，筆者已經更正其錯誤之處 )　凸＝..＝凸
　
‧然後您還被誤導以為是很多個 Silverlight 擺在同一個網頁，結果只是一個圓 ....　凸凸凸＝..＝凸凸凸
　
　

　
　
…………………………………………………………………………………………………………………………………………………………………………………………………
　
　
再來，看看 Part 2 －－ XAML 的基礎 ( 不是啥驚動萬教的範例，就只是上圖那個圓 )
Again, 檔案與語法又是亂七八糟，所以請以筆者上述下載檔中的 SampleProject.xaml 為準：
　

‧第 1 行：Canvas = 畫布 = Layout = 300 Pixels × 300 Pixels
　
‧第 2, 3 行：類似筆者以前寫的《 XMLns ( NameSpace ) 》底稿 ( 第 #3 ～ #5 則 )
　
‧第 5, 6 行：依序為橢圓形的高 / 寬各為 200 px、橢圓形距畫布的左 / 上距離各為 30 px、外框為黑色、外框粗細為 10 px、填色為淺藍
　
　
把上述的語法 Copy / Paste 到 Expression Blend 的 XAML 標籤頁面，對照一下就很好懂了
　

　
　
…………………………………………………………………………………………………………………………………………………………………………………………………
　
　
基本範例　Basic　

　
　
頂畫布上的物件　the Canvas object　　

Silver

DeepSkyBlue

Lime

請比較第 8、13、18 行：如同向量軟體一樣，越後面繪製的物件，就會蓋過 ( 置前 ) 前面的物件
　

　
　
　
如同 CSS 一樣，設定 ZIndex，就可以改變置前置後的順序：( 數字越大，就在越上面 )
　

Silver

ZIndex="3"

DeepSkyBlue

ZIndex="2"

Lime

ZIndex="1"

　
　
…………………………………………………………………………………………………………………………………………………………………………………………………
　
　
初學 Expression Blend 會有非常多的困擾：
　
第一、很多人一開始根本就不知道 Silverlight 要如何置入到網頁中
　　　在剛才的 Silverlight 基礎 > Step 3：置入 Silverlight 中，才知道原來要放在 DIV 中
　
第二、好不容易才搞懂 Silverlight 要如何置入到網頁中，但是長寬卻搞不定（下例）
　
　
看看語法，畫布 ( 頂畫布、工作區 ) 的長寬都是 200px，圓的直徑也是200px
按理來說圓的右下側應該被裁掉才對，不過按 F5 預覽，不但沒被裁掉，網頁的大小也遠遠超過 200 × 200 px
　　

Width="200" Height="200"

Height="200" Width="200"

　
頂畫布只有 200 × 200 px
　

　
　
圓的右下角不但沒被裁掉，而且看看捲軸 ( 網頁的右下角 )，Silverlight 的大小還遠超過 200 × 200 px
　

　
　
頂畫布不能決定 Silverlight 的大小，頂畫布只不過是為了底色等用途
Default.html 才能決定Silverlight 的大小 ( Default.html.js 中，也有長寬的參數 )
把 Default.html 中的長寬改為 200 × 200 px，圓的右下角就順利被裁掉了
　

　
　
改變 Browser 的大小，捲軸也不會出現
　

　
　
　
另一種狀況：
Default.html 的 640 × 480 px 維持不變
　

　
　
Default.html.js 中，長寬原本都是100%，改成 200 px
　

　
　
按 F5 看網頁：
圓的右下角被裁掉了 ( 頂畫布的尺寸是 200 × 200 px )
不過網頁裡的東東卻佔了很大的面積，捲軸出現了 ( Silverlight 的大小是640 × 480 px )
　

　
　
…………………………………………………………………………………………………………………………………………………………………………………………………
　
　
Canvas ( 頂畫布 ) 中，還可以再塞入其它的 Canvas
　

Canvas

/Canvas

　
　
請注意，這兩個是填了色的畫布，而不是填了色的矩形
　

　
　
　
　
繪製與填色　Drawing and Painting　　

　
　
Silverlight 支援的向量圖形 ( Shape Elements, 造形元素 ) 計有：Ellipse 橢圓 , Rectangle 矩形 , Line 線 , Polyline 折線 , Polygon 多邊形 , 和 Path 路徑
其中最基本的就是 Ellipse, Rectangle , Line
　
‧橢圓　Ellipse
　Ellipse 可以藉由寬 ( Width ) 高 ( Height ) 來描述出正圓與橢圓

‧矩形　Rectangle
　Rectangle 可以藉由寬 ( Width ) 高 ( Height ) 來描述出正方形與矩形
　同時也可以藉由 RadiusX 和 RadiusY 來描述圓角
　　
‧線　Line
　Line 則是藉由 X1, Y1, X2, Y2 來描述一條直線
　

Ellipse

Rectangle

Line

　
　
　　　　在 Expression Blend 中，直線工具的語法是 <path>，而不是 <line>
　　　　( 不過 Expression Blend 一樣支援 <line> )
　
　　　　

　
　
‧多邊形 / 折線　Polygon / Polyline
　

Polyline

Polygon

　
　
　　　　在 Expression Blend 中，折線工具與多邊形工具的語法是 <path>，而不是 <Polyline> 與 <Polygon>
　　　　( 不過 Expression Blend 一樣支援 <Polyline> 與 <Polygon> )
　
　　　　

　
　
‧路徑　Path
　Path 可以描述出比較複雜的造型：折線、多邊形、曲線、圓弧、…
　Path 比教特殊的參數是 Data，可以參考下例
　

Path

Data

Path

Data

Path

Data

　
　
如果您對 Path 的標籤語法 ( Markup Syntax ) 有興趣，可以在 Silverlight SDK 中找到資料
　
　
…………………………………………………………………………………………………………………………………………………………………………………………………
　
　
題外話：( 對不怕語法的人來說，上述的 XAML 一看便懂，但是對於不熟悉語法的人而言，已經要他們的命了…，所以休息一下唄 )
　
Photoshop 自從 7 版開始，逐步加強了筆刷 ( Brushes ) 的功能，這讓很多原本玩 Painter 的 user，紛紛改玩 Photoshop
( 倒不是 Photoshop 在筆繪的功能比 Painter 強，而是筆繪與影像處理都在 Photoshop 中搞，可說是再方便不過的了 )
不過筆刷功能徹底活用的觀念，還是本天下無敵火星人所開啟的 ^++++++++++++^
　
下述都是以筆刷的觀念出發，每一張圖也花沒多少時間：( 少則三分鐘，多則一小時 )
　
　

　
　
筆刷讓 Photoshop 不再只能搞一些相片處理、合成與特效，而是可以無中生有出比較有人性的東東
　
　
當初微軟併購 MetaCreations 的 Expression ( 即 Expression Design ) 這套 向量筆刷 軟體時，筆者就很納悶：
幹嘛不去併購功能更強悍的 CorelDRAW ?! ( 甚至去併購 ACDSee Canvas or Xara Xtreme 都好 )
或許是微軟想通了：比起一般的向量軟體，筆刷與筆繪比較有人性
　
Flash 讓向量軟體的觀念大放光明
Silverlight + Expression Design 或許可以讓向量筆刷軟體的觀念如銀光 ( Silverlight ) 瀑灑 ?!
搞不好微軟表面電腦 ( Surface ) 的 UI 就是 WPF + 向量筆刷 ?!
　
　
先來看看 Expression Design 的筆刷：( 在Expression Design 中，隨便以筆刷畫條線 )
　

　
　
Copy / Paste 到 Expression Blend ( 筆刷的邊緣有透明度喔 )
　

　
　
切換到 XAML 的標籤模式
　

　
　
語法：( 由 4 個 Path 所構成 )
　

Path

　
　
大致瞭解了 Expression Blend ( WPF, Silverlight ) 與 Expression Design 的筆刷觀念後
接著看下述的 Brush 觀念，就比較不會困擾了
　
　
…………………………………………………………………………………………………………………………………………………………………………………………………
　
　
以筆刷填色　painting shapes with brushes
向量物件都有邊框 ( Stroke ) 與填色 ( Fill )，不管是邊框或是填色，對 XAML 來說，都是筆刷 ( Brush )
　
　
Silverlight 目前支援 5 種筆刷：
　
‧純色筆刷　SolidColorBrush
‧線性漸層筆刷　LinearGradientBrush
‧放射漸層筆刷　RadialGradientBrush
‧影像筆刷　ImageBrush
‧視訊筆刷　VideoBrush
　
　
純色筆刷　SolidColorBrush
　
‧Fill="顏色" ( 如 Black, red )
‧Fill="#rrggbb"
‧Fill="#aarrggbb" ( aa 代表 alpha 透明度 )
‧Color="顏色"
　

black

#000000

#ff000000

Color

Black

　
　
　
線性漸層筆刷　LinearGradientBrush
　

　
　
分述如后：
　

　( 已放大 )
　

<Rectangle Width="140" Height="70" Canvas.Left="10" Canvas.Top="10">
  <Rectangle.Fill>
    <LinearGradientBrush>
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

　
‧XAML 的漸層預設是：左上到右下
‧每換個漸層色 ( 不管是起點、中間點或是終點 ) 就要有個 Stop ( 停駐點 )
‧Offset 是位移 ( 與最左側的距離 )
‧剩下的對照一下，應該一看就懂
　
……………………………………………………………………………………………………………
　

<Rectangle Width="140" Height="70" Canvas.Left="155" Canvas.Top="10">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

　
調整為水平線形漸層
　

　　
　
　
放射漸層筆刷　RadialGradientBrush
　

<Rectangle Width="140" Height="70" Canvas.Left="10" Canvas.Top="110">
  <Rectangle.Fill>
    <RadialGradientBrush>
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1.0" />
    </RadialGradientBrush>
  </Rectangle.Fill>
</Rectangle>

　
從圓心向外放射
　
……………………………………………………………………………………………………………
　

<Rectangle Width="140" Height="70" Canvas.Left="155" Canvas.Top="110">
  <Rectangle.Fill>
    <RadialGradientBrush GradientOrigin="1,0">
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1.0" />
    </RadialGradientBrush>
  </Rectangle.Fill>
</Rectangle>

　
改變放射原點
　
　
　
影像筆刷　ImageBrush
　

Stretch="Uniform"

　
影像筆刷會直接塞滿黑框的矩形 ( 上圖左 )
如果不想要比例跳掉，就可以加上 Stretch="Uniform" ( 上圖右 )
　
　　
　
視訊筆刷　VideoBrush　( 等一下討論 Media 時，就會講到 )
　
　
　
通用的圖形性質　Common Graphic Properties　　

　
　
Silverlight 的 UIElement Objects ( Silverlight 介面的基礎物件 ) 計有：Canvas 畫布、Shapes 造形 ( 向量物件 )、TextBlock 文字區
　
而上述這幾種物件，又有一些通用的圖形性質：
‧Opacity property　不透明度
‧OpacityMask property　不透明度遮罩
‧Clip property　裁切
‧RenderTransform property　變形
　
　
不透明度　Opacity Property
　

Opacity="1.0"

Opacity="0.6"

　
　
　
不透明度遮罩　OpacityMask Property
　

OpacityMask

LinearGradientBrush

GradientStop Offset="0.25" Color="#00000000"

GradientStop Offset="1" Color="#FF000000"

　
　
從 Offset = 0.25 開始完全透明 ( alpha = 00 ) 到 Offset = 1 的完全不透明 ( alpha = FF )
　

　
　
OpacityMask 可以套用任何一種筆刷，不過比較常使用 LinearGradientBrush, RadialGradientBrush 與 ImageBrush
上例是 OpacityMask 套用在一個矩形上
　
　
　
裁切　Clip Property
　

RectangleGeometry Rect="0, 0, 100, 100"

　
　
以 Geometry Object ( 幾何物件 ) 來裁切，在 Geometry Object 以外的部份會被切掉
本例是以 RectangleGeometry ( 矩形幾何物件 ) 來裁切 Ellipse ( 橢圓 )：
　　

　
　
　
　
變形　RenderTransform Property
　
　
RenderTransform 有下面幾種功能：
‧旋轉變形　RotateTransform
‧歪斜變形　SkewTransform
‧比例變形　ScaleTransform
‧移動　TranslateTransform
　
如果要套用上述超過一種以上的變形，則要加用變形群 ( TransformGroup )
　
原圖：
　

RenderTransform

RotateTransform Angle="45"

RenderTransform

SkewTransform AngleX="30"/

RenderTransform

ScaleTransform ScaleX="1.3" ScaleY=".5"

RenderTransform

TransformGroup

RotateTransform Angle="45"

ScaleTransform ScaleX=".5" ScaleY="1.2"

SkewTransform AngleX="30"

　
　
　
旋轉變形　RotateTransform
　

<Rectangle Height="100" Width="100" Canvas.Left="70" Canvas.Top="10" Fill="Black">
  <Rectangle.RenderTransform>
    <RotateTransform Angle="45"/>
  </Rectangle.RenderTransform>
</Rectangle>

　
　
　
歪斜變形　SkewTransform
　

<Rectangle Height="100" Width="100" Canvas.Left="130" Canvas.Top="10" Fill="red">
  <Rectangle.RenderTransform>
    <SkewTransform AngleX="30"/>
  </Rectangle.RenderTransform>
</Rectangle>

　
　
　
比例變形　ScaleTransform
　

<Rectangle Height="100" Width="100" Canvas.Left="10" Canvas.Top="190" Fill="blue">
  <Rectangle.RenderTransform>
    <ScaleTransform ScaleX="1.3" ScaleY=".5"/>
  </Rectangle.RenderTransform>
</Rectangle>

　
　
　
變形群　TransformGroup
　

<Rectangle Height="100" Width="100" Canvas.Left="160" Canvas.Top="130" <Fill="Green">
  <Rectangle.RenderTransform>
    <TransformGroup>
      <RotateTransform Angle="45"/>
      <ScaleTransform ScaleX=".5" ScaleY="1.2"/>
      <SkewTransform AngleX="30"/>
    </TransformGroup>
  </Rectangle.RenderTransform>
</Rectangle>

　
　
　
影像　Images　　

Image Source="01.png" Canvas.Left="-65" Canvas.Top="-36"

　
　
Expression Blend ( Silverlight ) 對於圖檔的表現度，是遠遠超過 Flash !!
之前已講過，在 Expression Blend 縮放去背的圖檔 ( *.png )，圖緣都不會鋸齒化，也不易模糊

XAML 置入透明背景的 *.png 檔，也比 Flash 直覺多了
　
　
伸展　Stretch Property
　

Stretch="None"

Stretch="Fill"

Stretch="Uniform"

　
　　　　None：原尺寸
　　　　Fill：填滿
　　　　Unform：依比例縮放
　
　
　
文字　Text（TextBlock）　

　
　
文字區元素　TextBlock Element
　
在 Expression Blend ( Silverlight ) 的工具箱中，就只有文字區 ( TextBlock ) 這一個文字工具 ( 即為本例的 <textblock> )
　

<TextBlock>

</TextBlock>

　
　
　
通用文字區性質　Common TextBlock Propeties
　
　
　　　　前面講過：
　　　　Silverlight 的 UIElement Objects ( Silverlight 介面的基礎物件 ) 計有：Canvas 畫布、Shapes 造形 ( 向量物件 )、TextBlock 文字區
　
　　　　而上述這幾種物件，又有一些通用的圖形性質：
　　　　‧Opacity property　不透明度
　　　　‧OpacityMask property　不透明度遮罩
　　　　‧Clip property　裁切
　　　　‧RenderTransform property　變形
　
　
除了適用於上述的通用性質之外，文字區也有一些自己的性質：
‧FontSize：文字尺寸 ( pixels )
‧FontStyle：文字樣式 ( Normal 一般，Italic 斜體，Oblique 傾斜 ← 若字型無 Italic 這附加選項時，則用 Oblique )
‧FontWeight：文字粗細 ( Thin, ExtraLight, Light, Normal, Medium, SemiBold, Bold, ExtraBold, Black, ExtraBlack )
‧FontFamily：文字家族
‧Foreground：前景色 ( solid color, gradient, or an image )
　
文字區的性質 + 漸層：
　

　
　
整體來說
‧Expression Blend 與 Silverlight 的文字功能並不強
‧Silverlight 測試版也不支援中文 ( 2 byte )《不過 Expression Blend 倒能正確顯式中文字》
‧不過其物件化夠徹底，輔之還有通用的圖形性質 ( Common Graphic Properties )，在處理上倒是加分不少
Silverlight 未來正式版若是能加強文字的功能、加入對 2 byte 的支援，還是非常有前景
　
　
　
運行元素　Run Element
　
如果要改變字串中文字的大小，就可以套用 <run>，在 <run> 中也可以加用文字區的各種性質
　

<Run FontSize="90" Foreground="#FFB43535">

</Run>

　
　
　
多種字型的設定　Specifying Multiple Fonts
　
跟 HTML 一樣，字型也可以設定優先順序
還有萬用字型－－ Portable User Interface，可以保證任何電腦都能支援 ( 但 Silverlight 目前是測試版，不支援中文，故一樣沒輒 ... )
　

Arial, Times New Roman

Times New Roman, Arial

Portable User Interface