iv

完美入門

2

1目錄

Silverlight技術架構概觀

1-1　Silverlight 1.0架構 .......................................................................1-2

1-2　Silverlight跨平台與跨瀏覽器能力 .................................................1-3

1-3　Silverlight功能特徵 ......................................................................1-7

1-4　Silverlight最佳應用場景（Scenarios ） ..........................................1-7

1-5　微軟 Silverlight官方網站 ..............................................................1-8

1-6　範例程式名稱列表 ...................................................................... 1-10

1-7　結論 ........................................................................................... 1-10

Silverlight開發環境建置

2-1　用戶端 Silverlight的開發環境的建置 ............................................2-2

2-2　安裝 Visual Studio 2005的 Silverlight專案樣板 ............................2-4

2-3　Silverlight專案樣板之疑問 ...........................................................2-9

2-4　Silverlight相關輔助資源及開發工具 ........................................... 2-12

2-5　結論 ........................................................................................... 2-20

v

目錄

4

3Silverlight大問哉及專案組成元素功能解說

3-1 觀察 Silverlight專案樣板 .............................................................3-2

3-2 Silverlight技術大問哉 ..................................................................3-3

3-3 解析 Silverlight專案組成元素 .................................................... 3-10

3-4 Silverlight程式深入探討 ............................................................ 3-15

3-4-1 修改 Silverlight載入之屬性參數 .................................... 3-15

3-4-2 JavaScript與 W3C DOM（Document Object Model）

物件的存取 .................................................................... 3-18

3-4-3 JavaScript與 Silverlight Object Model的存取 ................ 3-22

3-4-4 createSilverlight()方法與 Silverlight.js檔之關係 ...............3-24

3-5 在 JSP、PHP 或 ASP 程式中建立 Silverlight應用程式 ................ 3-26

3-6 結論 ........................................................................................... 3-27

Silverlight物件與 XAML 語法解說

4-1 Silverlight物件 ............................................................................4-2

4-2 聖殿祭司的話 ...............................................................................4-3

4-3 XAML語法的學習與否 ................................................................4-3

4-4 XAML語法簡介...........................................................................4-6

4-5 XAML的特性 ............................................................................ 4-12

4-6 Canvas 物件 ............................................................................... 4-13

4-7 結論 ........................................................................................... 4-15

vi

完美入門

6

5Silverlight文字（Text）之應用

5-1 Silverlight文字功能概觀 ..............................................................5-2

5-2 TextBlock文字區塊 .....................................................................5-3

5-2-1 TextBlock的基本運用 .....................................................5-5

5-2-2 Fonts 字型屬性（Atrributes ）的運用 ............................. 5-12

5-2-3 文字的裁切（Clip）效果 ............................................... 5-15

5-3 Run Element............................................................................... 5-20

5-4 Glyphs 文字雕刻 ........................................................................ 5-22

5-5 文字搭配 Brush筆刷之應用 ........................................................ 5-26

5-6 文字搭配變形（Transform）特效的運用 .................................... 5-31

5-7 結論 ........................................................................................... 5-37

Silverlight繪圖（Shape ）之應用

6-1 Silverlight繪圖（Shape）物件功能概觀 ......................................6-2

6-2 Line直線 .....................................................................................6-3

6-2-1 直線頂部蓋狀（LineCap ）之探討 ...................................6-6

6-3 Rectangle矩形 .............................................................................6-8

6-4 Ellipse橢圓形與圓形 .................................................................. 6-15

6-5 Polygon多邊形 .......................................................................... 6-22

6-6 Polyline多線形 .......................................................................... 6-27

6-7 Path 路徑繪圖 ............................................................................ 6-32

6-8 結論 ........................................................................................... 6-38

vii

目錄

8

7Silverlight各種筆刷（Brush）之應用

7-1 Silverlight筆刷概觀 .....................................................................7-2

7-2 Silverlight五種筆刷的應用 ...........................................................7-5

7-2-1 SolidColorBrush單色實心筆刷 ........................................7-6

7-2-2 LinearGradientBrush 線性漸層筆刷 ................................ 7-10

7-2-3 RadialGradientBrush放射狀漸層筆刷............................. 7-19

7-2-4 ImageBrush影像筆刷 ..................................................... 7-25

