Silverlight完美入门


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 更多电子书教程下载请登陆http://down.zzbaike.com/ebook 本站提供的电子书教程均为网上搜集,如果该教程涉及或侵害到您的版权请联系我们。  目錄 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 更多电子书教程下载请登陆http://down.zzbaike.com/ebook 本站提供的电子书教程均为网上搜集,如果该教程涉及或侵害到您的版权请联系我们。 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 更多电子书教程下载请登陆http://down.zzbaike.com/ebook 本站提供的电子书教程均为网上搜集,如果该教程涉及或侵害到您的版权请联系我们。 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 更多电子书教程下载请登陆http://down.zzbaike.com/ebook 本站提供的电子书教程均为网上搜集,如果该教程涉及或侵害到您的版权请联系我们。 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 更多电子书教程下载请登陆http://down.zzbaike.com/ebook 本站提供的电子书教程均为网上搜集,如果该教程涉及或侵害到您的版权请联系我们。 ix 目錄 11 10-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 更多电子书教程下载请登陆http://down.zzbaike.com/ebook 本站提供的电子书教程均为网上搜集,如果该教程涉及或侵害到您的版权请联系我们。  完美入門 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 更多电子书教程下载请登陆http://down.zzbaike.com/ebook 本站提供的电子书教程均为网上搜集,如果该教程涉及或侵害到您的版权请联系我们。 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 更多电子书教程下载请登陆http://down.zzbaike.com/ebook 本站提供的电子书教程均为网上搜集,如果该教程涉及或侵害到您的版权请联系我们。 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 更多电子书教程下载请登陆http://down.zzbaike.com/ebook 本站提供的电子书教程均为网上搜集,如果该教程涉及或侵害到您的版权请联系我们。 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 更多电子书教程下载请登陆http://down.zzbaike.com/ebook 本站提供的电子书教程均为网上搜集,如果该教程涉及或侵害到您的版权请联系我们。 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 更多电子书教程下载请登陆http://down.zzbaike.com/ebook 本站提供的电子书教程均为网上搜集,如果该教程涉及或侵害到您的版权请联系我们。 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 更多电子书教程下载请登陆http://down.zzbaike.com/ebook 本站提供的电子书教程均为网上搜集,如果该教程涉及或侵害到您的版权请联系我们。 6- 完美入門 在許多 Web 設計的場合中,繪圖功能一直是不可或缺的一個重要功能 環結,如此才能滿足許多常見而基本的繪圖需求如:直線、圓形、正方形 等等,而 Silverlight 對應這個部分的功能稱之為 Shape,Shape 中文翻成繪 圖,透過 Shape 類別所衍生出的各種繪圖功能子類別,可以應付從簡單到複 雜的繪圖需求,本章將介紹 Silverlight 繪圖所包含的各種 Shape 繪圖物件, 讓各位可以將 Shape 繪圖運用在實際的 Web 網頁中 。 6-1 Silverlight 繪圖(Shape )物件功能概觀 傳統的 Windows 在 2D 繪圖方面是使用 GDI+ 等功能,而 Silverlight 在 2D 方面則提供了兩大內建的繪圖功能: 繪圖(Shape )、 幾何繪圖 (Geometry ),而本章要介紹的正是前者。 Silverlight 的 Shape 繪圖是一個名為「Shape 」基底類別,由它衍生出 六個子類別,而這六個子類別正是實際繪圖的物件,透過這六個類別可以繪 製不同的圖形,而這六個類別物件如下: Line 直線:用來繪製直線 Rectangle 矩形:用來繪製正方形或長方形,統稱為矩形 Ellipse 橢圓形:用來繪製圓形或橢圓形,統稱為橢圓形 Polygon 多邊形:用來繪製多邊形,例如三角形,正方形,五邊形 等等 Polyline 多線形:與 Polygon 功能相近,差別在於圖形的封閉性 Path 路徑:這是一種最複雜,但功能也是最強大的繪圖功能,甚至 是前述所有繪圖物件功能的綜合體 更多电子书教程下载请登陆http://down.zzbaike.com/ebook 本站提供的电子书教程均为网上搜集,如果该教程涉及或侵害到您的版权请联系我们。 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直線示意圖 更多电子书教程下载请登陆http://down.zzbaike.com/ebook 本站提供的电子书教程均为网上搜集,如果该教程涉及或侵害到您的版权请联系我们。 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 物件所共有的 。 更多电子书教程下载请登陆http://down.zzbaike.com/ebook 本站提供的电子书教程均为网上搜集,如果该教程涉及或侵害到您的版权请联系我们。 6- Chapter 6 Silverlight 繪圖(Shape )之應用 範例 6-1 Line 直線繪圖的應用 本範例將示範如何使用 Line 物件繪製直線 。請參考 LineBasic.html 與 LineBasic.xaml 程式,以下為 LineBasic.xaml 程式碼: 完成後請執行 LineBasic.html 程式,執行畫面如下圖。 圖6-3 直線繪圖 外框顏色 外框粗細 結束座標起始座標 更多电子书教程下载请登陆http://down.zzbaike.com/ebook 本站提供的电子书教程均为网上搜集,如果该教程涉及或侵害到您的版权请联系我们。 6- 完美入門 6-2-1 直線頂部蓋狀(LineCap )之探討 關於直線還有一個比較特別的地方可以變化,也就是頂部蓋狀 (Cap ),而 Silverlight 提供了四種頂部蓋狀讓各位運用: 1 Flat 平狀 2 Round 圓形 3 Square 方形 4 Triangle 三角形 圖6-4 頂部蓋狀圖 而直線在起始點與結束點皆可以設定不同的頂部蓋狀,起始點是在 StrokeStartLineCap 屬性設定,而結束點是在 StrokeEndLineCap 屬性指定不 同的形狀;並且二者可以單獨使用,或者成對一起使用,系統並沒有限定其 使用的方式 。 範例 6-2 Line 直線之頂部蓋狀的設定 本範例將示範如何設定 Line 直線之頂部蓋狀,只要針對 StrokeStart LineCap 及 StrokeEndLineCap 兩個屬性指定不同的形狀即可。請參考 LineCap.html 與 LineCap.xaml 程式,以下為 LineCap.xaml 程式碼: 更多电子书教程下载请登陆http://down.zzbaike.com/ebook 本站提供的电子书教程均为网上搜集,如果该教程涉及或侵害到您的版权请联系我们。 6- Chapter 6 Silverlight 繪圖(Shape )之應用 完成後請執行 LineCap.html 程式,執行畫面如下圖。 圖6-5 直線之頂部蓋狀 StrokeStartLineCap="Triangle" StrokeEndLineCap="Round" 更多电子书教程下载请登陆http://down.zzbaike.com/ebook 本站提供的电子书教程均为网上搜集,如果该教程涉及或侵害到您的版权请联系我们。 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物件重要屬性說明 更多电子书教程下载请登陆http://down.zzbaike.com/ebook 本站提供的电子书教程均为网上搜集,如果该教程涉及或侵害到您的版权请联系我们。 6- Chapter 6 Silverlight 繪圖(Shape )之應用 範例 6-3 基本的矩形繪圖 本 範 例 將 示 範 如 何 利 用 Rectangle 物件繪製基本的矩形圖形,最基 本的只要設定寬度、長度與填滿色即可。請參考 RectangleBasic.html 與 RectangleBasic.xaml 程式,以下為 RectangleBasic.xaml 程式碼: 程式說明: Rectangle 的 Fill 屬性是指欲填入的色彩,Stroke 是指定外框線條的 顏 色, 而 StrokeThickness 則是指外框線條的粗細大小。完成後請執行 RectangleBasic.html 程式,執行畫面如下圖。 更多电子书教程下载请登陆http://down.zzbaike.com/ebook 本站提供的电子书教程均为网上搜集,如果该教程涉及或侵害到您的版权请联系我们。 6-10 完美入門 圖6-7 基本矩形 範例 6-4 繪製具有圓角弧度之矩型 事實上,在 Silverlight 的世界裡,系統所賦予矩形的功能並不是死 板板的,例如最常見的是您可能想將矩形四個直角變成具有弧度之圓角, 然 而 這 對 Rectangle 矩形功能而言再簡單不過了,只需要針對 RadiusX 及 RadiusY 這兩個屬性加以設定即可。請參考 RectangleRadius.html 與 RectangleRadius.xaml 程式,以下為 RectangleRadius.xaml 程式碼: Fill ="Orange" Stroke="Black" StrokeThickness="5" Stroke="Red" StrokeThickness="10" 更多电子书教程下载请登陆http://down.zzbaike.com/ebook 本站提供的电子书教程均为网上搜集,如果该教程涉及或侵害到您的版权请联系我们。 6-11 Chapter 6 Silverlight 繪圖(Shape )之應用 程式說明: 當您設定矩形之圓角時,RadiusX 及 RadiusY 二者的設定值並不需要是 對稱,若您給予二者不對稱值時,所產生出來之圓角形將會有不同之外貌。 完成後請執行 RectangleRadius.html 程式,執行畫面如下圖。 圖6-8 具有圓角之矩形 None RadiusX="10" RadiusY="30" RadiusX="10" RadiusY="10" RadiusX="50" RadiusY="25" 更多电子书教程下载请登陆http://down.zzbaike.com/ebook 本站提供的电子书教程均为网上搜集,如果该教程涉及或侵害到您的版权请联系我们。 6-12 完美入門 範例 6-5 Rectangle 矩形搭配漸層筆刷 而在上面的範例中,矩形的色彩是單一顏色的,但是 Silverlight 並 沒有對色彩的使用限制的這麼死,例如您可以搭配筆刷(Brush ) 之 功 能,就可以讓矩形產生漸層的變化。請參考 RectangleGradient.html 與 RectangleGradient.xaml 程式,以下為 RectangleGradient.xaml 程式碼: 更多电子书教程下载请登陆http://down.zzbaike.com/ebook 本站提供的电子书教程均为网上搜集,如果该教程涉及或侵害到您的版权请联系我们。 6-13 Chapter 6 Silverlight 繪圖(Shape )之應用 程式說明: 本範例利用到下一章的筆刷(Brush )功能,其中分別使用到了線性漸 層筆刷與放射狀漸層筆刷之功能,目的是為了逐步打破各位對矩形繪圖功能 簡單無趣之印象,事實上 Silverlight 的繪圖透過不同功能的搭配,可以營造 出令人著迷多變化的效果,在此您只需要執行程式進行體驗即可,筆刷的章 節會詳細解說其功能用法。完成後請執行 RectangleGradient.html 程式,執 行畫面如下圖 。 圖6-9 矩形漸層著色 範例 6-6 Rectangle 矩形搭配影像筆刷(ImageBrush ) 如果您以為矩形最多就是加上漸層色彩您就錯了,因為若搭配影像 筆刷,可以製造出具備影像之照片,可以應用在 Web 電 子 相 簿 之 中 。 請 參 考 RectangleImage.html 與 RectangleImage.xaml 程 式, 以 下 為 RectangleImage.xaml 程式碼: 線性漸層 放射狀漸層 更多电子书教程下载请登陆http://down.zzbaike.com/ebook 本站提供的电子书教程均为网上搜集,如果该教程涉及或侵害到您的版权请联系我们。 6-14 完美入門 程式說明: 關於影像筆刷之運用,在下一章有詳細的介紹。完成後請執行 RectangleImage.html 程式,執行畫面如下圖。 圖6-10 以矩形顯示影像照片 更多电子书教程下载请登陆http://down.zzbaike.com/ebook 本站提供的电子书教程均为网上搜集,如果该教程涉及或侵害到您的版权请联系我们。
还剩24页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 20 金币 [ 分享pdf获得金币 ] 0 人已下载

下载pdf

pdf贡献者

lubowen

贡献于2010-12-10

下载需要 20 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf