因為先前寫到自製Button時需特別注意Template Binding步驟的部分，有不少網友常常問我差異到底在哪?
所以在這邊就特別為了Template Binding做單獨的介紹
因為先前寫到自製Button時需特別注意Template Binding步驟的部分，有不少網友常常問我差異到底在哪?
所以在這邊就特別為了Template Binding做單獨的介紹
(回顧自製玻璃質感Button請看這裡)
就是要讓新手都看得懂!
01
首先我把Gird切割為二等分
分別放入一個愛心
接著把愛心轉換為Button
愛心上單擊右鍵->Make Into Control->Button
進入Button Template後，請把本範例不需要的ContentPresenter刪除
由於本章介紹的是Template Binding的差異，我就不針對設定Button做詳細的說明了
如果你想知道更多自訂狀態，可以參考我其他篇的介紹：
(1) 零元學Expression Blend 4 - Chapter 15 用實例了解互動控制項「Button」I
(2) 零元學Expression Blend 4 - Chapter 16 用實例了解互動控制項「Button」II
(3) 零元學Expression Blend 4 - Chapter 28 ListBox的基本運用與更改預設樣式
(4) 零元學Expression Blend 4 - Chapter 32 簡單輕鬆的學會如何使用Visual States(上)
(5) 零元學Expression Blend 4 - Chapter 33 簡單輕鬆的學會如何使用Visual States(下)
02
進入樣板編輯模式後，請在Properties->Brush->Fill後面的小白點(Advanced options)->點選Template Binding->Background
Bindind以後，我們離開樣板編輯模式(Edit Button Template)
再用一樣的方法把右邊的愛心轉為Button，但右邊的愛心不需要設定Template Binding，因為我們要看出Template Binding與否的差異
以上步驟都完成了以後，表面上看似正常的兩個愛心，底層已經不一樣了喔!
看下去就知道：
一般模式下，已Template Binding的左邊愛心，當選取什麼顏色，愛心就是什麼顏色
就像下圖，左邊的愛心，選取粉紅色，愛心就是粉紅色
一般模式下，未Template Binding的右邊愛心，當選取藍色，愛心卻不會變成藍色
到底是怎麼一回事呢?
這邊我們把兩個愛心都改為藍色再進入樣板編輯模式看看
左邊愛心：
可以看到已Template Binding的愛心，有綁定的狀態檢色器會出現一個黃色外框
而且於一般模式已經改為藍色的愛心，在樣板編輯模式時也同樣是藍色
但你可以發現，被黃色外框框住的檢色器已經無法選擇顏色了
右邊愛心：
可以調整看看顏色，剛剛在一般模式無法更改顏色，但進到樣板編輯模式就可以更改了!
統整一下剛剛我們遇到的狀況：
左邊愛心 V.S 右邊愛心
|
已Template Binding |
未Template Binding |
|
一般模式編輯色彩有效 |
一般模式編輯色彩無效 |
|
樣版模式無法編輯顏色 |
樣版模式可以編輯顏色 |
|
一般模式編輯色彩 與樣版模式色彩同步 |
一般模式編輯色彩 與樣版模式色彩不同步 |
其實我們在Edit Template的時候，做的是底層的東西
所以如果沒有把底層與外層Binding起來，會造成一般編輯與樣板編輯(Edit Template)的不同
03
以我們把Backgruond Fill Template Binding為例：
Binding前後的差異在----
Binding前：即使調整了外層(未進入樣板編輯)的Backgruond Fill顏色，對於樣板編輯模式裡的Backgruond Fill 不會造成影響。
Binding後：調整了外層的Backgruond Fill顏色，樣板編輯模式裡的Backgruond Fill 顏色會跟著變動。
這動作最主要實現在於Blend的基本精神
如果我複製了Button，就可以在一般編輯貼出多個Button後，直接更改我喜歡的顏色
不需要一直去動到樣板，能夠直接從一般模式下調整你想要的顏色
因為，每做一個顏色就要去調一次樣板是很累人的.....
但是如果你想要一口氣直接把所有顏色都調整為同一種顏色
你可以選擇不使用TemplateBinding
試著複製多個未TemplateBinding的右邊愛心，然後進入到樣版裡面更改顏色
應該可以發現，不管複製了幾個愛心，都可以在同一時間改變顏色，就算是大小或外觀改變了
用最簡單的話說
我們只是利用TemplateBinding把樣版裡面的屬性開放出來，和實際的元件的某個屬性綁在一起
所以在實際元件的那個屬性上做設定，就會被樣版裡與屬性有Binding的屬性一起吃進去
而且TemplateBinding一次不只可以綁一個屬性 ，樣版裡面的多個屬性可以綁到實際元件的同一個屬性
試著玩玩看吧!
若能注意到很小的設定，會對你Silverlight的製作加分喔!
本篇的教學就到此。
(若有任何錯誤的地方，請各位前輩或同好能不吝指教，小女子都會虛心接受；若是你喜歡我的教學，請給我點鼓勵，謝謝。)
一步一步邁向HIE之路
喜歡我文章請推我一下或給我個回應，你的鼓勵會給我無限的動力喔!
若是您有其他問題或是特別需要，請在文章回應處留言，我會盡快回覆您
