Silverlight 新手上路、現學現用

2. Silverlight新手上路、現學現用 主講人：章立民 WEB001 章立民研究室繁體部落格–http://blog.xuite.net/alwaysfuturevision/liminzhang

3. 主講人 章立民簡介 章立民研究室技術總監。 15 年資歷的微軟資深講師與顧問，5 度獲選微軟最有價值專家。 18 年資訊圖書撰寫經歷。 經濟部資訊專業人員鑑定計畫命（審）題委員。 電腦技能基金會資料庫應用類命題委員。 職訓局 Visual Basic 能力本位教材編撰委員。 工研院製造資訊部顧問、捷和建設資訊部顧問、資誠會計師事務所資訊系統服務部顧問、磐天科技總經理……等等

4. Silverlight 架構 IE、 Firefox 或 Safari • 呈現機制 • JavaScript 存取機制 • 下載機制 • … .NET Framework 3.0 Extensible Application Markup Language Blend 2 VS 2005 預先存檔 .xaml • 文字 • 影像(PNG/JPG) • 向量式圖形(Path…) • 多媒體(WMV/MP3/WMA ) • 動畫系統 • 轉換 動態產生

5. 初始化與建立 Silverlight 外掛程式

6. 初始化與建立 Silverlight 外掛程式

7. 初始化與建立 Silverlight 外掛程式 數目?? 一定要用 div 嗎??

8. 初始化與建立 Silverlight 外掛程式 是否允許執行階段變更

9. 初始化與建立 Silverlight 外掛程式

10. 初始化與建立 Silverlight 外掛程式

11. 初始化與建立 Silverlight 外掛程式

12. 解決 100% 無法於 FireFox 中運作的問題

13. Silverlight.js 與本地化版本

14. XAML 物件

15. Canvas 的主要用途 － 自訂控制項

16. 如何設計與編寫 XAML

17. 如何設計與編寫 XAML

18. 動畫的引發時機 － 載入後立刻播放 DoubleAnimation ColorAnimation PointAnimation 數目? DoubleAnimationUsingKeyFrames ColorAnimationUsingKeyFrames PointAnimationUsingKeyFrames

19. 動畫的引發時機 － 互動式控制 • 務必指派一個名稱給您所要控制的 Storyboard。 • 呼叫 Storyboard 的 begin、stop、pause 、resume 與 seek 方法來達到互動式控制的目的。 • 將 Storyboard 宣告成一個資源而不要在 EventTrigger 當中宣告它。

20. 動畫的引發時機 － 互動式控制

21. 善用 Expression Blend 2 設計動畫 • 現場實作 • 展示成品 • Emmys • 球體掉落 • 填滿瓶子 • 快速製作移入移出按鈕

22. 如何取得 Silverlight 外掛程式的參考 • 於 Silverlight 外掛程式的 OnLoad 事件處理常式中

23. 如何取得 Silverlight 外掛程式的參考 • 於任何位置：// 取得 Silverlight 外掛程式的參考。var PieChartPlugIn =document.getElementById("SilverlightPlugInPieChart"); • 於 XAML 物件的事件處理常式中：function onStopButtonMouseLeftButtonUp(sender, mouseEventArgs){ var MediaElement1 =sender.getHost().content.findName("MediaElement1"); MediaElement1.stop();}

24. 如何於執行階段存取 XAML • 如何搜尋一個 XAML 物件 • 使用名稱（findName方法）var rootElement = plugIn.content.findName("rootCanvas")var rootElement = sender.findName("rootCanvas") • 如何列舉與存取集合中的物件。 • 使用索引編號（getItem方法） • 使用集合式的列舉（Children屬性） • 如何取得 XAML 物件的屬性值。 • 如何設定 XAML 物件的屬性。

25. ASP.NET AJAX + Silverlight 的搜尋介面

26. ASP.NET AJAX + Silverlight 的搜尋介面

27. 如何交疊顯示一般控制項與 XAML 務必設定 isWindowless: "True"

28. 交疊顯示一般控制項與多個外掛程式

29. 如何動態新增 XAML 物件 • 構建 XAML • 使用 JavaScript • 使用伺服器端程式碼 • 使用 Downloader 物件 • 建立 XAML 物件的執行個體 • 將 XAML 物件新增至子物件集合中

30. 使用 JavaScript 構建 XAML

31. 使用 JavaScript 構建 XAML

32. 使用 JavaScript 構建 XAML

33. 使用伺服器端程式碼動態構建 XAML

34. 活用 Downloader 物件 非同步方式下載各類資料 XAML 內容（.xaml） JavaScript 內容（.js） 字型檔（.ttf） 影像檔（.png 或 .jpg） 多媒體檔案（.wmv、wma…等） 僅在確實需要時才下載資料 不需要重新整理整個網頁即可呈現下載內容 允許將下載內容封裝成 .zip 檔 替單一 XAML 建立多個執行個體－重要!! 完整的配套事件 Completed 事件 DownloadProgressChanged 事件

35. 動態下載 XAML 實作

36. 動態下載 XAML 實作

37. 替單一 XAML 建立多個執行個體

38. 替單一 XAML 建立多個執行個體

39. XAML 物件的事件繫結方式 宣告式繫結 • JavaScript 動態繫結

40. 滑鼠拖放操作 於 MouseLeftButtonDown 事件處理常式中呼叫被拖曳物件的 captureMouse方法。 於 MouseMove 事件處理常式中移動拖曳的物件。 於 MouseLeftButtonUp 事件處理常式中呼叫物件的 releaseMouseCapture方法 。

41. 中文字顯示技巧

42. 中文字顯示技巧 TextBlock 物件使用 FontFamily 屬性來設定字型清單

43. 使用 Path 物件顯示中文字 不需要額外下載中文字型。

44. 非同步呼叫 Web 服務來產生中文字 • Expression Blend 2 將 TextBlock 物件轉換成 Path 物件的實際技術內涵： • 呼叫內含在 .Net Framework 3.0 中，屬於 Windows Presentation Foundation（WPF）的 API 進行轉換。 • 作法 • 撰寫 Web 服務來產生並傳回中文字的路徑描繪字串。 • 結合 ASP.NET AJAX，由前端 JavaScript 非同步呼叫 Web 服務並將路徑描繪字串指派給對應 Path 物件的 Data 屬性。 • Web 伺服器務必安裝 WPF。

45. 非同步呼叫 Web 服務來產生中文字

46. 非同步呼叫 Web 服務來產生中文字

47. 非同步呼叫 Web 服務來產生中文字

48. 中文字顯示技巧 使用 Path 物件顯示中文字 將文字用 Expression Blend 轉成 Path 結合 WPF 與 AJAX 在執行階段將文字轉換成 Path 使用 TextBlock 物件顯示中文字 下載完整的中文字型檔，然後在 TextBlock 中顯示中文字。 僅下載內含所需文字的中文字型檔，然後在 TextBlock 中顯示中文字，亦即使用 ODTTF（Obfuscated TTF）字型檔。 使用 Glyphs 物件顯示中文字 下載完整的中文字型檔，然後在 Glyphs 中顯示中文字 不需要用到 Downloader 物件 字型檔不再侷限於 .OTF／ .TTF檔，可以是 .TTC 檔，甚至連 .ODTTF 檔也行。 僅下載內含所需文字的中文字型檔，然後在 Glyphs 中顯示中文字。

49. 下載完整的中文字型檔，然後在 TextBlock 中顯示中文字

50. 使用 Glyphs 物件顯示中文字