Using the ChangePropertyAction
       by kirupa  |  26 April 2010

So much of what you do to your elements involves changing properties. Setting some text, changing the background color, adjusting the width/height, etc. all involve taking something that was once default and customizing it to suit your own needs.

While customizing properties is something Expression Blend allows you to shine at, its influence doesn’t go beyond the artboard. If you want to change the properties of something in a running application, you probably have to write some code or do some other tasks that you may not like.

To make it easier for you to change properties at runtime, we created a simple behavior called ChangePropertyAction. Below is an example of a small application that uses ChangePropertyAction to toggle the visibility of some text:

Click on the Hide or Show buttons to hide or show the text. Notice that the text disappears or appears with a slight easing function that provides that jittery, flickering look.

What is it?
The ChangePropertyAction is a behavior of type Action (more specifically TargetedTriggerAction), that allows you to trigger a change to an element’s property and optionally define a transition:

[ all of the properties in their full glory ]

Let’s look at some of the properties in greater detail.

Using It
This action contains only a handful of properties that you need to set in order to make it all work. With the TargetName property, you can pick the element whose property you want to change. By default, it will be the element that this action is attached to.
The PropertyName property gives you a list of all properties the element referenced by TargetName contains:

[ the PropertyName values depend on the element you have targeted ]

Depending on which property you select for PropertyName, the editor you see for Value will vary. For example, because the Fill property takes a Brush value, you see the appropriate Brush editor displayed:

[ the Fill property displays a cool Brush editor ]

If select a less exciting property such as Opacity, I see the less ornate number editor:

[ the Opacity property displays a simple range editor instead ]

As long as you set the PropertyName and set the appropriate Value, you pretty much figured out everything you can do with the ChangePropertyAction. The only optional thing you can do is specify a transition to make your property changes a bit more interesting.

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:

[ you can specify the ease to apply for the property change ]

The Duration property takes time values in terms of Hours:Minutes:Seconds.Milliseconds, so to animate something for 1 second, you would use 00:00:01:00. Similarly, for .2 seconds, you would use 00:00:00.2. For 2 milliseconds, you would use 00:00:00.02.

Just note that not all properties can be animated. For example, if you have a property whose values can either be True or False, having a transition between them does not make a lot of sense. On the other hand, animating the opacity or Width of an element will work though.

Conclusion
Well, there you have it. This is the ChangePropertyAction - an action that allows you to change a property when triggered. If you are curious to see how my example was created, feel free to download the Expression Blend 4 source file below:

Download Source Files