[Silverlight][Expression Blend]我也不用写程序 - 透过ChangePropertyBehavior动态改变DataTemplate中数据的呈现方式...

[Silverlight][Expression Blend]我也不用写程序 - 透过ChangePropertyBehavior动态改变DataTemplate中数据的呈现方式

http://www.dotblogs.com.tw/ouch1978/archive/2011/07/01/sl-changepropertyaction.aspx

 

 

在 [WPF]真的不用写程式也能藉由资料改变外观-利用DataTemplate.Triggers一文中，我们可以透过DataTemplate.Triggers在WPF中动态的改变系结的资料的呈现方式，那么，在Silverlight里也能依样画葫芦吗??

如果是行动派的朋友，真的去建个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~做到这边，就大功告成啦!!赶快来看看成果吧!!(有跟着做的同学们，有没有很有成就感啊!?)

最后奉上专案原始码，请自行取用：

 

 

 

 

posted on 2012-08-17 16:57 NET未来之路 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/lonelyxmas/archive/2012/08/17/2644351.html