1 / 50

主題： Silverlight 2.0 完全新手學堂， 入門必學十大招

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

chill
Download Presentation

主題： Silverlight 2.0 完全新手學堂， 入門必學十大招

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 主題：Silverlight 2.0 完全新手學堂，入門必學十大招 主講人：章立民

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

  3. 議程 • VS 2008+Blend2 雙劍合壁，威力無窮。 • 活用跳脫傳統框架控制項，應用範圍更寬廣。 • 動畫變化多，視覺化設計與程式開發兩相宜。 • 轉換在手，介面變化無窮。 • 掌握樣式與範本，創意無限延伸。 • 強大多媒體功能，符合潮流愛不釋手。 • WebClient 物件，讓外部檔案垂手可得。 • 整合 WCF 服務，資料存取無疆界。 • 整合 ADO.NET 資料服務，資料異動好輕鬆。 • 應用程式有效分割，效能提升彈性高。

  4. 為什麼要使用 Silverlight 2.0 • 質感 • 高度的互動性 • 強大的多媒體能力 • 技術的延續性與包容性 • 實作 .NET Framework 的一項跨平台與跨瀏覽器技術，讓您能夠建立具備豐富多媒體效果之互動式介面的下一世代 Web 應用程式，也就是所謂的豐富型互動式應用程式（RIA，Rich Interactive Application）。 • .NET Framework Class Library for Silverlight

  5. Silverlight 2.0 應用程式的執行模式

  6. Silverlight 2.0 應用程式的執行模式 • 填滿整個螢幕畫面或佔用某個區塊

  7. Silverlight 2.0 應用程式的執行模式

  8. Silverlight 2.0 應用程式的執行模式 • 大小不超過 5MB • 僅需部署一次 • 自動更新版本

  9. Silverlight 2.0 開發平台的架構

  10. Silverlight 2.0 的開發架構

  11. VS 2008+Blend2 雙劍合壁，威力無窮

  12. Border Button Calendar Canvas CheckBox ComboBox ContentControl DataGrid DatePicker Grid GridSplitter HyperlinkButton Image InkPresenter ListBox MediaElement MultiScaleImage PasswordBox Popup ProgressBar RadioButton RepeatButton ScrollBar ScrollViewer Slider StackPanel TabControl TextBlock TextBox ToolTip Silverlight 2.0 內建的控制項

  13. AutoCompleteBox DockPanel HeaderedContentControl HeaderedItemsControl Label NumericUpDown TreeView WrapPanel Expander ImplicitStyleManager Viewbox Charting Silverlight Toolkit 提供的控制項

  14. 首頁範例 控制項的重要特性 • 內容控制項 - 能夠顯示單一項目(型別：Object)的控制項。

  15. 內容控制項 – 注意型別

  16. 內容控制項

  17. 控制項的重要特性 • ListBox 與 ComboBox 控制項 • 允許直接使用 FrameworkElement 物件做為選項 – ListBoxItem 是一個內容控制項。 • 允許使用範本定義版面 • DataGrid 控制項 • 檢視與編輯狀態的範本

  18. 動畫特效 • 藉由變更屬性值來製作動畫 • 善用 Blend 2 設計動畫 • 採用 “動畫工作區” 版面配置。 • 建立一個腳本(Storyboard 物件)。 • 針對一或多個物件設定在不同時間點的屬性變化。 • 設定腳本的 AutoReverse 與 RepeatBehavior 屬性。 • 反覆步驟 2 – 4 的操作。 • 互動式控制 - 呼叫 Storyboard 物件的 Begin、Stop、Pause 、Resume 與 Seek 方法來達到互動式控制的目的。

  19. 轉換特效 • 對物件套用一個暫時性的效果 • 可以在 Silverlight 中使用的效果有： • 平移（TranslateTransform） • 旋轉（RotateTransform） • 縮放（ScaleTransform） • 翻轉（Flip） • 倒影 • 歪斜（SkewTransform） • 以中心點（Center Point）來定義開始轉換的起點，但平移例外。

  20. 轉換特效 • 其實，我們常常忘了，轉換也可以套用至控制項 – 水平捲動清單方塊….

  21. 只靠設計工具不足以成大事善用 VB 與 VC# 程式碼…. • 動態建立控制項 • 動態建立 XAML 物件 • 動態建立筆刷 • 動態建立轉換 • 動態建立動畫 • 更加展現 .NET 技術的延續性

  22. 什麼是樣式 • 透過屬性去自訂控制項的外觀。 • 方便反覆使用一些常用的設定。

  23. 如何建立樣式 • 自行編寫 XAML 標記 • 使用 Blend 2 SP1 • 實作 • 建立適用於 Button 控制項的樣式

  24. 樣式的終極應用 • 建立出擁有一致性風貌的介面。 • 不同色系的控制項。

  25. 資源的應用技巧 • 經常使用到的外觀物件（例如：筆刷）以資源的形式來存放，以便能夠反覆使用，尤其是能夠於樣式中反覆使用。 • 精心調配出的漸層筆刷，不希望每次用到時都要重新配色一次吧。 • 實作：建立筆刷資源

  26. 為什麼需要範本 • 樣式並非無所不能 • 無法完全設定控制項的所有細部外觀 • 按鈕內部的整體填充色 • 滑鼠指標移至按鈕上方以及按一下時所要變換的色彩 • 解決之道：範本

  27. 為什麼需要範本 • 全面且細膩地自訂控制項的外觀。 • 賦予控制項更具創意的外觀。 • 圓形按鈕 • 不規則形狀的控制項。 • 變更控制項的運作行為。 • 如何建立範本 • 自行編寫 XAML 標記 • 使用 Expression Blend 2 SP1

  28. 運作行為的傳統作法 －以按鈕為例 • 使用 Canvas、Rectangle、Ellipse…等圖案物件繪製出所需外觀的按鈕。 • 事先製作滑鼠移入、移出與按一下的動畫，並在 MouseEnter、MouseLeave 與 MouseLeftButonDown 等事件處理常式中播放動畫。 • 缺點： • 很難反覆使用。 • 不容易維護。 • 不是一個真實的 Button 控制項。 • 實例

  29. 運作行為的現代作法 –使用範本來自訂 • 優點： • 容易反複使用。 • 容易維護。 • 一個真實的 Button 控制項。 • 實作 • 由視覺化設計人員繪製圖案型態的按鈕，再轉換成實質的按鈕範本並套用至 Button 控制項。

  30. 範本的應用

  31. 實務作業所面臨的困難 • 建議：由專業的視覺化設計人員來繪製範本。 • 困難點： • 經濟不景氣，人員縮編，中小企業更是缺乏視覺化設計人員。 • 開發人員沒有繪製美觀圖案的能力。

  32. 解決之道 • 藉由編輯控制項預設範本的複本來建立新的範本。 • 使用 Blend 2 SP1 • 只有衍生自 Control 類別而擁有 Template 屬性的控制項才支援範本。 • UserControl 不支援範本。 • 實作：以 Button 控制項為例

  33. 視覺化狀態 • 只有衍生自 Control 類別而擁有 Template 屬性的控制項才支援範本。 • UserControl 不支援範本。 • Image 控制項不支援範本。 • 不支援範本的控制項能否擁有視覺化狀態呢？？？ • 實作： • 替 Image控制項加入狀態使之具備滑鼠移入、移出以及按一下的效果。

  34. Silverlight Toolkit 佈景主題 • Bureau Black • Bureau Blue • Expression Dark • Expression Light • Rainier Purple • Rainier Orange • Shiny Blue • Shiny Red • Whistler Blue

  35. 使用步驟 • 下載 Silverlight Toolkit。 • 加入對下列組件的參考：Microsoft.Windows.Controls.Theming.dllMicrosoft.Windows.Controls.Theming.BureauBlack.dllMicrosoft.Windows.Controls.Theming.BureauBlue.dllMicrosoft.Windows.Controls.Theming.ExpressionDark.dllMicrosoft.Windows.Controls.Theming.ExpressionLight.dllMicrosoft.Windows.Controls.Theming.RainierOrange.dllMicrosoft.Windows.Controls.Theming.RainierPurple.dllMicrosoft.Windows.Controls.Theming.ShinyBlue.dllMicrosoft.Windows.Controls.Theming.ShinyRed.dllMicrosoft.Windows.Controls.Theming.WhistlerBlue.dll • 建置專案，以便使用代表佈景主題的自訂控制項。 • 將要套用的項目內含於佈景主題的自訂控制項中。

  36. Silverlight 多媒體功能 音訊 視訊(720P) 1280 點 x 720 條掃描線 MediaElement BufferingProgressChanged CurrentStateChanged DownloadProgressChanged MediaEnded MediaFailed MediaOpened MarkerReached Play Stop Pause Http Https mms

  37. 建立互動式多媒體播放介面

  38. MediaElement 控制項 • 視訊筆刷 • 時間軸標記（Timeline Markers） • 是一種中繼資料（Metadata），與多媒體檔案中特定的時間點有關。 • 播放至時間軸標記時，會觸發 MarkerReached 事件。 • Expression Encoder 2 • 多媒體可以看起來不那麼像多媒體

  39. WebClient 物件 • 以非同步方式下載或上傳檔案。 • 作業期間會持續引發事件。 • 下載檔案： • 下載單一檔案(例如：.jpg、.png 或 .WMV 檔) • 下載資料檔案(例如： .XML 檔案) • 下載壓縮檔 .zip 。 • 下載 Silverlight 類別庫組件 .dll 。 • 下載其他的 Silveright 應用程式封裝（.XAP） 。 • 從遠端的 API 服務(例如：Flicker) 下載檔案 • 呼叫泛型處理常式 .ashx

  40. WebClient 物件 • BitmapImage.SetSource 方法 • MediaElement.SetSource 方法 • 使用 .aspx 或 .ashx 來接收並儲存檔案。 • 調整上傳檔案大小限制的設定。

  41. 網路服務 • Silverlight 應用程式可以非同步呼叫： • ASP.NET Web 服務 .asmx • ASP.NET 應用程式服務 • 使用者驗證 • 角色 • 個人化設定檔 • WCF 服務 .svc • 使用 WCF 服務的步驟 • 建立有 Silverlight 功能的 WCF 服務。 • 加入服務參考。 • 使用用戶端類別來非同步呼叫 WCF 服務。

  42. ADO.NET 資料服務 • 一種專門用來存取資料的 WCF 服務。 • 使用 HTTP 通訊協定來存取資料。 • 應用程式透過 HTTP 動詞與 ADO.NET 資料服務互動來存取資料。誰能夠與 ADO.NET 資料服務互動 — Windows Form 、 WPF 、ASP.NET 以及 Silverlight。

  43. ADO.NET 資料服務 • 使用實體資料模型（EDM）的規格來定義資料來源： • 關聯式資料庫 • XML 檔案 • Web 服務 • 任何實作 IQueryable<T> [+ IUpdatable] 介面的資料來源。 • 善用 AsQueryable 方法 • 替實作 IEnumerable<T> 介面的物件加入 IQueryable<T> 介面 • 使得實體資料模型能夠透過 HTTP 通訊協定來存取，並將 URI 請求轉換成對應的資料操作(方法呼叫或 LINQ 查詢)。

  44. Silverlight + ADO.NET 資料服務 • 查詢與更新 ADO.NET 資料服務所部署的資料。 • System.Data.Services.Client程式庫負責管理 Silverlight 與 ADO.NET 資料服務之間的互動： • 不需要建立資料庫連接。 • 不需要使用傳統的資料庫查詢語法來存取資料。 • DataServiceContext類別 • DataServiceQuery(TElement)類別

  45. Silverlight + ADO.NET 資料服務

  46. Silverlight + ADO.NET 資料服務 • ASP.NET Web 應用程式或網站 • 建立 ADO.NET 實體資料模型(.edmx)。 • 建立 ADO.NET 資料服務(.svc)。 • 設定存取權限。 • Silverlight 應用程式 • 加入服務參考。 • 於程式碼後置檔中匯入命名空間 System.Data.Services.Client • 於程式碼後置檔中匯入用戶端類別所在的命名空間。 • 初始化 DataServiceContext執行個體並呼叫其非同步方法。

  47. Silverlight + ADO.NET 資料服務 • 調整資料大小的限制設定 • 實作

  48. Silverlight 2.0 應用程式的組成方式 • 單一個應用程式組件（.dll） -> .xap • 單一個應用程式組件（.dll）+ 一或多個類別庫組件（.dll） -> .xap • 直接加入類別庫組件的參考 • 需要使用時才動態下載類別庫組件 • .xap + .xap + … • 需要使用時才動態下載其他的 Silverlight 應用程式封裝 • 建議將不同的應用程式單元分散放置於不同的應用程式封裝（.XAP）與類別庫組件（.dll）中，並於執行階段動態下載並使用之。

More Related