Silverlight權威講座    目錄

1 Silverlight RIA 的故事                                            1-1

1-1  微軟失落的技術拼圖 RIA 解決方案                       1-2

1-2  RIA 真的有需要???                                                         1-5

1-3  Silverlight 技術架構                                                         1-6

1-4與現有 ASP.NET(PHPJSP) 技術的整合                           1-9

1-5  本書中的 RIA 範例                                                         1-11

1-5-1  RIA 名片夾                                                                1-11

1-5-2  電子簽核流程設計界面                                            1-13

1-5-3  天瓏查榜系統                                                            1-14

1-5-4  其他範例                                                                    1-16

 

2 Silverlight 觀念解剖與開發工具介紹                          2-1

2-1  解剖 Silverlight 應用程式架構                                       2-2

2-1-1  Silverlight 檔案架構 - .xaml 檔案                          2-2

2-1-2  Silverlight 檔案架構 - .xaml.js 檔案                       2-4

2-1-3  重要的 Silverlight 開發觀念                                   2-8

2-2  Silverlight 開發工具介紹                                                 2-10

2-2-1  開發前的基本知識                                                    2-10

2-2-3  Expression Blend 2                                                    2-17

2-2-4  混用 Blend2VS2005、與 Futures Release          2-20

2-2-5  Microsoft ASP.NET Futures Release (July 2007)        2-23

2-2-6  ASP.NET 頁面上加入 Silverlight 功能          2-28

2-3  嘗試開發第一個 Silverlight 程式                                   2-29

2-3-1  動手前的準備                                                            2-29

2-3-2  範例成品                                                                    2-30

2-3-3  建立 Xaml 檔案                                                       2-31

2-3-4  加入事件功能                                                            2-41

2-3-5 小結                                                                              2-45

 

3 Xaml 指令碼與 Silverlight 基礎繪圖物件                  3-1

3-1  Xaml 指令碼與 Silverlight 元素                                    3-2

3-1-1  Xaml 指令碼的架構                                                 3-2

3-1-2  Canvas 開始                                                                3-6

3-1-3  Xaml 的擴展屬性語法                                             3-9

3-1-4  Xaml 指令碼中的事件指定                                     3-12

3-2  Silverlight 中的基本圖形指令                                         3-14

3-2-1  Line 物件                                                                   3-15

3-2-2  Rectangle 物件                                                         3-18

3-2-3  Ellipse 物件                                                               3-21

3-2-4  Polygon Polyline 物件                                        3-22

3-2-5  Path 物件與 Markup 語法                                      3-24

3-3  Path Geometry 物件                                                 3-27

3-3-1  Geometry 基本觀念                                                 3-27

3-3-2  EllipseGeometry 物件                                               3-28

3-3-3  RectangleGeometry 物件                                         3-29

3-3-4  GeometryGroup 結合多個 Geometry              3-30

3-3-5  PathGeometry                                                           3-33

3-4  筆刷(Brush)與填滿樣式                                                   3-35

3-4-1  Silverlight 的色彩表示法                                         3-35

3-4-2  Silverlight 的筆刷上色功能                                     3-37

3-4-3  SolidColorBrush 物件                                                3-37

3-4-4  LinearGradientBrush 物件                                        3-38

3-4-5  RadialGradientBrush 物件                                                3-40

3-4-6  ImageBrush 物件                                                      3-41

3-4-7  VideoBrush 物件                                                       3-43

3-5  圖文輸出                                                                           3-45

3-5-1  Silverlight 當中顯示文字                                 3-45

3-5-2  中文字型的顯示問題                                             3-46

3-5-3  Silverlight 當中顯示圖形                                   3-47

3-6  小結                                                                                   3-48

 

4 Silverlight 的進階繪圖、動畫功能                              4-1

4-1  Silverlight 的變形技術                                                     4-2

4-1-1  RenderTransform                                                      4-2

4-1-2  ScaleTransform                                                                 4-3

4-1-3  RotateTransform                                                       4-5

