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

easy way:

first, subscribe the events of your image mouse enter and mouse leave then in this events

use image.setsource(new Uri(new image url)) to set the image source for each event

if u have troubles i can post real code here latter

regards Rui

Answer 2

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.