天天看點

[Silverlight][Expression Blend]我也不用寫程式 - 透過ChangePropertyBehavior動态改變DataTemplate中資料的呈現方式

<a href="http://www.dotblogs.com.tw/ouch1978/archive/2011/07/01/sl-changepropertyaction.aspx">http://www.dotblogs.com.tw/ouch1978/archive/2011/07/01/sl-changepropertyaction.aspx</a>

如果是行動派的朋友,真的去建個Silverlight專案,并且試着在DataTemplate下想去存取它的Triggers屬性時,應該會發現–咦!!!? Silverlight的DataTemplate裡沒有Triggers這個屬性可以用!!!!

廢話不多說,馬上來和大家分享作法~

我自己建立的資料如下(用來顯示學生國文、英文、數學三個科目的成績):

<a href="http://files.dotblogs.com.tw/ouch1978/1107/SilverlightBlend_E92A/image_2.png" target="_blank"></a>

而我将ListBox的ItemsTemplate修改如下:

前置作業到此算告一段落,接着我想做的是:三個科目的成績如果不及格,則分數以紅色顯示 , 及格則以綠色顯示 ,另外, 如果三科都及格,則會顯示出All Pass 。

接着就輪到這次的主角ChangePropertyAction出場啦!!ChangePropertyAction可以在Assets面版中的Behaviors分類中找到,因為我們想要依照分數來決定文字的顔色,且分為及格與不及格,是以請直接以滑鼠拖拉一個ChangePropertyAction到用來顯示分數的TextBlock控制項裡。

下一步,請先點選剛剛加入的ChangePropertyAction,并且移動注意力到它的Properties面版,會看到如下的預設值:

<a href="http://files.dotblogs.com.tw/ouch1978/1107/SilverlightBlend_E92A/image_12.png" target="_blank"></a>

接着我們就要來處理當分數及格的時候,分數要改以綠色顯示的部份;因為我們需要透過值的内容改變當作觸發條件,我們必需把預設的EventTrigger改為DataTrigger,請點選TriggerType右方的New按鈕,并且選取DataTrigger後,按下Ok按鈕。

接着請按下Binding欄位右方的Data bind圖示,并且選取要用來當作Trigger的系結屬性 (以我的例子來講,現在要處理的系結屬性是Grades.Chinese,直接選取它,并且按下Ok鈕即可)。

因為及格的是大于等于六十分,是以我們得在Trigger分類中Comparison下拉選單中把預設的Equal改為GreaterThanOrEqual ,并且把Value的值改為60 。

接着我們要來設定當條件符合時要修改的屬性值,在Common Properties分類中的PropertyName下拉選單中選取Foreground , Value則利用顔色選取器選取綠色 ,到這邊為止,我們完成了第一組的設定 。

<a href="http://files.dotblogs.com.tw/ouch1978/1107/SilverlightBlend_E92A/image_23.png" target="_blank"></a>

再來我們得處理不及格的部份,可以簡單的将剛剛設定好的ChangePropertyAction複制一份,貼回同一個控制項中,并且修改Trigger分類下的Comparison 值為 LessThan ,接着把Common Properties分類下的Value改為紅色 。

重複以上的流程,處理好另外兩個分數的部份之後,接着就是另一個重點啦~如果三個分數都及格的話,得顯示All Pass的字樣;一樣,我們得為txtPass也加入ChangePropertyAction。 不過這次不一樣的是,我們這次要透過EventTrigger來控制它~而且我希望在該控制項被戴入時就去進行判斷,是以我們得把Trigger分類中的EventName改為Loaded 。

接着請打開Conditions分類的面版,并且保持一顆清醒的頭腦,因為接下來的動作比較複雜喔!!打開Conditions分類面版後,按下右上方的Add Condition圖示。

<a href="http://files.dotblogs.com.tw/ouch1978/1107/SilverlightBlend_E92A/image_35.png" target="_blank"></a>

接着要進行的動作跟之前設定DataTrigger的部份很相似,我們得針對三個分數的系結分别做設定:如下圖,點選Advanced options圖示-&gt;于下拉選單中點選Data Binding.. .并且選取要用來判斷的系結屬性。

再來一樣是老樣子,我們得把Equal改成GreaterThanOrEqual ,并把下面的Value值輸入為60 ,并且重複以上步驟,直到針對三個分數的系結都完成設定( 請注意Conditions分類面版中有個Match下拉選單,可以用來決定要所有條件都符合才會觸發,還是任一條件符合就觸發ChangePropertyAction ) 。

再來,當三個條件都成立的話,我們就得讓All Pass顯示出來,是以我們要修改的是Visibility屬性。

<a href="http://files.dotblogs.com.tw/ouch1978/1107/SilverlightBlend_E92A/image_53.png" target="_blank"></a>

Ok,到這邊為止,我們完成的All Pass顯示與否的一半了,再來一樣把剛剛設定好的ChangePropertyAction複制一份到txtAllPass下。

<a href="http://files.dotblogs.com.tw/ouch1978/1107/SilverlightBlend_E92A/image_55.png" target="_blank"></a>

接着要修改的部份可得小心仔細喔!!再來我們要針對剛才複制好的ChangePropertyAction做以下的修改:将Match下拉選單的值改為any (因為任何一科不及格就不是All Pass啦~)、将三組ComparisonCondition的比較條件改為LessThan ,最後将Visibility的值改為Collapsed 。

<a href="http://files.dotblogs.com.tw/ouch1978/1107/SilverlightBlend_E92A/image_57.png" target="_blank"></a>

Ok~做到這邊,就大功告成啦!!趕快來看看成果吧!!(有跟着做的同學們,有沒有很有成就感啊!?)

最後奉上專案原始碼,請自行取用:

<a href="http://files.dotblogs.com.tw/ouch1978/1107/201174151327551.rar" target="_blank"></a>

繼續閱讀