http://www.dotblogs.com.tw/ouch1978/archive/2011/07/01/sl-changepropertyaction.aspx
如果是行动派的朋友,真的去建个Silverlight专案,并且试着在DataTemplate下想去存取它的Triggers属性时,应该会发现–咦!!!? Silverlight的DataTemplate里没有Triggers这个属性可以用!!!!
先别太灰心~Silverligt 4里还是有替代方案可以做到一模一样的效果的啦!!只是,这次要使用到的元件,属于Expression Blend SDK for Silverlight里的Conditional behaviors ,所以用Blend来操作,会比较顺手许多喔!!
废话不多说,马上来和大家分享作法~
首先请自行透过Blend建立Silverlight 4.0专案,并且建立好Sample Data,并且将它系结至ListBox中(做法可以参考小猴子点部落的零元学Expression Blend 4 - Chapter 31看如何简单的把SampleData绑进ListBox里 )。
我自己建立的资料如下(用来显示学生国文、英文、数学三个科目的成绩):
而我将ListBox的ItemsTemplate修改如下:
前置作业到此算告一段落,接着我想做的是:三个科目的成绩如果不及格,则分数以红色显示 , 及格则以绿色显示 ,另外, 如果三科都及格,则会显示出All Pass 。
接着就轮到这次的主角ChangePropertyAction出场啦!!ChangePropertyAction可以在Assets面版中的Behaviors分类中找到,因为我们想要依照分数来决定文字的颜色,且分为及格与不及格,所以请直接以滑鼠拖拉一个ChangePropertyAction到用来显示分数的TextBlock控制项里。
下一步,请先点选刚刚加入的ChangePropertyAction,并且移动注意力到它的Properties面版,会看到如下的预设值:
接着我们就要来处理当分数及格的时候,分数要改以绿色显示的部份;因为我们需要透过值的内容改变当作触发条件,我们必需把预设的EventTrigger改为DataTrigger,请点选TriggerType右方的New按钮,并且选取DataTrigger后,按下Ok按钮。
接着请按下Binding栏位右方的Data bind图示,并且选取要用来当作Trigger的系结属性 (以我的例子来讲,现在要处理的系结属性是Grades.Chinese,直接选取它,并且按下Ok钮即可)。
因为及格的是大于等于六十分,所以我们得在Trigger分类中Comparison下拉选单中把预设的Equal改为GreaterThanOrEqual ,并且把Value的值改为60 。
接着我们要来设定当条件符合时要修改的属性值,在Common Properties分类中的PropertyName下拉选单中选取Foreground , Value则利用颜色选取器选取绿色 ,到这边为止,我们完成了第一组的设定 。
再来我们得处理不及格的部份,可以简单的将刚刚设定好的ChangePropertyAction复制一份,贴回同一个控制项中,并且修改Trigger分类下的Comparison 值为 LessThan ,接着把Common Properties分类下的Value改为红色 。
重复以上的流程,处理好另外两个分数的部份之后,接着就是另一个重点啦~如果三个分数都及格的话,得显示All Pass的字样;一样,我们得为txtPass也加入ChangePropertyAction。 不过这次不一样的是,我们这次要透过EventTrigger来控制它~而且我希望在该控制项被戴入时就去进行判断,所以我们得把Trigger分类中的EventName改为Loaded 。
接着请打开Conditions分类的面版,并且保持一颗清醒的头脑,因为接下来的动作比较复杂喔!!打开Conditions分类面版后,按下右上方的Add Condition图示。
接着要进行的动作跟之前设定DataTrigger的部份很相似,我们得针对三个分数的系结分别做设定:如下图,点选Advanced options图示->于下拉选单中点选Data Binding.. .并且选取要用来判断的系结属性。
再来一样是老样子,我们得把Equal改成GreaterThanOrEqual ,并把下面的Value值输入为60 ,并且重复以上步骤,直到针对三个分数的系结都完成设定( 请注意Conditions分类面版中有个Match下拉选单,可以用来决定要所有条件都符合才会触发,还是任一条件符合就触发ChangePropertyAction ) 。
再来,当三个条件都成立的话,我们就得让All Pass显示出来,所以我们要修改的是Visibility属性。
Ok,到这边为止,我们完成的All Pass显示与否的一半了,再来一样把刚刚设定好的ChangePropertyAction复制一份到txtAllPass下。
接着要修改的部份可得小心仔细喔!!再来我们要针对刚才复制好的ChangePropertyAction做以下的修改:将Match下拉选单的值改为any (因为任何一科不及格就不是All Pass啦~)、将三组ComparisonCondition的比较条件改为LessThan ,最后将Visibility的值改为Collapsed 。
Ok~做到这边,就大功告成啦!!赶快来看看成果吧!!(有跟着做的同学们,有没有很有成就感啊!?)
最后奉上专案原始码,请自行取用: