因為先前寫到自製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之路
喜歡我文章請推我一下或給我個回應,你的鼓勵會給我無限的動力喔!
若是您有其他問題或是特別需要,請在文章回應處留言,我會盡快回覆您