主講人：章立民 http://www.limingchstudio.com

1. 今日主題 • Silverlight 3.0 專題精研 - 探索「行為」、「動畫」與「狀態」 • 探索 Microsoft Silverlight Media Framework(SMF) • Expression Blend 3.0 超實用技巧總整理 主講人：章立民 http://www.limingchstudio.com

2. 章立民老師簡例 台灣微軟公司資深顧問與講師，從1992年開始。 資深電腦圖書作家，著作數目 80 本以上。 連續 7 年獲選微軟最有價值專家 MVP 。

3. 動畫的使用原則 • 自然地融入於介面中，具生動的外觀與質感。 • 天氣動畫 • 圖表動畫 • 翻頁動畫 • 控制項動畫

4. 動畫的形成原理 • 屬性動畫 • Opacity • OpacityMask • 2D 轉換 • 3D 轉換 • 色彩 • 像素著色器效果 • 視覺暫留。 • 甚麼屬性可以作為動畫處理對象？

5. 相依性屬性(Dependency Properties) • 動畫的目標屬性 • 資料繫結的目標屬性 • 樣式的設定對象 • 屬性變更回呼

6. 相依性屬性(Dependency Properties)

7. 自訂類別的相依性屬性 public static readonly DependencyProperty AquariumGraphicProperty = DependencyProperty.Register( "AquariumGraphic", typeof(Uri), typeof(AquariumObject), new PropertyMetadata(null, new PropertyChangedCallback(OnUriChanged) ) ); public Uri AquariumGraphic { get { return (Uri)GetValue(AquariumGraphicProperty); } set { SetValue(AquariumGraphicProperty, value); } }

8. 動畫構建模式 • 替固定的物件套用動畫：只需使用 Blend 3。 • 替固定的物件套用動畫並變更物件的來源：使用 Blend 3 製作動畫並使用程式碼來變更物件來源。 • 替不定數目的物件套用動畫：如果在設計階段無法確認物件的數目，必須在執行階段完全使用程式碼（C# 或 VB）來建立腳本與其中的動畫。 • 動畫涉及複雜的數學運算：使用程式碼（C# 或 VB）來建立動畫。並非一定使用 Storyboard 物件。

9. 使用 Expression Blend 3 建立動畫 • 動畫工作區。 • 腳本（Storyboard 物件） • 時間軸 • Timeline • 播放點。 • 主要畫面格。 • 針對主要畫面格進行加減速處理。 • 設定腳本的屬性。

10. Expression Blend 3 建立動畫實作 • 基本動畫實作 • 實作展示：BasicAnimation_Start • 以動畫顯示路徑或裁剪路徑上的點 • 實作一個愛心動畫 • 製作一個彈跳的球 • 實作展示： PracticeforBouncing.sln • 製作翻頁效果的相簿 • 實作展示： PracticeforPhotoPageTurn.sln • 實作展示： PracticeforIPageStyle.sln • 在「使用者控制項」中建立動畫時間軸以便反複使用 • 實作展示： PracticeforLoading.sln

11. 關於腳本您還必須知道 • 專案可以內含任意數目的腳本。 • 以資源的形式存放。 • 開啟、刪除與重新命名一個腳本。 • 複製與反轉腳本。 • 實作展示： PracticeforStoryboardReverse.sln

12. 執行 Silverlight 應用程式時的動畫播放與控制 • 使用程式碼（C# 或 VB）控制動畫的播放 • 呼叫特定 Storyboard 物件的 Begin、Stop、Pause、Seek 或 Resume 方法。 • 使用行為控制動畫的播放 • 實作展示： ControlStoryboardAction • Completed 事件 • 實作展示： PracticeforCompleted_002.sln • FillBehavior 屬性 • HoldEnd • Stop

13. 文字動畫的考量 • 縮放時該變更哪一個屬性 • 以文字的可讀性或動畫效能作為優先考量？ • 實作展示： PracticeforTextAnimation.sln • 可以使用程式控制方式靈活設定。 • 將 TextBlock 轉換成路徑。

14. 如何使用 WPFSLFx 2.0 的轉場特效 • 範例展示： • Demo_PhotoAlbum_006.xaml • Demo_PhotoAlbum_007.xaml • SLEffectHarness.aspx • 下載點：http://wpffx.codeplex.com/ • 使用方式

