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

简介: http://www.dotblogs.com.tw/ouch1978/archive/2011/07/01/sl-changepropertyaction.aspx   在[WPF]真的不用写程式也能藉由资料改变外观-利用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里 )。

我自己建立的资料如下(用来显示学生国文、英文、数学三个科目的成绩):

image

而我将ListBox的ItemsTemplate修改如下:

前置作业到此算告一段落,接着我想做的是:三个科目的成绩如果不及格,则分数以红色显示 , 及格则以绿色显示 ,另外, 如果三科都及格,则会显示出All Pass 。

接着就轮到这次的主角ChangePropertyAction出场啦!!ChangePropertyAction可以在Assets面版中的Behaviors分类中找到,因为我们想要依照分数来决定文字的颜色,且分为及格与不及格,所以请直接以滑鼠拖拉一个ChangePropertyAction到用来显示分数的TextBlock控制项里。

image image

下一步,请先点选刚刚加入的ChangePropertyAction,并且移动注意力到它的Properties面版,会看到如下的预设值:

image

接着我们就要来处理当分数及格的时候,分数要改以绿色显示的部份;因为我们需要透过值的内容改变当作触发条件,我们必需把预设的EventTrigger改为DataTrigger,请点选TriggerType右方的New按钮,并且选取DataTrigger后,按下Ok按钮。

image image

接着请按下Binding栏位右方的Data bind图示,并且选取要用来当作Trigger的系结属性 (以我的例子来讲,现在要处理的系结属性是Grades.Chinese,直接选取它,并且按下Ok钮即可)。

image image

因为及格的是大于等于六十分,所以我们得在Trigger分类中Comparison下拉选单中把预设的Equal改为GreaterThanOrEqual ,并且把Value的值改为60

image image

接着我们要来设定当条件符合时要修改的属性值,在Common Properties分类中的PropertyName下拉选单中选取ForegroundValue则利用颜色选取器选取绿色 ,到这边为止,我们完成了第一组的设定 。

image

再来我们得处理不及格的部份,可以简单的将刚刚设定好的ChangePropertyAction复制一份,贴回同一个控制项中,并且修改Trigger分类下的Comparison 值为 LessThan ,接着把Common Properties分类下的Value改为红色

image image

重复以上的流程,处理好另外两个分数的部份之后,接着就是另一个重点啦~如果三个分数都及格的话,得显示All Pass的字样;一样,我们得为txtPass也加入ChangePropertyAction。 不过这次不一样的是,我们这次要透过EventTrigger来控制它~而且我希望在该控制项被戴入时就去进行判断,所以我们得把Trigger分类中的EventName改为Loaded

image image

接着请打开Conditions分类的面版,并且保持一颗清醒的头脑,因为接下来的动作比较复杂喔!!打开Conditions分类面版后,按下右上方的Add Condition图示。

image

接着要进行的动作跟之前设定DataTrigger的部份很相似,我们得针对三个分数的系结分别做设定:如下图,点选Advanced options图示->于下拉选单中点选Data Binding.. .并且选取要用来判断的系结属性。

image image image

再来一样是老样子,我们得把Equal改成GreaterThanOrEqual ,并把下面的Value值输入为60 ,并且重复以上步骤,直到针对三个分数的系结都完成设定( 请注意Conditions分类面版中有个Match下拉选单,可以用来决定要所有条件都符合才会触发,还是任一条件符合就触发ChangePropertyAction ) 。

image image image

再来,当三个条件都成立的话,我们就得让All Pass显示出来,所以我们要修改的是Visibility属性。

image

Ok,到这边为止,我们完成的All Pass显示与否的一半了,再来一样把刚刚设定好的ChangePropertyAction复制一份到txtAllPass下。

image

接着要修改的部份可得小心仔细喔!!再来我们要针对刚才复制好的ChangePropertyAction做以下的修改:将Match下拉选单的值改为any (因为任何一科不及格就不是All Pass啦~)、将三组ComparisonCondition的比较条件改为LessThan ,最后将Visibility的值改为Collapsed

image

Ok~做到这边,就大功告成啦!!赶快来看看成果吧!!(有跟着做的同学们,有没有很有成就感啊!?)

最后奉上专案原始码,请自行取用:



 


 

 

 