4-1-4  TranslateTransform                                                   4-6

4-1-5  SkewTransform                                                         4-7

4-1-6  變形機制與 JavaScript 的配合                            4-9

4-2  Silverlight 中的 Storyboard 動畫功能                           4-10

4-2-1  關鍵影格動畫功能                                                    4-11

4-2-2  Blend 2 設計動畫                                               4-15

4-2-3  From/To/By 動畫功能                                              4-18

4-2-4  AutoReverse RepeatBehavior 屬性                   4-20

4-2-6  將動畫設為資源                                                        4-21

4-3  Silverlight 的影音輸出功能                                             4-23

4-3-1  關於 MediaElement                                                 4-23

4-3-2  以媒體作為筆刷                                                        4-24

4-3-3  整合範例:媒體播放器                                         4-25

4-4  重要的特效屬性                                                               4-30

4-4-1  OpacityMask 設計半透明遮罩                               4-30

4-4-2  Clip 設計剪裁                                                     4-34

4-4-3  倒影效果                                                                   4-36

4-4-4  小結                                                                            4-38

4-5  關於 Xaml 碼的撰寫                                                       4-39

 

5 開發 Silverlight 動態網頁應用程式                                5-1

5-1  Silverlight 物件模型                                                         5-2

5-1-1  何謂 Silverlight Object Model                                         5-2

5-1-2  Silverlight 元素的事件機制與 JavaScript              5-3

5-1-3  findName 方法取得物件                                    5-6

5-1-4  Silverlight 元素的屬性、事件、方法                     5-7

5-1-5  抓取頁面中的 Silverlight Host(Silverlight Plug-In)         5-8

5-2  JavaScript 動態產生、移除 xaml 元素                   5-13

5-2-1  利用 createFromXaml 動態建立 Silverlight 元素        5-13

5-2-2  動態清空畫布(Canvas)內容                                      5-15

5-3  JavaScript 調整 xaml 元素屬性                               5-16

5-3-1  Object.Property 設定屬性                                  5-16

5-3-3  Object[PropertyName] 設定屬性                       5-17

5-4  Silverlight 的事件機制                                                     5-18

5-4-1  Silverlight 的滑鼠事件                                             5-18

5-4-2  Silverlight 的鍵盤事件                                             5-20

5-4-3  動態委派事件處理程序                                            5-21

5-4-4  範例:實作拖曳功能                                             5-23

5-4-5  範例:實作動態按鈕功能                                     5-26

5-5  JavaScript 動態播放 StoryBoard 動畫                     5-30

5-5-1  以程式動態播放 Resource 動畫                             5-30

5-5-2  StoryBoard 的常用方法                                            5-32

5-6  JavaScript 動態控制 MediaElement 影音播放       5-33

5-6-1  以程式動態放影音                                                    5-33

5-6-2  MediaElement 當作特效音樂播放器                5-38

5-6-3  整合範例:媒體播放器加捲軸                            5-41

5-7  Silverlight 的全螢幕支援                                                 5-45

5-8  整合範例:以 Silverlight 設計射擊遊戲                   5-46

 

6 ASP.NET Silverlight 的超完美結合                     6-1

6-1  ASP.NET Silverlight                                                     6-2

6-1-1  關於 ASP.NET Future Release                                  6-2

6-1-2  ASP.NET Future Release ASP.NET AJAX               6-3

6-1-3  ASP.NET 開發人員的 Silverlight 應用策略            6-4

6-2  Xaml 控制項的重要功能                                                 6-5

6-2-1  Xaml 控制項的使用方式                                         6-5

6-2-2  動態產生 Xaml ?                                               6-6

6-2-3  inline Xaml 功能                                                      6-7

6-2-4  inline Xaml 功能動態產生 xaml                        6-9

6-2-5  Scripts 屬性                                                               6-16

6-2-6  WindowsLess 屬性                                                    6-17

6-2-7  OnClientXamlLoaded OnClientXamlError 屬性        6-20

6-2-8  動態註冊 JavaScript                                              6-22

