Blend 4 Beta: How to change image source as part of Timeline

Question

I'm trying out Blend 4 beta, and looking for a way to do a simple thing:

• When a mouse is hovered on an image, the image should change its source to a different image. When the MouseLeave happens, the image changes back.

I know I can do it in source code, but I'm looking for a code free way to do it, without hand coding xaml.

Blend 4 seems like the perfect fit. But I've tried to set this using Event Triggers that start stories, or using Visual States, but Blend does not seem to "remember" that the image source has changed. It remembers me changing other properties of the image (such as visibility, scale etc..) but Image source is what I'm after.

Is this a bug in blend, or am I doing something wrong?

Answer 1

One option is creating a custom action and attaching it to the image. It still involves code, but is kinda blendy.

public class ImageSwitchAction : TriggerAction<Image>   
{
    public ImageSource TargetImage { get; set; }
    protected override void Invoke(object o)
    {
        AssociatedObject.Source = TargetImage;
    }
}

After adding the class to your project and building, you can drag the new behavior to any image objects in the timeline, and configure the trigger and ImageSource in the action properties. In your case, add one action for MouseEnter and one for MouseLeave.