7-2-5 VideoBrush影片筆刷 ..................................................... 7-30

7-3 結論 ........................................................................................... 7-36

Silverlight之 Image 影像處理

8-1 Web影像顯示之需求 ....................................................................8-2

8-2 Silverlight顯示影像的兩種途徑 ....................................................8-2

8-3 Image與 ImageBrush影像顯示功能的比較 ...................................8-5

8-3-1 Image物件 ......................................................................8-5

8-3-2 ImageBrush影像筆刷物件 ................................................8-7

8-4 以 Image物件顯示影像圖片..........................................................8-9

8-4-1 基本的 Image物件運用 ....................................................8-9

8-4-2 Image影像的 Stretch 伸展模式 ....................................... 8-12

8-4-3 Image影像的裁切（Clip ） ............................................. 8-18

8-5 ImageBrush影像筆刷的應用 ....................................................... 8-21

8-5-1 基本的 ImageBrush 物件運用 ......................................... 8-22

8-5-2 ImageBrush影像筆刷的 Stretch 伸展模式 ....................... 8-25

8-5-3 ImageBrush影像筆刷的對齊（Align） ........................... 8-27

8-6　結論 ........................................................................................... 8-29

viii

完美入門

9

10

Silverlight影音播放（Audio & Video）之應用

9-1 Silverlight影音功能概觀 ..............................................................9-2

9-2　 Audio聲音的播放 ........................................................................9-4

9-3　 Video影片的播放....................................................................... 9-13

9-4　 結論 ........................................................................................... 9-24

Silverlight幾何繪圖（Geometries ）之應用

10-1 Geometry幾何繪圖之功能分類 ................................................... 10-2

10-2 Geometry之正確觀念與使用 ...................................................... 10-4

10-3 簡單幾何物件（Simple Geometry） ............................................. 10-8

10-3-1 LineGeometry直線幾何繪圖 .......................................... 10-9

10-3-2 RectangleGeometry矩形幾何繪圖 ................................ 10-12

10-3-3 EllipseGeometry橢圓形幾何繪圖 ................................. 10-14

10-4 合成幾何物件（Composite Geometry） ..................................... 10-17

10-5 路徑幾何物件（Path Geometry ） .............................................. 10-22

10-5-1 LineSegment直線 ........................................................ 10-23

10-5-2 ArcSegment弧線 ......................................................... 10-25

10-5-3 QuadraticBezierSegment二次方貝茲曲線 ..................... 10-34

10-5-4 BezierSegment三次方貝茲曲線 ................................... 10-38

10-5-5 PolyLineSegment多重線條 .......................................... 10-44

10-5-6 PolyQuadraticBezierSegment多重二次方貝茲曲線 ....... 10-48

10-5-7 PolyBezierSegment多重三次方貝茲曲線 ...................... 10-51

ix

目錄

1110-6 PathGeometry、PathFigure與 Segment三者之關係 .................. 10-56

10-6-1 PathGeometry集合中的多個 PathFigure物件 ............... 10-56

10-6-2 PathFigure物件中的多重 Segment區段物件宣告 .............. 10-59

10-8 結論 ......................................................................................... 10-62

Silverlight變形特效（Transform ）之應用

11-1 Silverlight變形特效（Transform）概觀 ..................................... 11-2

11-2 變形特效（Transform）之語法解說與實際應用 ......................... 11-4

11-2-1 旋轉特效（RotateTransform） ........................................ 11-5

11-2-2 縮放特效（ScaleTransform） ........................................ 11-10

11-2-3 歪斜特效（SkewTransform） ........................................ 11-16

11-2-4 移動特效（TranslateTransform） .................................. 11-23

11-3 變形特效群組與進階效果自訂 .................................................. 11-29

11-3-1 變形特效群組（TransformGroup ） ............................... 11-29

11-3-2 矩陣變形特效（MatrixTransform） ............................... 11-31

11-4 變形特效中心點之探討 ............................................................. 11-32

11-4-1 RotateTransform旋轉變形中心點解說 .......................... 11-33

11-4-2 ScaleTransform縮放變形中心點解說 ........................... 11-36

11-4-3 SkewTransform歪斜變形中心點解說 ........................... 11-40

11-5 結論 ......................................................................................... 11-44

x

完美入門

12

13

