I recently had a visitor to my blog who came here looking for the ability to translate an animated GIF to XAML.

My first thought without digging was, “Couldn’t one just pull the image in, create a shape, and fill the shape with an imagebrush with the animated gif?”

The thought was to try something like this:

<Rectangle Margin=”102,36,242,33″ >
<Rectangle.Fill>
<ImageBrush ImageSource=”animated.gif” />
</Rectangle.Fill>
</Rectangle>

The answer which I discovered pretty quickly when trying to accomplish just that was: Nope. No can do. It’ll load and it won’t even see that there is a problem, but the animated gif will not display.

An alternative to this wouldn’t be TOO terribly difficult though. Pull the GIF into illustrator and obtain all of the frames separately. Once you’ve accomplished that, exporting to XAML and bringing it all together is easily done.

Oh, quick note to mention – the Illustrator export tool has a hidden functionality mentioned in the video interview – that hidden functionality is while exporting to XAML, if you hold down the left shift key when you tell it to perform the export, the actual XAML will also hit your clipboard to be pasted directly in already existing XAML document.

Pretty spiffy!

Back to the topic on Animated GIFs to XAML:

Once you have each frame in XAML, you will need to add all of the elements into your xaml and I’d go with a step of collapsing all canvases until needed. Open the keyframe animator, and then depending on the timeline from the original GIF, you can plot each item to become visible or collapsed. Blend will automatically add a trigger for the application to run the animation on load, so if you want it to start by use with a button, you’ll need to modify that – also, most GIFs are set to repeat forever, so you’ll need to update the repeat behavior to loop infinitely.

Once someone has done it a time or two, I’d put a guess on the work taking between 20-30 min for the full translation. between GIF to XAML animation.