零元學Expression Blend 4 - Chapter 35 討厭!!我不想一直重復設定!!『Template Binding』使用前後的差異

因為先前寫到自製Button時需特別注意Template Binding步驟的部分,有不少網友常常問我差異到底在哪?

所以在這邊就特別為了Template Binding做單獨的介紹

 

因為先前寫到自製Button時需特別注意Template Binding步驟的部分,有不少網友常常問我差異到底在哪?

所以在這邊就特別為了Template Binding做單獨的介紹

 

(回顧自製玻璃質感Button請看這裡)

 

就是要讓新手都看得懂!

 

 

01

首先我把Gird切割為二等分

分別放入一個愛心

(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之路

 

喜歡我文章請推我一下或給我個回應,你的鼓勵會給我無限的動力喔!

若是您有其他問題或是特別需要,請在文章回應處留言,我會盡快回覆您