6-3  使用 Media 控制項                                                                6-23

6-3-1  透過 Media 控制項撥放影片                                 6-23

6-3-2  設定播放章節                                                            6-25

6-3-3  如何透過 JavaScript 控制 Media 控制項             6-27

6-3-4  關於 Media 控制項                                                 6-30

6-4  透過 UserControl 包裝 Silverlight                                6-30

6-4-1  實際使用                                                                    6-30

6-4-2  建立 UserControl                                                     6-33

6-4-3  範例實作: AdBanner UserControl                     6-34

6-4-4  範例實作:加上 Banners 屬性                            6-37

6-4-5  範例實作:動態產生 JavaScript Xaml                6-40

6-4-6  使用展示                                                                    6-44

6-5 ASP.NET Silverlight 真正的完美結合                           6-47

6-5-1  透過 Web Control 封裝 Silverlight 功能               6-48

6-5-1  如果我不會 AJAX, JavaScript 又不熟也能用嗎?      6-48

6-5-2  輕鬆建立 RIA 的可能                                              6-53

 

7 ASP.NET AJAX Silverlight 的超完美整合            7-1

7-1  ASP.NET 開發人員期待已久的完美介面                        7-2

7-1-1  ASP.NET 開發人員的夢想將要實現                         7-2

7-1-2  Silverlight ASP.NET 真正的完美結合                        7-2

7-1-3  只要我能動態 Render JavaScript                            7-4

7-2  ScriptManger 物件                                                           7-5

7-2-1  RegisterStartupScript 方法                                    7-5

7-2-2  以非同步技術為基礎                                                7-10

7-2-3  RIA 鋪路                                                              7-11

7-3 ASP.NET 動態控制 Silverlight                                  7-12

7-3-1  ASP.NET 動態產生 Silverlight 元素                  7-12

7-3-2  ASP.NET 動態控制 Silverlight 元素的屬性      7-16

7-3-3  ASP.NET 動態播放 Silverlight 動畫                  7-19

7-3-4  ASP.NET 動態控制 MediaElement                    7-26

7-3-5  ASP.NET 動態指派事件處理函式                       7-29

7-3-6  小結                                                                            7-33

7-4  讓後端 ASP.NET 得知 Silverlight 發生的事件              7-34

7-4-1  目的                                                                            7-34

7-4-2  可使用的方式                                                            7-36

7-4-3  範例實作:以 GetPostBackEventReference 觸發非同步 Postback                                                                                                      7-37

7-4-4  範例實作:以非同步 Web Services 呼叫來完成後端資料庫更新                                                                                                        7-42

7-4-5  小結                                                                            7-49

 

8 DynamicXaml 控制項                                                  8-1

8-1  關於 DynamicXaml 控制項                                            8-2

8-1-1  緣起                                                                            8-2

8-1-2  控制項使用方式                                                        8-2

8-2  BlankCanvas 屬性                                                            8-6

8-3  動態建立物件與清空 Canvas                                        8-8

8-4  修改物件屬性                                                                   8-12

8-5  動態播放動畫                                                                   8-13

8-6  動態撥放影片、音效                                                     8-15

8-7  ASP.NET 處理 Silverlight 點選事件                              8-18

8-8  自動拖曳功能                                                                 8-22

8-9  利用 Silverlight 設計 RIA 的注意事項                              8-24

8-9-1  Silverlight 中文字動態顯示的解決方案                     8-25

8-9-2  Silverlight 當中的文字輸入解決方案                  8-28

8-9-3  輸入的文字寫入資料庫                                     8-30

8-9-4  按鈕與音效播放                                                      8-31

8-10  ASP.NET 開發人員的未來將有無限的可能                  8-32

 

9 範例實作 以資料庫內容動態繪製圖表                9-1

9-1  功能展示                                                                           9-2

9-1-1  關於動態繪圖功能                                                    9-2

9-1-2  展示畫面                                                                    9-3

9-2  功能實作                                                                           9-4