Silverlight動畫（Animation ） 製作原理與屬性動畫系統

12-1 Silverlight動畫原理 ................................................................... 12-2

12-1-1 動畫基本原理 ................................................................ 12-2

12-1-2 手工動畫製作的繁瑣過程 ............................................... 12-2

12-2 Silverlight 動畫系統（Animation System） ......................................... 12-4

12-3 屬性動畫系統（Property Animation System） ................................................12-5

12-4 From/ To/ By類型動畫 ............................................................... 12-9

12-4-1 DoubleAnimation動畫之應用 ........................................ 12-9

12-4-2 ColorAnimation動畫之應用 ......................................... 12-24

12-4-3 PointAnimation動畫之應用 ......................................... 12-29

12-5 關於 By的運用 ........................................................................ 12-32

12-6 Timing常用的三個屬性：

AutoReverse、RepeatBehavior 與 SpeedRatio ........................... 12-35

12-7 結論 ......................................................................................... 12-38

以 JavaScript控制 Storyboard 動畫 之執行

13-1 以 JavaScript存取 Silverlight DOM 物件的應用 .......................... 13-2

13-2 以 JavaScript控制 Storyboard動畫之執行 ......................................... 13-8

13-3 Resources 資源定義 .................................................................. 13-13

13-4 Silverlight對滑鼠事件（Mouse Events ）的支援 ...................... 13-17

13-5 結論 ......................................................................................... 13-31

xi

目錄

範例目錄

範例 2-1 建立 VS 2005的 Silverlight專案樣板 ..................................2-4

範例 2-2 使用 VS 2005建立第一個 Silverlight專案程式 ....................2-8

範例 3-1 建立 Silverlight網頁程式 .................................................. 3-11

範例 3-2 修改 Silverlight控制項的載入特性 .................................... 3-15

範例 3-3 以 JavaScript存取 HTML DOM 之中的元素 ....................... 3-19

範例 4-1 XAML語法的逐步宣告 .......................................................4-7

範例 5-1 以 TextBlock顯示基本的文字資訊 .......................................5-6

範例 5-2 TextBlock文字的自動換行 ..................................................5-7

範例 5-3 TextBlock文字透明度（Opacity）的運用 ......................... 5-11

範例 5-4 變化 TexBlock文字大小、粗細與樣式 ............................... 5-13

範例 5-5 TextBlock文字的裁切 ....................................................... 5-15

範例 5-6 星狀繪圖與文字裁切之結合 ............................................... 5-17

範例 5-7 RUN 在文字上的應用 ........................................................ 5-21

範例 5-8 Glyphs 文字雕刻的基本運用 .............................................. 5-23

範例 5-9 TextBlock配合線性漸層筆刷之效果 .................................. 5-27

範例 5-10 TextBlock配合放射狀漸層筆刷之效果............................... 5-29

範例 5-11 TextBlock文字的角度（RotateTransform）旋轉 ............... 5-33

範例 5-12 Glyphs 文字雕刻套用變形特效 .......................................... 5-35

範例 6-1 Line直線繪圖的應用 ...........................................................6-5

範例 6-2 Line直線之頂部蓋狀的設定 ................................................6-6

範例 6-3 基本的矩形繪圖 ..................................................................6-9

範例 6-4 繪製具有圓角弧度之矩型 .................................................. 6-10

範例 6-5 Rectangle矩形搭配漸層筆刷 ............................................. 6-12

範例 6-6 Rectangle矩形搭配影像筆刷（ImageBrush ） ..................... 6-13

範例 6-7 基本橢圓形與圓形的繪製 .................................................. 6-16

範例 6-8 橢圓形的透明度變化應用 .................................................. 6-17

範例 6-9 橢圓形搭配放射狀漸層筆刷製造 3D 立體球 ....................... 6-18

xii

完美入門

範例 6-10 橢圓形結合影像筆刷顯示照片 ........................................... 6-20

範例 6-11 基本的 Polygon多邊形繪圖 ............................................... 6-23

範例 6-12 以 Polygon繪製星狀圖形 .................................................. 6-25

範例 6-13 基本的 Polyline多線形繪圖 ............................................... 6-28

範例 6-14 Polyline多線形之封閉測試 ................................................ 6-30

範例 6-15 運用 Path繪製卡通圖案 ..................................................... 6-34

