Show GIF Images in Windows Phone 7.1

This article discusses how to load .gif extension images in Windows Phone 7.1. As we all know Windows Phone 7 supports .jpg and .png images, so this article will be very helpful if you want to show .gif images.

Getting Started

Create a Windows Phone Application using the following:

1. Open Visual Studio 2010.
2. "File" -> "New" -> "Project..."
3. Select "Silverlight for Windows Phone" from the Installed templates and choose "Windows Phone Application"
4. Enter the name and choose the location.
5. Click "OK".

First of all right-click on Solutions Explorer and click "Manage NuGet Packages..." and search by name for ImageTools and click "Install".



Image 1.



Image 2.

As you can see, after installing it has added a few assemblies in your reference folder.



Image 3.

Let's work on the UI part now.

First of all the following add namespace of image tools in the .xaml file:

xmlns:imagetools="clr-namespace:ImageTools.Controls;assembly=ImageTools.Controls"

Now add the following image convertor resource:

<phone:PhoneApplicationPage.Resources>

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

</phone:PhoneApplicationPage.Resources>

Now add this:

  <!--ContentPanel - place additional content here-->

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

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

        </Grid>

Now let's work on the code part.
 

using Microsoft.Phone.Controls;

using ImageTools.IO.Gif;

using System.Windows.Media.Imaging;

using Microsoft.Xna.Framework.Media;

using System.IO;

using System.Text;

using ImageTools;

using System.Threading;

using System.Windows.Data;

 

// Constructor

        public MainPage()

        {

            InitializeComponent();

            ImageTools.IO.Decoders.AddDecoder<GifDecoder>();

            ImageSource = new Uri("http://i1118.photobucket.com/albums/k607/Ashe-kun/9285a6048c8a769fba5d.gif", UriKind.Absolute);

            this.DataContext = this;

        }

        public Uri ImageSource { get; set; }   

Finally run the application to see the result.



Image 4.

For more information, download the attached sample application.