9-2-1  抓取資料庫繪製圖表                                                9-4

9-2-2  動態繪製圖表功能                                                    9-6

 

10   範例實作 ASP.NET 整合的電子相簿           10-1

10-1  功能展示                                                                         10-2

10-2  功能實作                                                                         10-5

10-2-1  頁面剖析                                                                  10-5

10-2-2  動態載入相片                                                          10-6

10-2-3  縮圖凸顯效果                                                          10-9

10-2-4  顯示大圖                                                                  10-10

10-2-5  巡覽列的左右鍵                                                      10-11

10-2-6  淡入淡出動畫                                                          10-13

10-3  小結                                                                                 10-14

 

11  範例實作 數位儀表板                                         11-1

11-1  功能展示                                                                         11-2

11-2  功能實作                                                                         11-3

11-2-1  Xaml 碼架構                                                           11-3

11-2-2  如何移動指針                                                          11-5

11-2-3  以非同步方式移動指針                                          11-7

11-2-4  偵測資料庫中的數值自動調整指針                      11-8

11-3  小結                                                                                 11-10

 

12   範例實作 資料庫巡覽功能                                12-1

12-1  功能展示                                                                         12-2

12-2  功能實作                                                                         12-3

 

13   RIA 範例實作 Silverlight 名片簿                      13-1

13-1  功能展示                                                                         13-2

13-1-1  說明                                                                          13-2

13-1-2  功能展示                                                                  13-3

13-2  功能實作                                                                         13-7

13-2-1  Xaml 檔案內容                                                       13-7

13-2-2  開場動畫與動畫 Resource                                    13-8

13-2-3  資料輸入與查詢                                                      13-9

13-2-4  顯示符合條件的資料                                              13-12

13-2-5  點選資料                                                                  13-13

13-2-6  顯示詳細資料                                                          13-14

13-2-7  發送簡訊                                                                  13-16

13-3  功能再加強                                                                     13-18

 

14   RIA 範例實作 –天瓏查榜系統                               14-1

14-1  功能展示                                                                         14-2

14-2  功能實作                                                                         14-4

14-2-1  Xaml 檔案中的動畫機制                                       14-4

14-2-2  讀取書籍排行資料                                                  14-5

14-2-3  顯示詳細書籍資料                                                  14-7

14-3  功能再加強                                                                     14-10

 

15 RIA 範例實作 –電子簽核流程設計界面                 15-1

15-1  功能展示                                                                         15-2

15-1-1  說明                                                                              15-2

15-1-2  功能展示                                                                      15-2

15-2  功能實作                                                                         15-6

15-2-1  透過 DynamicXaml 控制項設定拖曳行為           15-6

15-2-2  流程資料結構                                                          15-10

15-2-3  重新繪製流程                                                          15-11

15-2-4  匯出流程                                                                  15-13

15-3  功能再加強                                                                     15-14

 

附錄ADynamicXaml 控制項成員列表                                                A-1

AddHandler 方法                                                                       A-2

AddOnMouseLeftButton DownEventHandler 方法                   A-2

BlankCanvas 屬性                                                                      A-3

ClearCanvas 方法                                                                      A-3

DoAsnycJavaScript 方法                                                            A-3

DrawPathString 方法                                                                 A-3

DrawString 方法                                                                                A-4

Ellipse 方法                                                                                A-5

Line 方法                                                                                   A-6

OnDragDrop 方法                                                                     A-7

OnMouseLeftButtonDown 方法                                                A-7

PauseMedia 方法                                                                      A-8

Picture 方法                                                                               A-8

PlayAnimation 方法                                                                   A-9

PlayMedia 方法                                                                         A-9

PositionMedia 方法                                                                   A-9

Rectangle 方法                                                                          A-10

ResetAnimation 方法                                                                        A-11

SetProperty 方法                                                                       A-11

StopMedia 方法                                                                         A-11

SupportDragDrop 方法                                                              A-12

UpdatePanelID 屬性                                                                  A-12

XamlCode 屬性                                                                          A-12