silverlight - 碁峰資訊epaper.gotop.com.tw/pdf/acl023800.pdf · 完美入門 2 1 目錄...
Post on 31-Jul-2020
1 Views
Preview:
TRANSCRIPT
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 以矩形顯示影像照片
top related