silverlight 2.0 完全新手學堂，基礎入門 10 大招

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

主講人：章立民

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

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

為什麼要使用 Silverlight 2.0質感

高度的互動性強大的多媒體能力技術的延續性與包容性

實作 .NET Framework 的一項跨平台與跨瀏覽器技術，讓您能夠建立具備豐富多媒體效果之互動式介面的下一世代 Web 應用程式，也就是所謂的豐富型互動式應用程式（ RIA ， Rich Interactive Application ）。.NET Framework Class Library for Silverlight

Silverlight 2.0 應用程式的執行模式

Silverlight 2.0 應用程式的執行模式

填滿整個螢幕畫面或佔用某個區塊

Silverlight 2.0 應用程式的執行模式

Silverlight 2.0 應用程式的執行模式

大小不超過 5MB僅需部署一次自動更新版本

Silverlight 2.0 開發平台的架構

Silverlight 2.0 的開發架構

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

Silverlight 2.0 內建的控制項Border

ButtonCalendarCanvasCheckBoxComboBoxContentControlDataGridDatePickerGridGridSplitterHyperlinkButtonImageInkPresenterListBox

MediaElementMultiScaleImagePasswordBoxPopupProgressBarRadioButtonRepeatButtonScrollBarScrollViewerSliderStackPanelTabControlTextBlockTextBoxToolTip

Silverlight Toolkit 提供的控制項AutoCompleteBox

DockPanelHeaderedContentControlHeaderedItemsControlLabelNumericUpDownTreeViewWrapPanel ExpanderImplicitStyleManagerViewbox

Charting

控制項的重要特性內容控制項 - 能夠顯示單一項目 ( 型別： Object) 的控制項。

首頁範例

內容控制項 – 注意型別

內容控制項

控制項的重要特性

ListBox 與 ComboBox 控制項

允許直接使用 FrameworkElement 物件做為選項 – ListBoxItem 是一個內容控制項。允許使用範本定義版面

DataGrid 控制項檢視與編輯狀態的範本

動畫特效藉由變更屬性值來製作動畫善用 Blend 2 設計動畫1. 採用 “動畫工作區” 版面配置。2. 建立一個腳本 (Storyboard 物件 )。3. 針對一或多個物件設定在不同時間點的屬性變

化。4. 設定腳本的 AutoReverse 與

RepeatBehavior 屬性。5. 反覆步驟 2 – 4 的操作。互動式控制 - 呼叫 Storyboard 物件的 Begin 、 Stop 、 Pause 、 Resume 與 Seek 方法來達到互動式控制的目的。

轉換特效對物件套用一個暫時性的效果可以在 Silverlight 中使用的效果有：

平移（ TranslateTransform ）旋轉（ RotateTransform ）縮放（ ScaleTransform ）翻轉（ Flip ）倒影歪斜（ SkewTransform ）

以中心點（ Center Point ）來定義開始轉換的起點，但平移例外。

轉換特效

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

只靠設計工具不足以成大事善用 VB 與 VC# 程式碼… .

動態建立控制項動態建立 XAML 物件動態建立筆刷動態建立轉換動態建立動畫

更加展現 .NET 技術的延續性

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

如何建立樣式

自行編寫 XAML 標記使用 Blend 2 SP1實作

建立適用於 Button 控制項的樣式

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

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

為什麼需要範本

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

為什麼需要範本全面且細膩地自訂控制項的外觀。賦予控制項更具創意的外觀。圓形按鈕不規則形狀的控制項。

變更控制項的運作行為。如何建立範本

自行編寫 XAML 標記使用 Expression Blend 2 SP1

運作行為的傳統作法 －以按鈕為例

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

實例

運作行為的現代作法 –使用範本來自訂優點：

容易反複使用。容易維護。一個真實的 Button 控制項。

實作由視覺化設計人員繪製圖案型態的按鈕，再轉換成實質的按鈕範本並套用至 Button 控制項。

範本的應用

實務作業所面臨的困難

建議：由專業的視覺化設計人員來繪製範本。困難點：

經濟不景氣，人員縮編，中小企業更是缺乏視覺化設計人員。開發人員沒有繪製美觀圖案的能力。

解決之道藉由編輯控制項預設範本的複本來建立新的範本。

使用 Blend 2 SP1 只有衍生自 Control 類別而擁有 Template 屬性的控制項才支援範本。UserControl 不支援範本。

實作：以 Button 控制項為例

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

Silverlight Toolkit 佈景主題

Bureau BlackBureau BlueExpression DarkExpression LightRainier PurpleRainier OrangeShiny BlueShiny RedWhistler Blue