範例 7-1 矩形以 SolidColorBrush單色筆刷著色的應用 ......................7-8

範例 7-2 矩形以 LinearGradientBrush線性漸層筆刷著色的應用 ....... 7-12

範例 7-3 LinearGradientBrush線性漸層筆刷在 TextBlock

文字區塊上的應用 ............................................................. 7-14

範例 7-4 LinearGradientBrush線性漸層筆刷在 Run文字上的應用 ... 7-16

範例 7-5 RadialGradientBrush 放射狀漸層筆刷的運用 ...................... 7-21

範例 7-6 RadialGradientBrush 放射狀漸層筆刷在 TextBlock

文字區塊上的應用 ............................................................. 7-23

範例 7-7 ImageBrush影像筆刷在 TextBlock 文字上的運用 .............. 7-27

範例 7-8 利用 ImageBrush影像筆刷顯示具有圓角的矩形照片 .......... 7-29

範例 7-9 VideoBrush影片筆刷在幾何圖形上的應用 ......................... 7-32

範例 7-10 VideoBrush影片筆刷在 TextBlock 文字上的應用 ............... 7-34

範例 8-1 以 Image顯示圖片 ............................................................. 8-10

範例 8-2 Image的 Stretch伸展模式（圖片＜區域） .......................... 8-13

範例 8-3 Image的 Stretch伸展模式（圖片＞區域） .......................... 8-16

範例 8-4 影像圖片的裁切 ................................................................ 8-18

範例 8-5 Image影像照片配合 Geometry 星狀幾何繪圖的裁切 .......... 8-20

範例 8-6 利用 ImageBrush影像筆刷在 Shape繪圖物件上顯示照片 ... 8-22

範例 8-7 使用 ImageBrush影像筆刷結合 Geometry 圖形顯示星狀

照片 .................................................................................. 8-24

範例 8-8 ImageBrush的 Stretch 伸展模式 ........................................ 8-26

範例 8-9 ImageBrush影像筆刷的對齊方式 ....................................... 8-28

範例 9-1 基本的 Audio聲音播放 ........................................................9-5

範例 9-2 調整 MediaElement的 Volume及 Balance ...........................9-7

範例 9-3 聲音播放的進階控制 ...........................................................9-8

xiii

目錄

範例 9-4 基本 Video影片的播放 ...................................................... 9-14

範例 9-5 旋轉 Video影片 ................................................................ 9-15

範例 9-6 影片播放的進階控制 ......................................................... 9-16

範例 9-7 影片的裁切（Clip） ........................................................... 9-21

範例 9-8 使用 Star來進行影片的裁切 .............................................. 9-22

範例 10-1 Geometry幾何繪圖物件的使用與寄生模式 ........................ 10-4

範例 10-2 UIElement之 Clip屬性與 Geometry幾何繪圖物件 ............. 10-6

範例 10-3 以 LineGeometry繪製直線 ................................................ 10-9

範例 10-4 以 RectangleGeometry 繪製矩形 ...................................... 10-12

範例 10-5 以 EllipseGeometry 繪製圓形與橢圓形 ............................. 10-14

範例 10-6 矩形的合成幾何 .............................................................. 10-17

範例 10-7 以 LineSegment繪製直線 ................................................ 10-23

範例 10-8 以 ArcSegment繪製基本弧線 .......................................... 10-26

範例 10-9 ArcSegment弧線的 IsLargeArc與 SweepDirection

屬性運用 ......................................................................... 10-29

範例 10-10 ArcSegment弧線之 X 軸方向的旋轉角度 ......................... 10-31

範例 10-11 以 QuadraticBezierSegment繪製二次方的貝茲曲線 .......... 10-35

範例 10-12 以 BezierSegment繪製三次方的貝茲曲線 ........................ 10-39

範例 10-13 BezierSegment控制點的變化 ........................................... 10-41

範例 10-14 以 PolyLineSegment繪製星狀圖形 .................................. 10-45

範例 10-15 以 PolyQuadraticBezierSegment繪製幾何圖形 ................. 10-49

範例 10-16 以 PolyBezierSegment繪製心形 ...................................... 10-53

範例 10-17 PathGeometry集合中的多個 PathFigure物件宣告 ............ 10-55