15. 使用 C# 程式碼建立腳本動畫 • 建立 Storyboard 物件。 • 設定 Storyboard 物件的相關屬性，並決定當 Completed 事件引發時是否要執行特定的事件處理常式。 • 依序建立各個要內含於 Storyboard 物件中的動畫物件，並且設定這些動畫物件的屬性。 • 呼叫 Storyboard 物件之 Children 屬性的 Add 方法將各個動畫物件加至腳本中。 • 呼叫 Storyboard 物件的 SetTarget方法來設定各個動畫物件的目標物件。 • 呼叫 Storyboard 物件的 SetTargetProperty方法來設定各個動畫物件的目標屬性。 • 設定目標屬性在特定時間點的目標值。 • 視需要撰寫 Completed 事件處理常式。 • 呼叫 Storyboard 物件的 Begin 方法來播放動畫。 實作展示： PracticeforAnimationByCode.sln

16. 動畫的類型

17. 動畫物件的類型

18. 主要畫面格動畫物件支援的插補方法

19. 線性插補(Linear Interpolation)

20. 離散插補 (Discrete Interpolation)

21. 實作計時器 DispatcherTimer myDispatcherTimer = new DispatcherTimer(); myDispatcherTimer.Interval = new TimeSpan(0, 0, 0, 0, 100); // 100 毫秒 myDispatcherTimer.Tick += new EventHandler(Each_Tick); myDispatcherTimer.Start(); … … public void Each_Tick(object o, EventArgs sender) { … }

