Some time ago I was talking with a friend that needed a special requirement for his application: displaying GIF images downloaded from the web. This image format is not supported by Silverlight nor Windows Phone: if you try to download and display a GIF image inside an Image control you’ll get an exception.
So I searched a little bit on the Internet to find a possible solution and I came out with ImageTools, a third party library that contains many converters and tools to convert one image from a format to another on the fly. One of the supported scenario is GIF images conversion (that can be animated, too) for Windows Phone.
Let’s see how to use it: the first thing is to add the library to your project and, as usual, the easiest way to do is with NuGet.
To use this library to achieve our goal we need to use two components:
- The first is a control called AnimatedImage, which is going to replace the standard Silverlight Imagecontrol. It’s the container that will display the image.
- The second is a converter called ImageConverter, which takes care of converting the image from one format to another.
Both objects are part of the ImageTools.Controls namespace, that should be declared in the XAML page where we’re going to use them.
xmlns:imagetools=”clr-namespace:ImageTools.Controls;assembly=ImageTools.Controls”
Once you have imported the namespace, you can add the converter as a resource for the page or, if you prefer, for the global application. Here is an example on how to do it for a single page:
<phone:PhoneApplicationPage.Resources>
<imagetools:ImageConverter x:Key="ImageConverter" />
</phone:PhoneApplicationPage.Resources>
If you want to make this resource globally available, you just have to declare it inside the Application.Resources section inside the App.xaml file.
Now you are ready to insert the AnimatedImage control into your page: you simply have to bind the Source property with a Uri object (which contains the URL of the gif image) and apply the Image converter.
Here is an example of the XAML declaration:
<StackPanel>
<imagetools:AnimatedImage x:Name="Image" Source="{Binding Path=ImageSource, Converter={StaticResource ImageConverter}}" />
</StackPanel>
And here, instead, is how the ImageSource property is defined in the code:
ImageSource = new Uri("http://www.nonstopgifs.com/animated-gifs/games/games-animated-gif-002.gif", UriKind.Absolute);
We’re almost done: the trick to make the “magic” working is to use one of the decoders that are available in the ImageTools library: these decoders take care of the conversion process and they should be initialized when the application or the page is created, specifying which is the image format to use. We are using this library for GIF conversion, so here is how to register the GIF decoder.
public MainPage()
{
InitializeComponent();
ImageTools.IO.Decoders.AddDecoder<GifDecoder>();
}
As I anticipated in the beginning of this post, this control supports animated GIFs too: if you try the example GIF used in this post you can see it by yourself.
xmlns:imagetools=”clr-namespace:ImageTools.Controls;assembly=ImageTools.Control”
This should actually be
xmlns:imagetools=”clr-namespace:ImageTools.Controls;assembly=ImageTools.Controls”
Thanks, the typo has been fixed!
Not working. Did everything you wrote step-by-step, but the gif is not visible. I also tried to use a local gif, but still no use.
What to do?
The only change i made is that i used the source as:
Uri ImageS = new Uri(“http://www.nonstopgifs.com/animated-gifs/games/games-animated-gif-002.gif”, UriKind.Absolute);
Hi, please download a sample project I’ve created from here: http://sdrv.ms/18E1raY
It works for me, let me know if you’re still having issues.
The code you provided is working fine. It has too many additions/changes as compared to what you have described here.
Also, the design view is throwing and exception. See here: http://sdrv.ms/18GVk5U
The example works for a gif from web. But, when a local path is passed, System.Net.WebException occurs. Any solutions for this?
Thanks.
Actually, the code in my post assumed that the developer already has a basic XAML and binding knowledge, so base concepts weren’t explained in details. I’m sorry for that.
Actually I think that the library works just for remote images, local images are not supported.
good afternoon, i tried it but i keep on getting an error . . . ‘imagetools’ is an undeclared prefix. Line 26, position 14.
I followed it step by step, though im not sure where to put all the stuffs . .
-noob here
Hi, you can download a sample project from here: http://sdrv.ms/18E1raY Take a look and see if it helps you.
the code works fine for 7.1 and even if i change the configuration to target 8.0 it upgrades and shows the same result but my project is 8.0 from beginning, so when i go for nuGet to install ImageTools it shows that 8.0 is not supported, cn you comment on it or lemmi know the newer version url of ImageTools
Thanks
Hi, ImageTools doesn’t officially support Windows Phone 8 and the NuGet package has never been updated to support it. For this reason, if you start from scratch with a new Windows Phone 8 project, you’ll have to manually download and install the library from http://imagetools.codeplex.com/. Anyway, Windows Phone 8 has added built in support for GIF images, so the procedure described in the post should be used only if you need to display animated GIFs (static GIFs are now natively supported by the Image control).
this actually downloads the gif from the internet. What i should do if want to refer the gif from my local?
Hi, as far as I know the library doesn’t support this scenario. Is it a Windows Phone 7 or 8 application? Because Windows Phone 8 has added built-in support to GIF images.
This come in very handy! Is there a way to make this conditional? I only want the decoder to run against GIF images and not other types. I have this implemented as described and it works, except that *only* GIF images are showing in the databound list – PNG, JPEG are not.