來源：http://www.cnblogs.com/hielvis/archive/2010/10/21/1857415.html
有的人認為，Blend主要是用來修改一下顏色，調整一下布局之類的，大部分的SL開發還是用VS搞定；這樣的結果我們可以預測，他的UI一定是很普通的，也許布局顏色搭配之類算不上難看，符合一般審美，但是絕不是高水平的UI，也不會是銷售人員滿意的設計；
有的人認為，Blend太難學了，總是搞不懂應該怎么去操作，感覺跟其他設計工具都有點不一樣，所以，很多人對它很感興趣，希望用它來實現自己心中如詩如畫的構思；于是站在門口，不斷的徘徊，卻始終不得其門；
我其實不是UI設計人員，我連Photoshop都不會，也從沒有設計過像樣的東西；并且對于Silverlight，我也不是很有經驗；我想告訴你的是，它沒有那么復雜，因為像我這樣的人都能搗弄一下，除非你在后面留言說：“樓主，我比你想象的要笨！ 
”
示例說明：
作為Blend操作的入門篇，我對Blend操作幾個階段的的定義是：
1. 入門階段-能得心應手的修改任何控件的樣式；
2. 中級階段-能得心應手的設計動畫，設計自定義控件的模板，狀態，狀態過渡，各種Behavior的運用和開發
3. 高級階段-只要你想得到的場景，你都知道怎么去設計
這篇是針對第一階段的朋友寫的，因為我也只是剛過了第一階段，其實開始不知道要做什么樣的示例比較合適。昨天群里有一MM問怎么做一個好看一點的Tabcontrol控件，于是就想以修改Tabcontrol模板為示例，順便也可以給她的幫助。以下是示例截圖，先看一下效果，我不是設計人員，不要對我要求太高，我就做這個簡單的修改，你會比我設計的好看得多：
小話設計模式：
有一個壞毛病，總是喜歡在文章中插一些不相關的東西，這里也來一個小話設計模式。
記得，以前寫Behavior的時候也是提到了設計模式，那么這里又提到設計模式。有的人說，既然對設計模式這么感興趣，這個人為什么沒有寫過一篇設計模式的文章呢，也來講一下比如單例模式的UML圖是什么樣子，實現代碼是什么樣子。
等等，這時候你會說，那些設計模式書上不是已經這樣寫了么！
是的，個人覺得，對于那些經典設計模式的描述，已經有很多書了，而且我認為沒有必要再出那些設計模式的書了，除非你自己總結出新的設計模式實踐，或者真正實用的應用。大部分的關于設計模式的書，都是去構造一個不同的故事，不同的場景，最后寫出相同的標準的類，接口的定義，一個簡單的差不多都相同代碼的示例。
我建議再也不要寫這樣的書了，很多人看了很多本這樣的書，還是不會應用（我就是其中一個）。
我建議的下一本關于設計模式的書是，用真實的經典的開發者比較熟悉的案例來分析設計模式。那么我們來看一下模板方法。
不知道你現在對模板方法有一個什么樣的概念，如果你現在還不是很清楚，那么我相信這一次你應該可以清楚了，不清楚的請在后面留言“我很笨！”
可能在你的開發中很少用到模板方法，但是我告訴你你天天在運用模板方法，你相不相信呢？
模板方法的概念是，定義一個框架，但是將具體的算法延遲到子類中，使得子類可以定義自己的算法實現。這樣的定義像很多設計模式書描述的一樣，你會很迷糊，下面舉個例子：
ASP.NET的核心機制就是模板方法，每一個Page是一個實現IHttpHandler的實現類，Page定義了一些框架，比如page_Load這些方法，這樣當ASP.NET在執行頁面請求的時候，首先找到對應的Page（也就是子類），然后依次調用框架中定義的方法，比如Init，Pre_Render等等。ASP.NET框架本身來控制對子類方法的調用，通過這樣的方式來處理不同的請求，你可以定義不同的Page做不同的事情，用不同的算法，后臺邏輯。
所以，模板方法是非常重要的設計模式，它通常用于框架設計，你定義一個框架，不同的子類遵循這個框架實現規定的方法，然后框架主體來調用子類的方法，到達可擴展性，因為子類只要遵循這個框架定義，它可以有不同的實現。
所以，模板方法不僅僅只是一種設計模式，它基本上可以算作一個架構風格了，你可以站在架構師的層面，去運用模板方法。
那我們這里為什么講模板方法呢？因為Silverlight實現控件模板自定義的樣式的機制也是模板方法：控件定義一個ControlTemplate屬性，這個對象你可以自己定義，如果你不定義，Silverlight去取默認的Xaml樣式，實例化然后賦值給控件，如果你定義了自己的ControlTemplate對象，Silverlight就用你自定義的對象來初始化控件，這樣控件就能使用你的樣式。
Silverlight中的ControlTemplate就相當于Page，其本身相當于定義了一個框架，具體的樣式定義在ControlTemplate中。控件本身不知道樣式，就像ASP.NET不知道怎么去處理每個頁面。
這，就是模板方法，有了這個提醒之后，相信你會發現更多模板方法的樣子，相信現在你應該在對模板方法的概念感到模糊了。
我相信，用我們熟悉的東西來講設計模式，這樣效果好得多，這樣的例子很多很多，因為經典設計模式其實也應用在很多經典的軟件設計中，而不僅僅只是一個概念。
很希望，下一本設計模式的書是這樣的。
Blend入門很簡單：
除了修改顏色等基本屬性，下面列舉幾點必須掌握的東西：
1. 示例數據
示例數據的管理位于Data面板，如下圖：
為什么它是很重要的，設計Silverlight UI很痛苦的是，數據都是從Service上獲取的，這樣在設計的時候一般看不到控件的外觀。那么這個時候我們就要采用本地示例數據，它能夠幫助我們在設計時很完整的看到運行時的效果，這樣才能更好的設計。它的原理是，Blend或者VS的設計器在呈現Xaml的時候，其實和真實的運行時差不多，在運行時，Silverlight插件初始化SL控件，獲取每個元素的布局信息，然后將其繪制到屏幕上正確的位置。那設計器想要呈現設計時的外觀，也是要家里這樣的過程，想要初始化控件樹，繪制到屏幕，不同的是設計時只會初始化Xaml中定義的元素。如果這個時候示例數據是本地資源，并且示例數據的集合對象是放在Xaml中初始化的，那么設計器就能找到對應數據，將它作為控件的Context，而到該控件實例化的時候，它發現已經有了數據，自然不會放過，會將其繪制出來，所以我們在設計時能看到效果。尤其是某些復雜的集合控件，這非常重要。Blend中示例數據實際上是一個Xml文件，可以定義不同類型的數據，比如Image,String，你告訴它想要多少條數據，它就會生成隨機的示例數據，達到以假亂真：
示例數據的使用非常簡單，拖動collection那一行，至一個控件比如ListBox即可：
然后就會生成預覽圖：
這個時候再來修改模板是不是方便多了，一般建議是建立和真實的數據結構一樣的屬性，在真實運行的時候，將數據源改為真實的數據源，這樣綁定屬性不用改。這是Blend入門最基本的東西。
2. 怎樣調出控件模板ControlTemplate
在Silverlight中修改模板得首先把原來的模板樣式取出來，然后在其基礎之上去修改，Blend為我們提供了一種很方便的方式把這段模板取出來，如我們想調出ListBox的ControlTemplate，如下：
右鍵選擇Edit Template->Edit a Copy，Blend就會把控件的默認模板xaml定義片段復制到Xaml中，你可以在此基礎之上修改，你也可以選中ListBox，在視圖面板中進行該操作，效果是一樣的，建議采用后一種方式，后面會看到為什么：
這個時候你就可以看到該模板的定義，狀態，可以進行修改。這里有一個細節就是，怎樣退出控件模板，即怎樣在頁面也控件模板之間切換，如下我們看到的是ListBox的ControlTemplate視圖，我們可以點擊視圖面板上端的控件名稱切換為頁面視圖。Blend所有的模板之間的切換都是在這里，如果想進入模板視圖，可以再選擇:ListBox->Edit Template->Edit Current進入：
3. 怎樣調出集合控件中子元素的ControlTemplate，即集合控件的ItemTemplate
按如上的操作就可以進入ItemTemplate視圖，這個時候就可以編輯每個子項的模板。不過這里我們將看到，這里的只包含每個子項的組成元素，每個子項包含哪些元素。但是不能編輯不同的狀態，比如ListBox在MouseOver的時候是什么樣式，在Selected的時候是另外一種樣式，這個時候需要選擇下面的Edit Generated Item Container(ItemContainerStyle)，就可以編輯控件的狀態。
4. 怎樣編輯控件的不同狀態下的外觀
我們看到，經典的Button控件，它不是只有一個樣子的。它有很多狀態，比如鼠標經過是一種樣子，鼠標離開，點擊都會呈現不同的樣子，這都是通過定義不同的狀態來實現的。
一個控件可以定義多個狀態，在每個狀態下可以設定不同的外觀，比如ComboBox控件，在點擊下拉框的時候就顯示下面的選項，鼠標離開就隱藏選項。當進入不同的狀態，狀態管理器就將改變控件外觀至該狀態定義的樣子。關于狀態可以參考我之前的文章。我們看下ListBoxItem的狀態：
狀態位于States面板，我們看到ListBoxItem模板定義了很多狀態，狀態可以分成不同的狀態組，每個狀態組之間的狀態是互斥的，選擇其中一個狀態，就可以設置該狀態下控件的外觀，比如如圖我點擊最后一個Selected狀態，這個時候視圖面板就會多出一個紅色的框，表示開始錄制動畫，在運行時的如果切換至該狀態，狀態管理器就會觸發動畫使外觀呈現定義的樣子。比如我們將每個項的寬度拉長，這樣在運行時選擇的時候，被選中的項就會拉長。
示例操作：
上面介紹的幾點是我覺得Blend入門應該知道的最基本的東西，當然不能寫的太詳細，需要你去操作體會實踐，我也不可能寫出所有細節，每一個操作都還有一些更細的東西和功能，可以自己去摸索，我們下面就來從頭實現本文提到的示例：
1. 打開Blend 4，新建MyTabcontrol項目，項目類型Silverlight Application + WebSite
2. 添加一個TabControl到MainPage控件中，并設置MainPage背景為黑色
3. 選中TabControl控件，在Properties面板設置如下，并這個時候TabControl呈現如圖所示外觀：
4. 右鍵選擇TabControl—》Edit Template—》Edit a Copy，這個時候會看到如下圖，刪掉其中的后面三項，只留下TemplateTop（后面三項是說Tab分別在下面，左邊和右邊的情形，我們這里Tabs在上邊，其他三個用不著，你也可以選擇其他的布局）：
5. 選擇TemplateTop，可以看到其是一個Grid控件，共有2行，第一行是Tabs，第二行就是下面的現實面板。修改Properties面板中RowDefinitions ，將Grid的第一行高度為50px；
6. 展開TemplateTop，選中TabPanelTop，這就是定義TabControl控件上面Tabs部分的背景的。在Properties面板中設置Background為：#FFBBD7FA
7. 選中下面的Border，將Background Reset: #FFB1CBEB；BorderBrush：#FFE4E4E4；BorderThickness：0,0,1,0；并加上圓角CornerRadius：0,0,10,10；
8,. 選中ContentTop，加上Margin：10。這個時候看起來是這個樣子：
9. 下面我們來編輯TabItem的模板。
回到MainPage的視圖，展開TabControl，選擇第一個TabItem，調出其面板（右鍵選擇TabItem—>Edit Template—>Edit a Copy）。進入TabItem面板之后看到有許多部件，刪掉其他的只留下三個：TemplateTopSelected，TemplTopUnSelected，FocusVisualElement，原因和前面的一樣，我們的Tab只會在頂端，你可以自己去修改其他樣式。
接下來的，TemplateTopSelected就是定義選擇狀態的外觀，TemplateTopUnSelected就是定義沒有選擇的外觀。
10. 在States面板，選中base，在Objects and TimeLine面板選中Root元素，在屬性面板修改高度為50px；
11. 選中Selected狀態，開始錄制
12. 展開TemplateTopSelected，將b元素order的Margin，BorderThickness，CornerRadius都設置為0，Background設置為：#FFBBD7FA
13. 選擇border1元素，設置參數，BorderThickness：1,1,1,0；CornerRadius：10,10,10,0；Margin：2,2,5,0；Background和BorderBrush都設置為純白色。
14. 選擇HeaderTopSelected元素：修改字體大小樣式至以下的樣子：這個時候看起來是這樣：
15. 接下來我們修改TemplateTopUnSelected的樣子，它是處于UnSelected的狀態，所以我們在States面板選中UnSelected狀態，開始錄制。注意這個時候找到TabControl控件中的兩個TabItem控件，將第一個TabItem的Style="{StaticResource TabItemStyle1}"樣式復制給第二個。
16. 對著前面的步驟，修改TemplateTopUnSelected下面的各個元素，使之呈現如下樣式：
17. 大功告成，就是還有一點小小的瑕疵，就是在選中的時候有個討厭的邊框，這個時候將FocusVisualTop的BorderBrush設置為無色就可以了，看一下我們的成果：
總結：
本篇先總結了一點Blend入門的注意事項和要領，接著展示了一個示例。
開始使用Blend，絕大部分是修改控件模板，本文拋磚引玉，演示了一般的修改控件模板的方法，包括ControlTemplate以及集合控件的ItemTemplate。掌握了這些方法，修改Silverlight控件外觀就不難了，相信，殺掉Silverlight默認的丑陋的外觀，你自己設計的外觀一定如詩如畫。你們公司的銷售也該請你吃飯了，哈哈。
當然，Blend還有很多東西，本文講得很簡單，還希望大家多多實踐，多看看老外的文章，示例。
后期有時間在寫一篇高級一點的，包括動畫和自定義狀態，以及狀態之間的轉換動畫等等。
總之，Blend還是比較有趣的，只要你想得出來的，它基本上都可以做出來，希望大家多多實踐。
如有興趣，可以加入QQ群討論，本群熱烈歡迎有志于高水平UI設計的朋友，當然我們也討論Silverlight，Windows Azure，Ajax，WCF等等微軟技術，歡迎你。
QQ群：6183299
源代碼下載：http://files.cnblogs.com/hielvis/MyTabControl.rar
文章列表
留言列表
