How to display GIF images in a Windows Phone application

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.

This entry was posted in Windows Phone and tagged . Bookmark the permalink.

14 Responses to How to display GIF images in a Windows Phone application

  1. xmlns:imagetools=”clr-namespace:ImageTools.Controls;assembly=ImageTools.Control”

    This should actually be
    xmlns:imagetools=”clr-namespace:ImageTools.Controls;assembly=ImageTools.Controls”

  2. Siddhant says:

    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?

    • Siddhant says:

      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);

      • qmatteoq says:

        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.

        • Siddhant says:

          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.

          • qmatteoq says:

            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.

  3. Gerardo says:

    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

  4. Kaleem Ullah says:

    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

    • qmatteoq says:

      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).

  5. Mohammed Safiq says:

    this actually downloads the gif from the internet. What i should do if want to refer the gif from my local?

    • qmatteoq says:

      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.

  6. Robert says:

    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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.