目录
相关文章
|
容器
Silverlight & Blend动画设计系列二:旋转动画(RotateTransform)
原文:Silverlight & Blend动画设计系列二:旋转动画(RotateTransform)   Silverlight的基础动画包括偏移、旋转、缩放、倾斜和翻转动画,这些基础动画毫无疑问是在Silverlight中使用得最多的动画效果,其使用也是非常简单的。
1020 0
|
容器 数据可视化 内存技术
Silverlight & Blend动画设计系列一:偏移动画(TranslateTransform)
原文:Silverlight & Blend动画设计系列一:偏移动画(TranslateTransform)   用户界面组件、图像元素和多媒体功能可以让我们的界面生动活泼,除此之外,Silverlight还具备动画功能,它可以让应用程序“动起来”。
823 0
Silverlight & Blend动画设计系列三:缩放动画(ScaleTransform)
原文:Silverlight & Blend动画设计系列三:缩放动画(ScaleTransform)   在Silverlight的动画框架中,ScaleTransform类提供了在二维空间中的坐标内进行缩放操作,通过ScaleTransform可以在水平或垂直方向的缩放和拉伸对象,以实现一个简单的缩放动画效果,故此我将其称为缩放动画(ScaleTransform)。
942 0
Silverlight & Blend动画设计系列四:倾斜动画(SkewTransform)
原文:Silverlight & Blend动画设计系列四:倾斜动画(SkewTransform)   Silverlight中的倾斜变化动画(SkewTransform)能够实现对象元素的水平、垂直方向的倾斜变化动画效果。
848 0
|
容器
Silverlight & Blend动画设计系列五:故事板(StoryBoards)和动画(Animations)
原文:Silverlight & Blend动画设计系列五:故事板(StoryBoards)和动画(Animations)   正如你所看到的,Blend是一个非常强大的节约时间的设计工具,在Blend下能够设计出很多满意的动画作品,或许他具体是怎么实现的,通过什么方式实现的我们还是一无所知。
950 0
Silverlight & Blend动画设计系列七:模糊效果(BlurEffect)与阴影效果(DropShadowEffect)
原文:Silverlight & Blend动画设计系列七:模糊效果(BlurEffect)与阴影效果(DropShadowEffect)   模糊效果(BlurEffect)与阴影效果(DropShadowEffect)是两个非常实用和常用的两个特效,比如在开发相册中,可以对照片的缩略图添加模糊效果,在放大照片的过程中动态改变照片的大小和模糊的透明度来达到一个放大透明的效果。
1091 0
Silverlight & Blend动画设计系列六:动画技巧(Animation Techniques)之对象与路径转化、波感特效
原文:Silverlight & Blend动画设计系列六:动画技巧(Animation Techniques)之对象与路径转化、波感特效   当我们在进行Silverlight & Blend进行动画设计的过程中,可能需要设计出很多效果不一的图形图像出来作为动画的基本组成元素。
1053 0
|
API
Silverlight & Blend动画设计系列十:Silverlight中的坐标系统(Coordinate System)与向量(Vector)运动
原文:Silverlight & Blend动画设计系列十:Silverlight中的坐标系统(Coordinate System)与向量(Vector)运动   如果我们习惯于数学坐标系,那么对于Silverlight中的坐标系可能会有些不习惯。
1263 0
|
UED
Silverlight & Blend动画设计系列九:动画(Animation)与视图状态管理(Visual State Manager)
原文:Silverlight & Blend动画设计系列九:动画(Animation)与视图状态管理(Visual State Manager)   Silverlight中的动画(Animation)与视图状态管理(Visual State Manager) 结合使用是非常常见的,动画用于管理对象在某段事件段内执行的动画动作,视图状态管理则用于控制对象在多个不同的视觉状态之间切换、导航。
802 0
Silverlight & Blend动画设计系列八:拖放(Drag-Drop)操作与拖放行为(DragBehavior)
原文:Silverlight & Blend动画设计系列八:拖放(Drag-Drop)操作与拖放行为(DragBehavior)   在Silverlight中自身并没有提供拖放功能的相关实现,要实现拖放功能得借助其事件支持(MouseLeftButtonDown、MouseLeftButtonUp和MouseMove)来完成,实际应用中我们可以通过行为(Behavior)特性将拖放操作封装为行为,这样可达到代码复用的效果。
1080 0

热门文章

最新文章