Visual Studio 2010 ─ 技術核心(2)
前端介面之使用者經驗設計趨勢 ─
Silverlight 4.0
文／董大偉

微軟在「三螢一雲」的策略發展下，Silverlight幾乎成為統一的前端介面技術，同時也針對軟體開發的使用者經驗 (User Experiences)帶來了相當程度的提升。所謂的使用者經驗 (User Experiences)，指的是用戶在操作軟體系統時的感受與滿意度。從典型的Web應用程式、桌面端型態的Out-of-Browser應用、引領風騷的RIA(Rich Internet Application)、乃至於Window Phone的開發，Silverlight都占有一席之地，在使用者經驗被更加重視的今天，也自然而然的成為Visual Studio 2010平台中得以完整支援的技術之一。

---

對於Silverlight 4.0版的出現，早已不是新聞，Visual Studio 2010 Beta2時的版本就已包含其Beta版。如今Visual Studio 2010正式上市，同樣可完整支援Silverlight技術，可說是回應了廣大.NET開發人員需求，讓XAML編輯器支援所視即所得的開發。(圖1)

圖1：XAML編輯器也可所視即所得的開發。

過程中所需的IntelliSense機制也都已經出現在XAML編輯器中，屬性視窗的使用與功能也與Blend接近，同時也開始支援Binding的設定，對於RIA的開發人員來說，將可減少在Visual Studio 2010與Blend 4之間切換的時間。(圖2)

圖2：屬性視窗可同時支援Binding的設定。

對於開發人員來說，儘管現在已經可以輕鬆的透過Visual Studio 2010進行資料繫結或是屬性的設定，甚至可直接為控件設定樣式或擷取建立新樣式，不過同時間Expression Blend 4也不需棄置不用，在Blend 4當中依舊可幫助開發人員更輕鬆的建立諸如動畫、特效、並且搭配Behavior使用達成更多的前端效果，兩者交互運用可有效的提高開發人員的生產力。


Silverlight 4.0重點特色
Silverlight從第2版開始，就已經包含有影音、動畫等各種多媒體機制，同時還內建豐富的控制項，讓開發人員可以建構出相當優秀的前端操作介面。而第3版更是一舉加入了OOB(out-of-browser)、Navigation Framework與Deep linking、Behavior、.NET RIA Services等，更多可支援RIA應用程式的相關技術。

隨著.NET升級到了4.0版，在Silverlight 4.0當中又為開發人員帶來哪些新特色？首先是OOB應用程式已經可動態改變視窗大小，並且支援最上層視窗的顯示。新增的WebBrowser Control，則讓我們可以在Silverlight應用程式中輕鬆的顯示網頁，這也是許多開發人員共同的期待！

此外，OOB應用程式可利用Notification Window機制，顯示類似MSN的右下角訊息視窗(上線通知、郵件通知等)。若將該應用程式的信任模式調整成「Elevated Trust」，即表示得以在用戶的許可下，直接存取用戶端的檔案或部分資源。

其它像是RichTextBox、列印功能、WebCam與Audio、Multicast機制、檔案拖曳功能(讓你可以把檔案拖曳到Silverlight應用程式視窗中)以及用戶端剪貼簿支援、滑鼠右鍵，甚至連COM Automation整合，均已納入此新版本。

而這些功能幾乎都是在Silverlight 3時代渴望而不可得的部份，這次在Silverlight 4當中則一次直接到位，對於RIA應用程式的開發，或是傳統Web應用程式的整合，都有著相當大的助益。


列印功能最實用
應用程式常需要採用的列印機制，過去不管是ASP.NET或是Silverlight應用程式，總是不能像是Win Forms應用程式一般，透過程式碼完整的控制印表機的列印輸出工作，ASP.NET所開發出的Web應用程式，只能死板的透過JavaScript呼叫瀏覽器所提供的列印對話視窗，後續就只能任憑使用者自行操作了。

這對於一個應用程式的標準來說，其實並不及格，因此以往要突破這些限制，非得在用戶端安裝ActiveX之類的元件，來彌補列印的不足。現在新版的Silverlight 4.0當中，就已經直接把列印功能納入，同時讓開發人員可以透過類似Win Forms的方式，自由的在Panel(或任何的UIElement)上繪製要列印出來的內容，接著再透過Silverlight 4中提供的API直接列印出來，不僅輕鬆容易許多，用戶端也不需要再安裝其它的元件了。

你會看到要列印的物件(Canvas1)是直接丟給PageVisual，透過PrintDocument物件幫我們把內容列印出來，接著再判斷(告知)是否有下一頁，如果有的話則繼續處理(PrintPage事件會被再次呼叫)，直到要列印的內容全部輸出完畢。圖3畫面是Canvas1的內容以及按下Button1之後，透過我們撰寫的程式碼實際列印出的結果。

圖3：實際列印。

如果你開發過Win Forms應用程式，你會發現整個列印概念和動作幾乎和Win Forms應用程式完全一致，甚至比Win Forms應用程式來的簡單很多，Win Forms應用程式必須透過Graphics物件把要列印的內容以繪圖方式繪製到印表機上，而我們只需要把想要列印的內容丟給PageVisual就可以了。並且許多Web應用程式的開發人員常為了處理圖表的繪製與列印大傷腦筋，利用Silverlight 4.0的列印配合Chart Control，就可以徹底解決過去困擾。


