In this post I will show you how you can use the ChangePropertyAction behavior of the silverlight 4. The ChangePropertyAction is used to change the property of the control You can use the ChangePropertyAction behavior to easily either change or increment the property of an object and then, optionally, define a transition. By default, the transition is instantaneous.(Source). Now let us start our example. Below is the my main screen which consist of 2 slider control, one progress bar and two text block control. The first slider control which is used to set the style change limit for the second progress bar control, is also bind with the text block which is next to the that slider control, the text block will show the value or you can say the style change limit , the default will be 55 which I have set for the first slider control, The first slider control value is also bind with the ChangePropertyAction behavior which I will discuss later in this post.
 |
| Image 1 |
Next is another slider control which is used to change the Progress bar value and the value of the second slider control is also bind with the ChangePropertyAction behavior and I also with the value of the progress bar value, the last control which is the progress bar control is used to style of the progress bar depending on the value of the first slider control and the comparing it with the second slider control value. These are the functionality and control used in this example. Now lets us start the code which is used in this source code.
How to Add the ChangePropertyAction:
To add the changePropertyAction to your control you just need to drag the ChangePropertyAction from behavior to the control to which you want to change the property. Open the project in expression blend and click on the Assets panel and then click on the behaviors and you will see number of build-in behavior which are provided. Now select the ChangePropertyAction behavior and drop it on the progress bar control as I want to change the style property of the progress bar to be change to the different style.
 |
| Image 2 |
When you drag and drop the ChangePropertyAction to a control you will see the default properties of the ChangePropertyAction as shown in the Image 3, here you can see that in the trigger TriggerType is the EventTrigger, SourceObject is the name of the control on which the ChangePropertyAction is drop to( in this case the progress bar control), and Event name is the MouseLeftButtonDown.
 |
| Image 3 |
If you look at the common properties you can see following properties in this area. The targetObject which is again the progress bar control as I have drop the ChangePropertyAction on to the progress bar control.Second is the the optional thing you can do is specify a transition to make your property changes a bit more interesting. which is unchecked by default when you drop the ChangePropertyAction to the control. And the last thing is the PropertyName which is empty selected by default.The Animation Properties category contains the Duration and Ease properties that allow you to set how long your transition will run for and what kind of easing effect you wish to apply, as you can see in the Image 3.
As I need to check the value of the data property and then change the style of the progress bar control. So I don't need the EventTrigger here , I need to add the DataTrigger, click on the New button in front TriggerType and you will see in the Image 4.
 |
| Image 4 |
Here you can see the number of Trigger type grouped by their functionality. As I need to check the data so I will click on the DataTrigger and the OK button is enable and click on the OK button and the DataTrigger is displayed in front of the .TriggerType and the EventName dropdown is replaced with the comparison and value properties. The comparison drop down contain the equal , not equal, less then, greater then, less then equal to, greater then equal to options.What I want is to check the value of the progress bar control to the value of the limit slider control. So in the Binding property I have bind it to the value property of the progress bar control and Select Greater then or equal to option in the comparison option drop down. and then again I have bind the value property to the value of the style limit slider control. This is my condition to change the style of the progress bar control. Next to what action to take when the above condition meet.
 |
| Image 5 |
For this I have Select the PropertyName to style as I want to change the style of the of the progress bar and then assigned new style by clicking on the small rectangle in front of the text box of the value and then select the local resource as I have two style define for the progress bar in my resource one is the default and second one is the red, here I have selected the red style for the progress bar. The final properties for the ChangePropertyAction can be seen in the Image 5. I have create two ChangePropertyAction one which is used to change the style of the progress bar to red at certain limit and the second one which is use to change it to the original value when the progress bar value is less then the limit value.
You can download the source code from here
All and any comments / bugs / suggestions are welcomed!
No comments:
Post a Comment