摘要:使用 Expression Blend 2對一個Silverlight Twitter應用進行樣式化
【原文位址】Styling a Silverlight Twitter Application with Expression Blend 2
【原文發表日期】 Friday, November 14, 2008 2:15 AM
Silverlight 2 為建造跨瀏覽器、跨平台RIA應用提供了一個豐富的平台。
使得Silverlight如此強大的一件事情是，開發人員和設計師在Silverlight專案上一起合作的容易性。開發人員可以使用Visual Studio打開和編輯Silverlight 2專案，得到一個強大的以程式碼為中心的 .NET 開發環境，而設計師則可以使用Expression Blend 2 SP1打開和編輯同個專案，使用一個創造性的工具，精雕細琢，創造出優化的用戶體驗設計。
Silverlight中發佈的WPF UI框架通過支援象佈局管理，控制項，樣式，模板和資源這樣的概念，進一步促成了很好的設計師/開發人員工作流程，有助於避免設計師和開發人員在整合功能，行為和有表現性的設計時相互妨礙的場景。
Silverlight 2 Twitter 範例程式
上個月，我貼出了一個深入的部落格課程，教你如何建造一個Silverlight 2 Digg應用，你可以在這裡閱讀。該課程主要針對開發人員，著重於介紹在建造Silverlight 2應用時涉及的基本程式設計概念。
今天，Celso Gomes 和 Peter Blois 發佈了一個很酷的十分鐘長的錄影課程，展示如何使用Expression Blend來對一個Silverlight 2 Twitter Messenger應用進行樣式化。你可以在 這裡觀看這個錄影，你可以在這裡下載完成後的Silverlight Twitter應用的程式碼。
這個錄影很好地示範了設計師如何不用改動後台程式碼，就可以對一個Silverlight應用重新樣式化。在樣式化過程中，該錄影還展示了Expression Blend 2提供來建造極其豐富的用戶體驗的一些強大的功能。Celso 從該應用的開發人員版本開始，然後對UI進行定制和精雕細琢，使其擁有一個好玩的twitter（鳥鳴）角色的主題：
應用模型
該Silverlight Twitter客戶端是宿主於一個ASP.NET伺服器應用之中的，該應用呈示了一個web服務，允許Silverlight Twitter應用與Twitter服務進行通訊（因為Twitter不允許來自客戶端應用的直接訪問）。而Silverlight客戶端與ASP.NET web伺服器之間的通訊是通過Windows Communication Foundation (WCF)實現的。
該客戶端應用使用了「Model-View-Presenter (MVP)」模式（也稱為「Model-View-ViewModel」模式），這是在大型WPF應用中常用的模式。雖然這是個很簡單的應用，他們還是想要利用MVP帶來的彈性，以及為將來發展留下空間。
保持視覺表現和應用邏輯的分離，還允許設計師不用影響基本的應用流程，而做出比較複雜的視覺上的改動，這個錄影提供了一些該架構促成的樣式化彈性的例子。
樣式化過程
在錄影中，Celso著重強調了Resources（資源）可以怎樣幫助設計師很快地改變顏色。例如，一個常見的畫刷資源（Brush Resource），可以被用來改變應用中所有文字元素的顏色：
Celso展示了使用Expression Blend 2 SP1從圖形來建立新的用戶控制項是多麼地容易（只要在設計器上選擇多個元素，右擊滑鼠，選擇「Make Control」選單項即可）：
還展示了如何在這個新的用戶控制項中建立新的狀態（用了視覺狀態管理器的功能，現在WPF也提供了該功能），建立鳥的動畫效果（飛翔，眨眼等等）
Celso還展示了如何建立每個狀態的動畫效果，改變象Key Spline曲線和Repeat Behavior這樣的高級屬性：
他還展示了如何從圖畫建立出定制的按鈕（這些圖畫可以來自於XAML或象Photoshop或Illustrator這樣的任何其他設計工具），一個Button控制項的所有狀態都有現成提供。
Expression Blend還允許你輕鬆的改變象List Boxes這樣的複雜控制項，設計師可以訪問所有的樣式，模板和狀態，不用編寫任何程式碼就可以完全地定制List Box的所有部分：
想把玩上面的Twitter應用的話，你可以觀看該錄影，以及下載相關程式碼。
想瞭解Expression Blend詳情的話，我還推薦觀看2個星期前PDC大會上的《Expression Blend之技巧和訣竅》講座。
更新: 還請觀看Shawn Wildermuth的《Deep Control Skinning with Styles》 webcast。
希望本文對你有所幫助，
Scott