範例 10-18 以多重 Segments 繪製錨形 .............................................. 10-59

範例 11-1 Image影像圖片旋轉特效的應用 ........................................ 11-6

範例 11-2 TextBlock文字區塊旋轉特效的應用 .................................. 11-8

範例 11-3 Image影像圖片縮放的特效應用 ...................................... 11-11

範例 11-4 Shape繪圖物件之放大 ..................................................... 11-13

範例 11-5 文字的鏡射倒影 .............................................................. 11-15

範例 11-6 Image影像圖片歪斜特效的應用 ...................................... 11-17

範例 11-7 TextBlock文字歪斜特效的應用 ....................................... 11-19

xiv

完美入門

範例 11-8 以歪斜特效創造立方體文字效果 ...................................... 11-21

範例 11-9 Image影像圖片移動特效的應用 ...................................... 11-25

範例 11-10 以滑鼠 Click控制 Image圖片移動特效的執行 ................. 11-27

範例 11-11 同時使用多個變形特效之群組應用 .................................. 11-30

範例 11-12 矩形旋轉變形之中心點動畫 ............................................. 11-33

範例 11-13 矩形縮放變形之中心點動畫 ............................................. 11-37

範例 11-14 矩形歪斜變形之中心點動畫 ............................................. 11-41

範例 12-1 製作矩形由長度與寬度由小變大之動畫 ........................... 12-10

範例 12-2 製作矩形淡入（Fade-In）的基本動畫 ............................. 12-15

範例 12-3 製作矩形的旋轉效果動畫 ................................................ 12-18

範例 12-4 製作矩形的淡入與旋轉效果的動畫 .................................. 12-22

範例 12-5 製作矩形的淡入、旋轉與顏色變化效果的動畫 ................. 12-26

範例 12-6 EllipseGeometry 圓形之 PointAnimation 動畫 .................. 12-30

範例 12-7 By屬性的運用 ................................................................ 12-33

範例 12-8 控制動畫演出的進階屬性 ................................................ 12-36

範例 13-1 以 JavaScript存取 Silverlight DOM 控制影片播放行為 ...... 13-3

範例 13-2 透過滑鼠 Click事件進行矩形 Shape的動畫旋轉 ................ 13-9

範例 13-3 將 Storyboard動畫腳本集中到 Resources 之中 ................. 13-14

範例 13-4 滑鼠 MouseLeftButtonDown 事件的應用 .......................... 13-18

範例 13-5 滑鼠 MouseMove事件的運用 .......................................... 13-21

範例 13-6 滑鼠 MouseLeftButtonDown 與 MouseLeftButtonUp 事件

的並用 ............................................................................ 13-24

範例 13-7 滑鼠 MouseEnter 與 MouseLeave事件的運用 ................... 13-28

6-�

Chapter 6 Silverlight繪圖（Shape）之應用

Silverlight繪圖（Shape）之應用

6-1　Silverlight繪圖（Shape）物件功能概觀

6-2　Line直線

6-3　Rectangle矩形

6-4　Ellipse橢圓形與圓形

6-5　Polygon 多邊形

6-6　Polyline多線形

6-7　Path 路徑繪圖

Chapter 6

6-�

完美入門

在許多 Web 設計的場合中，繪圖功能一直是不可或缺的一個重要功能

環結，如此才能滿足許多常見而基本的繪圖需求如：直線、圓形、正方形

等等，而 Silverlight對應這個部分的功能稱之為 Shape，Shape中文翻成繪

圖，透過 Shape類別所衍生出的各種繪圖功能子類別，可以應付從簡單到複

雜的繪圖需求，本章將介紹 Silverlight繪圖所包含的各種 Shape繪圖物件，

讓各位可以將 Shape繪圖運用在實際的 Web網頁中。

6-1　Silverlight繪圖（Shape ）物件功能概觀

傳統的 Windows 在 2D 繪圖方面是使用 GDI+等功能，而 Si lver l ight

在 2D 方面則提供了兩大內建的繪圖功能：繪圖（Shape）、幾何繪圖

（Geometry），而本章要介紹的正是前者。

Silverlight的 Shape繪圖是一個名為「Shape」基底類別，由它衍生出

六個子類別，而這六個子類別正是實際繪圖的物件，透過這六個類別可以繪

製不同的圖形，而這六個類別物件如下：

