How do I animate image content in WPF?

Question

I have a really basic user control with a button that has an image. I want to animate the image of the button, by changing it to a different image.

Answer 1

This is probably not the best (or easiest) way to go about this. The Content property is definitely not what the WPF designers had in mind for animations. Here is how I would do this instead:

1. Set the Button.Content to be a Grid with both of the images placed inside (thus, overlaying each other).
2. Set the Opacity on the Image you want to be initially visible to 1.0 and 0.0 on the Image to be initially hidden.
3. Animate the Opacity using a DoubleAnimation rather than an ObjectAnimation- you can switch the images by animating one's opacity down to 0.0 while simultaneously bringing the other one up to 1.0. Furthermore, depending on the duration, this will gave you a nice fading transition.