開放存取實體資源權限
一般而言，Silverlight應用程式不管是否被執行在OOB模式下，都是以sandbox的形式被運行，這表示該應用程式本身在某種程度上是受限制的，例如無法存取用戶端檔案，或是其它資源，而這樣的限制可視為一種保護，避免應用程式蓄意或不小心破壞了使用者在用戶端的系統。

為了讓Silverlight應用程式即便在OOB模式下，也能如同WPF或傳統Win Forms般應用，在Silverlight 4.0中開始納入了Elevated Trust模式，讓Silverlight應用程式對於用戶端資源的存取，具有較大的權限，透過設定，即可讓應用程式在安裝後被執行在Elevated Trust模式中。

除了檔案存取之外，在Elevated Trust模式下，Silverlight應用程式還可以藉由ComAutomationFactory透過COM Automation與用戶端的應用程式互動。這個功能更讓未來Silverlight應用程式的開發有著許多想像空間。

在Elevated Trust模式下，透過ComAutomationFactory的CreateObject指令，建立Word應用程式Instance，並且在Word中建立文件，執行後的效果如圖4。你會發現，現在我們可以從Silverlight應用程式中呼叫Word、Excel或Outlook，並且與之互動，不管是要進行檔案的匯出匯入，或是利用Office應用程式來作為資料呈現的介面，都相當的便利。

圖4：建立Word應用程式Instance並在Word中建立文件。

除此之外，在Elevated Trust模式下的Silverlight應用程式，將直接享有較寬鬆的Cross-Domain存取權限，以及剪貼簿、WebCam與全螢幕支援。


多點觸控應用程式開發浪潮
相當受到台灣產業關注的多點觸控(Multi-Touch)技術，隨著硬體的成熟與普及化，也慢慢變成許多銷售點、用戶端平台的重要賣點之一。而Silverlight從3.0開始即配合Windows 7支援多點觸控技術，只要硬體設備支援，Silverlight就可經由Touch API建構出可支援多點觸控的應用程式，在Windows平台上也可透過.NET 4.0中的WPF配合Touch Events，建構相關應用。(圖5)

圖5：Silverlight可經由Touch API建構出多點觸控應用程式。


Silverlight正式跨入手機應用
更令Silverlight開發人員振奮的，就是新一代的Windows Phone 7應用程式開發，在MIX2010中所釋出的Windows Phone Developer Tools(CTP)中，一樣可以透過Silverlight 3來開發Mobile應用程式。(圖6)

圖6：Silverlight 3來開發Windows Phone 7應用程式。


用Sliverlight開發的文字編輯器
讓許多使用者期待已久的RichTextBox控件，在Silverlight 4中終於出現了！如過去所熟悉的Win Forms版本RichTextBox，此控件也可以控制文字的各種呈現與樣式，例如粗體、協體、底線、顏色等。

承襲Silverlight的一貫風格，RichTextBox當然也支援插入圖形和HyperLink，甚至任何形式的Element(例如Rectangle)，這讓Silverlight得以輕易開發出Win Forms或Web Forms沒法做出的RIA編輯器。如圖7，即是一個以Sliverlight 4開發的簡易文字編輯器，綜合實體資源存取的功能，使用者已可直接編輯與存取文件。

圖7：以Sliverlight 4開發的簡易文字編輯器。


WebBrowser控件與筆刷
在Silverlight 4之前，開發人員可能會納悶，為什麼Silverlight無法顯示傳統的HTML網頁呢？能否就像Windows應用程式的操作，直接拖曳一個WebBrowser控件來顯示HTML網頁呢？這些在Silverlight 4當中皆可實現了。

在Silverlight 4中只需要從工具箱中拖曳WebBrowser控制項，並且佈置在場景當中，如圖8的動作，就可以透過程式碼來顯示HTML網頁：「this.webBrowser1.Navigate(new Uri("http://www.yahoo.com.tw"));」。

圖8：從工具箱拖曳WebBrowser到場景中。

除了上述與過去WinForm時代使用的WebBrowser控制項非常類似的應用以外，Silverlight 4還多了一項有趣的功能，就是可以拿HTML Browser控件中的內容，當作筆刷般地刷在某一個物件上，圖9即是透過Blend在場景中繪製了一個不規格圖形。

圖9：透過Blend在場景中繪製了一個不規格圖形。

而上述的動作完成後呈現出來的結果如圖10，你會發現，網頁是以Shape1的外框以不規則的方式來呈現，這也算是Silverlight中的特異功能了。（如果你還有印象，Silverlight 1時代就可以把影片當作筆刷刷在不規則區域當中，現在則是可以把HTML網頁當筆刷刷在不規則區域中，相當有趣！）

圖10：網頁以不規則外框的方式呈現。


結語
對於Silverlight開發人員而言，開始有機會統一在各種平台上的開發技術，現在透過Silverlight與XAML技術，已經可以開發Web應用程式、RIA應用程式、Windows平台桌面端，連即將推出的Windows Phone亦可加入，從這個角度不難看出Silverlight與XAML儼然是未來前端應用開發技術的新趨勢。