Line直線：用來繪製直線

Rectangle矩形：用來繪製正方形或長方形，統稱為矩形

Ellipse橢圓形：用來繪製圓形或橢圓形，統稱為橢圓形

Po lygon 多邊形：用來繪製多邊形，例如三角形，正方形，五邊形

等等

Polyline多線形：與 Polygon 功能相近，差別在於圖形的封閉性

Path路徑：這是一種最複雜，但功能也是最強大的繪圖功能，甚至

是前述所有繪圖物件功能的綜合體

6-�

Chapter 6 Silverlight繪圖（Shape）之應用

附

註

圖6-1　Shapes類別繼承關係圖

Shape類別其完整之命名空間為 System.Windows.Shapes.Shape，而由

此類別衍生出 Line、Rectangle、Ellipse、Polygon、Polyline與 Path六個

子類別。

6-2　Line 直線

Line 物件是用來繪製單一直線。只要您指定起始座標（X1,Y1）和結

束座標（X2,Y2）值，Line物件就會自動繪製一條直線，並且可以設定線條

的顏色及粗細。

圖6-2　Line直線示意圖

6-�

完美入門

附

註

Line基本語法如下：

Line 屬性說明

下表是 Line物件之重要屬性說明。

屬性 說明

X1與 Y1 為起始點座標值（X1,Y1）

X2與 Y2 為結束點座標值（X2,Y2）

Stroke為矩形外框的顏色，外框顏色可指定如：Black、Red、Blue

等顏色。

StrokeThickness為矩形外框的粗細，可以指定 0、1、2、3…到無限大，預設

值為 0。

StrokeStartLineCap為 Line直線起始點的頂部蓋狀，有 Flat、Round、Square

及 Triangle四種形狀可選擇，預設值為 Flat。

StrokeEndLineCap為 Line直線結束點的頂部蓋狀，有 Flat、Round、Square

及 Triangle四種形狀可選擇，預設值為 Flat。

表6-1　Line物件重要屬性說明

Stroke與 StrokeThickness雖然是指外框及外框粗細，但實際上它是在設

定筆刷的顏色及筆刷的粗細，並且不限於 Line擁有這兩個屬性，這兩個屬

性是許多 Silverlight物件所共有的。

6-�

Chapter 6 Silverlight繪圖（Shape）之應用

範例 6-1　Line 直線繪圖的應用

本範例將示範如何使用 Line物件繪製直線。請參考 LineBasic.html與

LineBasic.xaml程式，以下為 LineBasic.xaml程式碼：

完成後請執行 LineBasic.html程式，執行畫面如下圖。

圖6-3　直線繪圖

外框顏色 外框粗細

結束座標起始座標

6-6

完美入門

6-2-1　直線頂部蓋狀（LineCap ）之探討

關於直線還有一個比較特別的地方可以變化，也就是頂部蓋狀

（Cap），而 Silverlight提供了四種頂部蓋狀讓各位運用：

1 Flat平狀

2 Round 圓形

3 Square方形

4 Triangle三角形

圖6-4　頂部蓋狀圖

而直線在起始點與結束點皆可以設定不同的頂部蓋狀，起始點是在

StrokeStartLineCap屬性設定，而結束點是在 StrokeEndLineCap屬性指定不

同的形狀；並且二者可以單獨使用，或者成對一起使用，系統並沒有限定其

使用的方式。

範例 6-2　Line 直線之頂部蓋狀的設定

本範例將示範如何設定 Line 直線之頂部蓋狀，只要針對 StrokeStar t

L ineCap 及 StrokeEndLineCap 兩個屬性指定不同的形狀即可。請參考

LineCap.html與 LineCap.xaml程式，以下為 LineCap.xaml程式碼：

6-�

Chapter 6 Silverlight繪圖（Shape）之應用

完成後請執行 LineCap.html程式，執行畫面如下圖。

圖6-5　直線之頂部蓋狀

StrokeStartLineCap="Triangle" StrokeEndLineCap="Round"

6-�

完美入門

6-3　Rectangle 矩形

Rectangle物件是用來繪製正方形或長方形的圖形。只要設定 Rectangle

的 Width 寬度及 Height 高度就能夠決定要畫出的是正方形或長方形，同時

