零元学Expression Blend 4 - Chapter 35 讨厌!!我不想一直重复设定!!『Template Binding』使用前後的差异

原文:零元学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之路

喜欢我文章请推我一下或给我个回应，你的鼓励会给我无限的动力喔!

若是您有其他问题或是特别需要，请在文章回应处留言，我会尽快回覆您