Over a million developers have joined DZone.

How to Display GIF Images in a Windows Phone Application

· Mobile Zone

Visually compose APIs with easy-to-use tooling. Learn how IBM API Connect provides near-universal access to data and services both on-premises and in the cloud, brought to you in partnership with IBM.

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.


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:

    <imagetools:ImageConverter x:Key="ImageConverter" />

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:

    <imagetools:AnimatedImage x:Name="Image" Source="{Binding Path=ImageSource, Converter={StaticResource ImageConverter}}" />

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


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.

The Mobile Zone is brought to you in partnership with Strongloop and IBM.  Visually compose APIs with easy-to-use tooling. Learn how IBM API Connect provides near-universal access to data and services both on-premises and in the cloud.


Published at DZone with permission of Matteo Pagani, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}