也可以指定矩形外框線條的顏色及粗細等等。

圖6-6　Rectangle矩形示意圖

Rectangle基本語法如下：

Rectangle 屬性說明

下表是 Rectangle物件之重要屬性說明。

屬性 說明

Width 為矩形的寬度

Height 為矩形的高度

Fill 為矩形內部填滿的顏色，可填上如 Black、Red等色彩。

Stroke 為矩形外框的顏色，可填上如 Black、Red等色彩。

StrokeThickness為矩形外框的粗細，可以指定 0、1、2、3…到無限大，預設

值為 0。

表6-2　Rectangle物件重要屬性說明

6-�

Chapter 6 Silverlight繪圖（Shape）之應用

範例 6-3　基本的矩形繪圖

本範例將示範如何利用 Rectangle 物件繪製基本的矩形圖形，最基

本的只要設定寬度、長度與填滿色即可。請參考 RectangleBas ic .h tml 與

RectangleBasic.xaml程式，以下為 RectangleBasic.xaml程式碼：

程式說明：

Rectangle 的 Fi l l 屬性是指欲填入的色彩，Stroke 是指定外框線條的

顏色，而 StrokeThickness 則是指外框線條的粗細大小。完成後請執行

RectangleBasic.html程式，執行畫面如下圖。

6-�0

完美入門

圖6-7　基本矩形

範例 6-4　繪製具有圓角弧度之矩型

事實上，在 Si lver l igh t 的世界裡，系統所賦予矩形的功能並不是死

板板的，例如最常見的是您可能想將矩形四個直角變成具有弧度之圓角，

然而這對 Rectangle 矩形功能而言再簡單不過了，只需要針對 RadiusX

及 RadiusY 這兩個屬性加以設定即可。請參考 RectangleRadius .h tml 與

RectangleRadius.xaml程式，以下為 RectangleRadius.xaml程式碼：

Fill

="Orange"

Stroke="Black"

StrokeThickness="5"Stroke="Red"

StrokeThickness="10"

6-��

Chapter 6 Silverlight繪圖（Shape）之應用

程式說明：

當您設定矩形之圓角時，RadiusX及 RadiusY二者的設定值並不需要是

對稱，若您給予二者不對稱值時，所產生出來之圓角形將會有不同之外貌。

完成後請執行 RectangleRadius.html程式，執行畫面如下圖。

圖6-8　具有圓角之矩形

None

RadiusX="10"

RadiusY="30"

RadiusX="10"

RadiusY="10"

RadiusX="50"

RadiusY="25"

6-��

完美入門

範例 6-5　Rectangle 矩形搭配漸層筆刷

而在上面的範例中，矩形的色彩是單一顏色的，但是 Si lver l igh t 並

沒有對色彩的使用限制的這麼死，例如您可以搭配筆刷（Brush ）之功

能，就可以讓矩形產生漸層的變化。請參考 RectangleGradien t .h tml 與

RectangleGradient.xaml程式，以下為 RectangleGradient.xaml程式碼：

6-��

Chapter 6 Silverlight繪圖（Shape）之應用

程式說明：

本範例利用到下一章的筆刷（Brush）功能，其中分別使用到了線性漸

層筆刷與放射狀漸層筆刷之功能，目的是為了逐步打破各位對矩形繪圖功能

簡單無趣之印象，事實上 Silverlight的繪圖透過不同功能的搭配，可以營造

出令人著迷多變化的效果，在此您只需要執行程式進行體驗即可，筆刷的章

節會詳細解說其功能用法。完成後請執行 RectangleGradient.html程式，執

行畫面如下圖。

圖6-9　矩形漸層著色

範例 6-6　Rectangle 矩形搭配影像筆刷（ImageBrush）

如果您以為矩形最多就是加上漸層色彩您就錯了，因為若搭配影像

筆刷，可以製造出具備影像之照片，可以應用在 Web 電子相簿之中。

請 參 考 Rectangle Image .h tml 與 Rectangle Image .xaml 程 式， 以 下 為

RectangleImage.xaml程式碼：

線性漸層 放射狀漸層

6-��

完美入門

程式說明：

關於影像筆刷之運用，在下一章有詳細的介紹。完成後請執行

RectangleImage.html程式，執行畫面如下圖。

圖6-10　以矩形顯示影像照片