Animated Gifs with Imagetools, in WP7 c#

Question

Well, This has been solved. I don't know if it was a glitch on my end or if ImageTools was just a pain to set up accordingly. Thank you for the answers everyone, and they very likely all work. The once I marked as answered does indeed work, BUT HERE IS HOW:

(Credits go to Patrick for sticking with this, and his code is used as noted below.)

(Also, big thanks to everyone else too who submitted something. Sorry if my noobness scared you all away)

To get an animated Gif to work in your wp7 7.1 app, do these steps:

1) Download ImageTools (I used latest version at the time (0.3)) http://imagetools.codeplex.com/downloads/get/156530

2) Unstuff the file, and in the "Bin > Phone" folder just throw ALL* the dll file extensions into your wp7 app folder. The other files (xml/pdb) don't need to be added. (*this step is extra work, and we will be removing these extra dlls later on, but hell it'll save a headache.)

3) Add the references to your wp7 app in the Solution Explorer window > References folder drop down. To do that, right click the References folder, click "Add Reference" and browse to the dll files. Repeat this process. (Referencing all those dlls is 1 minute of the extra 2 mins of work ultimately, but you shouldn't get any errors when compiling)

4) Now on the xaml page you want to add the image to, add this at the top in your header code:

xmlns:it="clr-namespace:ImageTools.Controls;assembly=ImageTools.Controls"
xmlns:vm="clr-namespace:GifViewer.ViewModels"

NOTICE: Change "GifViewer" to your application name.

5) On that same page, just below it, add in this code:

<phone:PhoneApplicationPage.DataContext>
    <vm:MainViewModel/>
</phone:PhoneApplicationPage.DataContext>

<Grid x:Name="LayoutRoot" Background="Transparent">
    <it:AnimatedImage  Source="{Binding AnimationImage}" />
</Grid>

NOTICE: Doesn't have to be a grid. Doesn't have to be in anything at all. It can stand alone.

6) The accepted answer has a folder in the app called "ViewModels" and in it is a custom class titled "MainViewModel" So in the solution explorer or in the desktop, add a folder called ViewModels and make a c# class page titled MainViewModel. Move that into that folder, and refresh the solution explorer. If you cannot see the file, you need to click the "Show all files" button just under the Solution Explorer Header.

7) Using the accepted answer below, in the "MainViewModel.cs" class page, add the following just below the others:

using ImageTools;
using ImageTools.Controls; 
using ImageTools.IO;
using ImageTools.IO.Gif;

8) The accepted answer uses this code. Change "GifViewer" to your application name when copying this code, and also change the Uri location of the gif. In my example, I have a folder named "Gif" and in it is "explosion.gif". Build Action can be kept as Resource by default.

namespace GifViewer.ViewModels {
    public class MainViewModel : DependencyObject {
        public MainViewModel() {
            Decoders.AddDecoder<GifDecoder>();
            Uri uri = new Uri("Gif/explosion.gif", UriKind.Relative);
            ExtendedImage image = new ExtendedImage();
            // either of these two method work.
            // Just remove the first / to switch
            //*
            image.LoadingCompleted +=
                (o, e) => Dispatcher.BeginInvoke(() => AnimationImage = image);
            image.UriSource = uri;
            /*/
            Stream stream = Application.GetResourceStream(uri).Stream;
            GifDecoder decoder = new GifDecoder();
            decoder.Decode(image, stream);
            AnimationImage = image;
            /**/
        }

        public static readonly DependencyProperty AnimationImageProperty =
            DependencyProperty.Register("AnimationImage",
                typeof(ExtendedImage),
                typeof(MainViewModel),
                new PropertyMetadata(default(ExtendedImage)));

        public ExtendedImage AnimationImage {
            get { return (ExtendedImage)GetValue(AnimationImageProperty); }
            set { SetValue(AnimationImageProperty, value); }
        }
    }
}

Go ahead and compile. You might get a runtime error indicating that couldn't load, but running the application should get rid of it.

Your gif should now play.

9) Start removing the EXTRA dll references which aren't needed (the other minute of the 2 mins of extra work). Basically, all you want referenced is:

ImageTools
ImageTools.Controls
ImageRools.IO.Gif 

ImageTools.Controls might not even be needed, but the file size is like 25kb and honestly I couldn't get the gif to show if I removed it.

