Wednesday, July 29, 2009

Using ChangePropertyAction to fade in loaded Images

by Adam Kinney via Adam Kinney on 7/29/2009 6:10:00 PM

When your application loads images from a remote server, due to file size or lack of bandwidth, the images may not instantly be displayed.  And when they do show up, they pop into place in a random way decided by download order.  This is especially noticeable when you are displaying a collection of images, for example a photo gallery or a list of screenshots.

In the application I’m currently working on, I wanted to improve the loading experience of the screenshots. I thought a simple Fade In style transition would help make it less startling for the user.

The Image control in Silverlight has an ImageOpened event which fires when the source has been downloaded and is perfect for what I am trying to accomplish. The traditional way for me to handle this event would be to attach an EventHandler, so that when the event fires I could kickoff an animation to Fade In the Image.

This method is effective but it involves coding and is more complicated when dealing with dynamically generated images, like a list of screenshots.

WHAT else could I possibly do?

Bring in help from Blend 3 Behaviors, Actions and Triggers.

Essentially I’m looking to change the Opacity property of my Image when the ImageOpened event Triggers.  To accomplish this I open the Assets Panel, navigate to the Behaviors section and drag a copy of the ChangePropertyAction onto my image.  Once that’s done I am presented with the Properties panel pictured to the right.

• SourceName – the name of the element, in this case my imageControl
• EventName – a dropdown of the events available for that control
• TargetName – name of the element to change, notice I could affect another element
• PropertyName – a dropdown of properties based on the target element
• Value – the value you want the property to change to, here its smart enough to know Opacity can be represented by a percentage
• Duration – time taken to change the property, the default is Automatic which results in no time, but you can specify the time by using regular media format (hh:mm:ss)
• Ease – here you can use the built in easing methods, which are like the familiar Penner equations.

And that’s it.

Once those Properties are set, the Image control will now Fade In when downloaded. No code needed and it works very well with DataTemplates for dynamically generated lists.

Pictured below the Properties Panel you can see a screenshot to the right of a very basic sample demonstrating how to use the ChangePropertyAction.  Click the Rectangle below and you will see the large image of the El Capitan Theatre curtain Fade In using the method described above.

The more I build with Blend and Silverlight 3, the more I keep thinking in my head:

“There’s a behavior for that.”

See the ChangePropertyAction sample in action

Download Source