使用步驟1. 下載 Silverlight Toolkit 。2. 加入對下列組件的參考：

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

3. 建置專案，以便使用代表佈景主題的自訂控制項。

4. 將要套用的項目內含於佈景主題的自訂控制項中。

Silverlight 多媒體功能Silverlight 多媒體功能

MediaElementMediaElement

HttpHttpHttpsHttpsmmsmms

視訊視訊((720P720P))音訊音訊

PlayPlayStopStop

PausePause

BufferingProgressChangedBufferingProgressChangedCurrentStateChangedCurrentStateChanged

DownloadProgressChangedDownloadProgressChangedMediaEndedMediaEndedMediaFailedMediaFailed

MediaOpenedMediaOpenedMarkerReachedMarkerReached

1280 點 x 720 條掃描線

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

MediaElement 控制項視訊筆刷時間軸標記（ Timeline Markers ）

是一種中繼資料（ Metadata ），與多媒體檔案中特定的時間點有關。播放至時間軸標記時，會觸發 MarkerReached 事件。Expression Encoder 2

多媒體可以看起來不那麼像多媒體

WebClient 物件以非同步方式下載或上傳檔案。作業期間會持續引發事件。下載檔案：

下載單一檔案 (例如： .jpg 、 .png 或 .WMV 檔 )下載資料檔案 (例如： .XML 檔案 )下載壓縮檔 .zip 。下載 Silverlight 類別庫組件 .dll 。下載其他的 Silveright 應用程式封裝（ .XAP） 。從遠端的 API 服務 (例如： Flicker) 下載檔案呼叫泛型處理常式 .ashx

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

網路服務Silverlight 應用程式可以非同步呼叫：

ASP.NET Web 服務 .asmxASP.NET 應用程式服務

使用者驗證角色個人化設定檔

WCF 服務 .svc

使用 WCF 服務的步驟1. 建立有 Silverlight 功能的 WCF 服務。2. 加入服務參考。3. 使用用戶端類別來非同步呼叫 WCF 服務。

ADO.NET 資料服務一種專門用來存取資料的 WCF 服務。 使用 HTTP 通訊協定來存取資料。應用程式透過 HTTP 動詞與 ADO.NET 資料服務互動來存取資料。

誰能夠與 ADO.NET 資料服務互動 — Windows Form 、 WPF 、 ASP.NET 以及 Silverlight 。

HTTP 動詞 作業

GET 提取資料

MERGE 修改資料

POST 新增資料

DELETE 刪除資料

ADO.NET 資料服務使用實體資料模型（ EDM ）的規格來定義資料來源： 關聯式資料庫XML 檔案Web 服務任何實作 IQueryable<T> [+ IUpdatable] 介面的資料來源。

善用 AsQueryable 方法替實作 IEnumerable<T> 介面的物件加入 IQueryable<T> 介面

使得實體資料模型能夠透過 HTTP 通訊協定來存取，並將 URI 請求轉換成對應的資料操作 ( 方法呼叫或 LINQ 查詢 )。

Silverlight + ADO.NET 資料服務查詢與更新 ADO.NET 資料服務所部署的資料。System.Data.Services.Client 程式庫負責管理 Silverlight 與 ADO.NET 資料服務之間的互動：

不需要建立資料庫連接。不需要使用傳統的資料庫查詢語法來存取資料。DataServiceContext 類別DataServiceQuery(TElement) 類別

Silverlight + ADO.NET 資料服務

Silverlight + ADO.NET 資料服務ASP.NET Web 應用程式或網站

1. 建立 ADO.NET 實體資料模型 (.edmx)。2. 建立 ADO.NET 資料服務 (.svc)。3. 設定存取權限。Silverlight 應用程式1. 加入服務參考。2. 於程式碼後置檔中匯入命名空間

System.Data.Services.Client3. 於程式碼後置檔中匯入用戶端類別所在的

命名空間。4. 初始化 DataServiceContext 執行

個體並呼叫其非同步方法。

調整資料大小的限制設定

實作

Silverlight + ADO.NET 資料服務

Silverlight 2.0 應用程式的組成方式單一個應用程式組件（ .dll ） -> .xap單一個應用程式組件（ .dll ） + 一或多個類別庫組件（ .dll ） -> .xap

直接加入類別庫組件的參考需要使用時才動態下載類別庫組件

.xap + .xap + …需要使用時才動態下載其他的 Silverlight 應用程式封裝

建議將不同的應用程式單元分散放置於不同的應用程式封裝（ .XAP ）與類別庫組件（ .dll ）中，並於執行階段動態下載並使用之。