22. 實作計時器 Storyboard _timer = new Storyboard(); _timer.Duration = new Duration(TimeSpan.FromMilliseconds(100)); _timer.Completed += new EventHandler(_timer_Completed); _ timer.Begin(); … private void _timer_Completed( object sender, EventArgs e) { … // 再次播放動畫來形成循環的效果。 _timer.Begin(); }

23. 實作計時器 <Storyboard x:Name="Timer" Duration="00:00:00.00"/>

24. 範本(控制項範本) • 樣式(Style)、範本(Template) 與面板(Skin) 的差異。 • 只有衍生自 Control 類別而擁有 Template 屬性的控制項才支援範本。UserControl 不支援範本。 • 範本的製作方式 • 由視覺化設計人員繪製外觀，再轉換成實質的範本並套用至 控制項。 • 藉由編輯控制項預設範本的複本來建立新的範本。 • 範本實作 • PracticeForRoundPurpleButtonStyle.sln • 自訂控制項實作 • PracticeForCustomControl.sln

25. 範本 • 狀態群組與狀態 • 控制項必定處於特定狀態群組中的某一個狀態。 • 同一狀態群組中的各個狀態是彼此互斥的。 • 自行建立狀態群組與狀態 • 如何切換至特定的狀態 • GoToStateAction 行為 • VisualStateManager.GoToState 方法

26. 進階動畫 • 使用三角學製作動畫。 • 在 2D 平面模擬出 3D 效果。 • 碰撞。 • 運動。 • 粒子。

27. 行為(Behavior) • Expression Blend 3 所提供。 • 不需要撰寫程式碼，就可以替應用程式加入互動功能。 • 將行為拖放至物件上，然後設定一些屬性即可。 • 讓開發人員與設計人員更緊密且順暢地協同運作。 • 同一物件可以套用多個行為。

28. 內建的行為 • ChangePropertyAction • ControlStoryboardAction • FluidMoveBehavior • GoToStateAction • HyperlinkAction • MouseDragElementBehavior • PlaySoundAction • RemoveElementAction

29. 內建的行為 • 實作展示：PracticeforBehavior.sln • Demo_Behaviors_001.xaml • PracticeforBehavior.sln • FluidMoveBehavior • 監控項目（或一組項目）的版面配置變更，並在需要時將項目平順地移至新位置的行為。 • Demo_Behaviors_002.xaml • Demo_Behaviors_003.xaml • SL-FluidMoveChildren.html

30. 觸發程序類型 • EventTrigger • TimerTrigger • KeyTrigger • StoryboardCompletedTrigger

31. 使用程式碼套用行為 using Microsoft.Expression.Interactivity.Layout; … MouseDragElementBehavior dragBehavior = new MouseDragElementBehavior(); dragBehavior.Attach(Image3); • 務必加入組件參考並匯入適當的命名空間 • Microsoft.Expression.Interactions.dll • System.Windows.Interactivity.dll

32. 建立自訂的行為 • 行為：衍生自 Behavior<T>類別 • 觸發程序：衍生自 TriggerBase<T>類別 • 動作：衍生自 TriggerAction<T>類別 • 如果動作要以所附加之項目以外的項目作為處理對象，請衍生自 TargetedTriggerAction<T>類別。

33. 建立自訂的行為 • 範例展示。 • 自訂行為範例探索。 • BeeHive 自訂行為實作。 • PhysicsHelper 自訂行為展示。

34. Silverlight Media Framework(SMF) • Microsoft Silverlight Media Framework v1.1 with Progressive Download Support • 建立一個穩固、延展性佳且可自訂的視訊播放器來播放IIS Smooth Streaming 。 • 植基於 Smooth Streaming Player Development Kit的核心功能。 • 範例 • http://www.iis.net/media/experiencesmoothstreaming • http://localhost/BigBuckBunny/Default.html • 案例驗證 • Wimbledon • Sunday Night Football on NBCSports • UEFA Super Cup on Canal+ • Roland Garros • Tour de France on France Télévisions

35. SMF 使用方式 • 自 http://smf.codeplex.com/下載 Silverlight Media Framework。 • 下載IIS Smooth Streaming Player Development Kit。 • 建立 Silverlight 應用程式專案並匯入相關的 .dll檔。 • 建立 Player 控制項。 • 新增 MediaElement 。 • 設定 SmoothStreamingSource 屬性。 視訊串流必須先使用 Expression Encoder 3 編碼並部署至已安裝 IIS Media Services 3.0 的 IIS 7.0 上。

36. 除了視訊串流之外 • SMF 亦支援邊下載邊播。 • 使用 Source 屬性指定視訊來源。 • 務必使用絕對路徑。

37. 所需的 DLL 檔 • Microsoft.SilverlightMediaFramework.dll- 內含一些有用的公用程式類別。 • Microsoft.SilverlightMediaFramework.Player.dll- 內含視訊播放器與相關控制像和視覺化項目。 • Microsoft.SilverlightMediaFramework.Data.dll- 內含用來簡化外部資料提取作業的公用程式類別。 • Microsoft.SilverlightMediaFramework.Logging.dll- 內含一個共用的訊息架構。 • Microsoft.Web.Media.SmoothStreaming.dll -來自 IIS Smooth Streaming Player Development Kit 。

38. SMF 架構圖

39. SMF 實作 • 我需要匯入所有的 DLL 檔嗎？ • 我可以自訂視訊播放介面嗎？ • 範例：使用樣式與範本自訂視訊播放介面。 • 我可以擴充視訊播放介面嗎？ • 範例：加入額外的按鈕。 • 範例：於時間拉桿上加入標記。 • 範例：顯示自訂的位元速率錶來呈現目前所播放的視訊品質。 • 範例：移動捲動方塊檢視視訊內容。 • 我可以自行建立視訊播放介面嗎？

40. 如何使用 Settings API • 用途：將應用程式設定儲存在 Web 伺服器上，於執行階段存取並藉此更新您的應用程式。 • 務必參考組件 Microsoft.SilverlightMediaFramework.Data.dll • 不需要替 XAML 介面中替CoreSmoothStreamingMediaElement設定視訊串流來源。 • 於網站中建立一個資料夾來存放 XML 設定檔。 • 建立一個繼承自 SettingsBase 的類別。 • 替 XAML 介面程式碼後置檔撰寫程式碼，以非同步方式提取設定檔內容。

41. 如何使用 Logging API • 用途：記錄應用程式執行過程，以茲後續分析之用。例如：記錄事件。 • 務必參考組件Microsoft.SilverlightMediaFramework.Logging.dll

42. Expression Blend 3.0 超實用技巧總整理 • 於VS 中快速將一個 .xaml檔開啟於 Expression Blend 中。 • 大小 • 如何快速將 Width 與 Height 屬性設定成 Auto。 • 瞭解 Width 與 Height 屬性之預設值 Auto 所代表的意義。 • 快速鍵 • Tab • Space+滑鼠拖曳 • 選取範圍最適化 • 變更版面配置類型 • 群組置入 • 快速加框。 • 實作展示： PracticeforGroupObject.sln

43. Expression Blend 3.0 超實用技巧總整理 • Grid • 新增列。 • 新增欄。 • 移除列。 • 移除欄。 • 高度與寬度的單位： • Auto 表示高度或寬度由位於儲存格中之 XAML 物件的大小來決定。 • Pixel 表示以像素為單位。 • 星號（*） 表示等比例使用剩餘的空間。您還可以在星號前面加上數字（例如：2*），以便表示要佔用剩餘空間的加權比重。 • 位於儲存格中的XAML物件可以橫跨列與欄，欲達此目的，請設定 RowSpan與 ColumnSpan附加屬性。 • ShowGridLines屬性。 • 試著繪製巢狀化 Grid 。

44. Expression Blend 3.0 超實用技巧總整理 • 快速複製 • 圖案 • Ellipse（橢圓形） • Rectangle（矩形） • Line（直線） • Polyline（多線段） • Polygon（多邊形） • Path（路徑） • 重要輔助按鍵 • 持續按著Shift鍵：繪製圓形與正方形 • 持續按著Alt鍵：由中心點往外擴散 • 調整矩形的圓角：當指標變成圓角半徑控點 時，開始拖曳控點即可。此外，您只要在拖曳圓角半徑控點 時按住 SHIFT 鍵，就可以單獨調整圓角半 徑 RadiusX 或 RadiusY 。

45. Expression Blend 3.0 超實用技巧總整理 • 路徑 • 繪製由多條直線組成的路徑。 • 如何結束繪製。 • 繪製由水平線、垂直線與45度折線組成的非封閉路徑。 • 繪製曲線組成的路徑。 • 實作展示： PracticeforPath.sln • 實作展示：繪製一個愛心 • 取消屬性設定，快速將屬性重新設定成預設值。 • 色彩  • 輸入R、G、B與A值。 • 輸入十六進位值。 • 使用色彩滴管。

46. Expression Blend 3.0 超實用技巧總整理 • 單色筆刷 • 漸層筆刷 • 線性漸層 • 放射漸層 • 如何加入漸層停駐點 • 如何移除漸層停駐點 • 反轉漸層停駐點 • 如何選取上一個或下一個漸層停駐點 • 如何使用漸層工具 • 如何將筆刷儲存成資源 • 如何使用筆刷資源 • 透過進階屬性選項來使用 • 透過筆刷資源頁面來使用 • 從資源面板中直接拖放至畫板中的物件

47. Expression Blend 3.0 超實用技巧總整理 • 如何變更筆刷資源的顏色 • 在屬性面板中操作 • 在資源面板中操作 • 拼貼筆刷（影像筆刷） • 快速製作影像筆刷資源 • 視訊筆刷 • 使用 Expression Blend 3 來製作視訊筆刷資源 • 使用 Expression Blend 3 來套用視訊筆刷資源 • 實作展示： PracticeforVideoBrush.sln • 轉換 • 以每次增加 15 度的方式來旋轉物件。 • 套用像素著色器 • 實作展示：如何使用Windows Presentation Foundation Pixel Shader Effects Library

48. Expression Blend 3.0 超實用技巧總整理 • 文字 • 建立多行文字並讓單一或多個文字個別格式化。 • 如何讓 TextBlock 控制項進入編輯模式。 • 字型管理員。 • 如何將 TextBlock 控制項轉換成路徑。 • 如何快速找到所需的控制項。 • 按鈕 • 快速編輯按鈕文字與多行文字。 • 快速建立多樣化內容的按鈕。 • 綜合運用上述兩項技巧。 • 實作展示： PracticeforContentControl.sln • ListBox • 快速新增 ListBoxItem 。 • 快速建立多樣化內容的 ListBox 。 • 實作展示： PracticeforHorizontalListBox.sln

49. Expression Blend 3.0 超實用技巧總整理 • 範例資料 • 定義新的範例資料。 實作展示 • 從 XML 匯入範例資料。 實作展示 • 變更套用範例資料之 ListBox 的版面。實作展示 • ItemTemplate • ItemContainerStyle • ItemsPanel • 變更套用範例資料之 DataGrid 的版面。 實作展示 • CellStyle • ColumnHeaderStyle • DragIndicatorStyle • DropLocationIndicatorStyle • RowDetailsTemplate • RowHeaderStyle • RowStyle • 如何替 DataGrid 新增 DataGridTemplateColumn 並自訂其 CellTemplate

50. Expression Blend 3.0 超實用技巧總整理 • 製作選項水平排列的 ListBox。 • 製作以 WrapPanel 作為 ItemsPanel 的 ListBox • 範例： Demo_PhotoAlbum_014.xaml • 實作展示：PracticeforWrapPanelListBox.sln • 製作圓盤式的 ListBox • 範例：Demo_PhotoAlbum_012.xaml • 實作展示：04 • 製作斜面式的 ListBox • 範例： Demo_PhotoAlbum_013.xaml • 實作展示：PracticeforCollectionFlow.sln