Question

How to begin a storyboard when a property binding changed ?

The source of my image change every 5s (in my ViewModel), and I want play a storyboard when the image is changing.

<Grid>
   <Image x:Name="image" Source="{Binding CurrentImage}"/>       
</Grid>

Answer 1

You would typically add an EventTrigger for an event that gets fired whenever the Source property changes. Unfortunately the Image control does not define such an event, so you would have to create your own by deriving from Image:

public class MyImage : Image
{
    public static readonly RoutedEvent SourceChangedEvent = EventManager.RegisterRoutedEvent(
        "SourceChanged", RoutingStrategy.Direct, typeof(RoutedEventHandler), typeof(MyImage));

    static MyImage()
    {
        Image.SourceProperty.OverrideMetadata(typeof(MyImage), new FrameworkPropertyMetadata(SourcePropertyChanged));
    }

    public event RoutedEventHandler SourceChanged
    {
        add { AddHandler(SourceChangedEvent, value); }
        remove { RemoveHandler(SourceChangedEvent, value); }
    }

    private static void SourcePropertyChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e)
    {
        Image image = obj as Image;
        if (image != null)
        {
            image.RaiseEvent(new RoutedEventArgs(SourceChangedEvent));
        }
    }
}

Now you could use the SourceChanged event in an EventTrigger:

<local:MyImage Source="{Binding Image}">
    <local:MyImage.Triggers>
        <EventTrigger RoutedEvent="local:MyImage.SourceChanged">
            <BeginStoryboard>
                <Storyboard>
                    ...
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </local:MyImage.Triggers>
</local:MyImage>