There you go!

---

Original Question I asked

I am having the worst headache trying to get my animated gif to play in my WP7 app. I simply cannot connect the dots to make this happen, despite having imagetools and viewing the current "solutions" on stackoverflow/the web.

My problem is outlined below, but for reference I have looked at: Display GIF in a WP7 application with Silverlight and http://blog.naviso.fr/wordpress/?p=733

So how does one actually set this blasted thing up to display animated gifs in a wp7 app!? Question in specific -- Is this the correct code to get my animated gif to appear? If not, what below needs to be fixed?

My animated gif file location on the phone (NOT from internet):

Gif/explosion.gif

Main Xaml page:

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

<phone:PhoneApplicationPage.Resources>
        <imagetools:ImageConverter x:Key="ImageConverter" />
</phone:PhoneApplicationPage.Resources>

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

and the code behind for the xaml page:

public partial class MainPage : PhoneApplicationPage
{
 using ImageTools;
 using ImageTools.Controls;
 using ImageTools.IO.Gif;

 public MainPage()
    {
        InitializeComponent();
        ImageTools.IO.Decoders.AddDecoder<ImageTools.IO.Gif.GifDecoder>();
    }


 public void eventtofiretoshowexplosion_gif(object sender, MouseButtonEventArgs e)
 {
   // A main problem -- this code doesn't work by itself, as what is the ImageSource!?
   // It cannot be used as a variable it says.
   // animationgif.ImageSource does not work at all (not a method).
   ImageSource = new Uri("http://mysite/my.gif", UriKind.Absolute);
 }
}

This has been bugging me for the past few hours, and I really could use some help with this. If there is a quick fix to this, please help out and show how it is done instead of guiding me to a page. I've seen FAR too many pages about this, and while each one claims to work, it just cannot in my app.

Answer 1

It seems the Build Action of your image is incorrect, so the application can't "find" the resource.

You have two options. Either set the build action to content, or set it as resource and specify "copy if newer".

• Open your solution explorer
• Open your properties window
• Click on your image
• Set Build action to Resource and Copy to output directory Copy if newer

Further reading: Resources in WPF – I (Binary Resources)

---

I put together a small example using a viewmodel which seems to work given the above resource "requirement". I hope you might find it useful. The viewmodel class is in a folder called ViewModels.

using System;
using System.IO;
using System.Windows;
using ImageTools;
using ImageTools.IO;
using ImageTools.IO.Gif;

namespace GifViewer.ViewModels {
    public class MainViewModel : DependencyObject {
        public MainViewModel() {
            Decoders.AddDecoder<GifDecoder>();
            Uri uri = new Uri("Gif/explosion.gif", UriKind.Relative);
            ExtendedImage image = new ExtendedImage();
            // either of these two method work.
            // Just remove the first / to switch
            //*
            image.LoadingCompleted +=
                (o, e) => Dispatcher.BeginInvoke(() => AnimationImage = image);
            image.UriSource = uri;
            /*/
            Stream stream = Application.GetResourceStream(uri).Stream;
            GifDecoder decoder = new GifDecoder();
            decoder.Decode(image, stream);
            AnimationImage = image;
            /**/
        }

        public static readonly DependencyProperty AnimationImageProperty =
            DependencyProperty.Register("AnimationImage",
                typeof(ExtendedImage),
                typeof(MainViewModel),
                new PropertyMetadata(default(ExtendedImage)));

        public ExtendedImage AnimationImage {
            get { return (ExtendedImage)GetValue(AnimationImageProperty); }
            set { SetValue(AnimationImageProperty, value); }
        }
    }
}

and the xaml

<phone:PhoneApplicationPage 
    x:Class="GifViewer.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:it="clr-namespace:ImageTools.Controls;assembly=ImageTools.Controls"
    xmlns:vm="clr-namespace:GifViewer.ViewModels"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <phone:PhoneApplicationPage.DataContext>
        <vm:MainViewModel/>
    </phone:PhoneApplicationPage.DataContext>

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <it:AnimatedImage  Source="{Binding AnimationImage}" />
    </Grid>
</phone:PhoneApplicationPage>

Answer 2

When using AnimatedImage your source binding has to return ExtendedImage. ExtendedImage class is basically the "BitmapImage" equivalent of the normal Image control.