如何在WP 7中使用gif动画图像

Question

I have seen this post: Display GIF in a WP7 application with Silverlight

But in my case? for animating I am using a popup. So when application starts it shows a popup for 5 seconds. In this popup I want to show some .gif image, but it doesn't work.

Here is the code which I implement:

    public partial class AnimatedSplashScreen : UserControl
    {
        protected Uri ImageSource
        {
            get;
            set;
        }
        public AnimatedSplashScreen()
        {
            InitializeComponent();
           ImageSource =
                new Uri(
                    "http://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Sunflower_as_GIF.gif/200px-Sunflower_as_GIF.gif",
                    UriKind.Absolute);
            ImageTools.IO.Decoders.AddDecoder<GifDecoder>();

        }

And xaml code is:

<UserControl.Resources>

        <imagetools:ImageConverter x:Key="ImageConverter" />
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot"
          Width="480"
          Height="800"
          Background="White">
        <imagetools:AnimatedImage Source="{Binding ImageSource, Converter={StaticResource ImageConverter}}"  />

But in result it does't work, it shows an empty background.

Updated: ImageTools.IO.Decoders.AddDecoder(); ImageSource = new Uri(" http://a3.twimg.com/profile_images/1136683647/hisoka_normal.gif ", UriKind.Absolute); It still doesn't work

Answer 1

Finally working... Talk about events conspiring against you... You need to fix all these things first!

(note there is a following problem with only the first 2 frames being animated but that is for another question) :

Part 6 (getting sleepy now)

Lastly relative image URLs starting with "/" are not supported by the ImageTools.Controls.ImageConverter , so you need to use a relative URL without the leading "/". I found that once every other problem was fixed I was getting an unsupported exception with the path.

        ImageTools.IO.Decoders.AddDecoder<GifDecoder>();
        InitializeComponent();
        this.ImageSource = new Uri("layer1.gif", UriKind.Relative);
        this.DataContext = this;

Part 5

You need to set the binding DataContext somewhere.

You do not connect the XAML page DataContext to the code behind object. I could not see where you had done this. A very simple/quick way is to set this.DataContext = this; in the page's constructor.

Part 4

You can only bind to public properties!

Your ImageSource property is currently protected. Change it to Public

    public Uri ImageSource
    {
        get;
        set;
    }

Part 3

I also note your ImageSource property is not an INotifyPropertyChange type property. So setting it after InitializeComponent will not work.

Try it this way round (or change it to use a notify property):

public AnimatedSplashScreen()
{
   ImageSource =
        new Uri(
            "/200px-Sunflower_as_GIF.gif",
            UriKind.Relative);
    ImageTools.IO.Decoders.AddDecoder<GifDecoder>();
    InitializeComponent();
}

Part 2 (actually not support by ImageTools.Controls.ImageConverter)

The cross domain file was apparently only one problem. Based on the comments you also need to store your images on your own website and reference them with an appropriate URI format.

If you put your files in a folder called images under ClientBin you use this format:

"/images/imagename.jpg"

This is the best option as the images also use Browser caching!

For your example it would be like this:

    ImageSource =
                new Uri(
                    "/images/200px-Sunflower_as_GIF.gif",
                    UriKind.Relative);
            ImageTools.IO.Decoders.AddDecoder<GifDecoder>();

and put the example file in your client bin folder under images.

If you do not use the leading "/" Silverlight assumes the files are resources in the current module instead eg

"images/imagename.jpg"

Part 1

This is actually a copyright issue, to stop people deep-linking files from other people's sites without permission.

The Wikimedia.org site does not have any cross domain access files eg:

• http://upload.wikimedia.org/crossdomain.xml
• http://upload.wikimedia.org/crossdomainpolicy.xml
• wikimedia.org/crossdomain.xml
• wikimedia.org/crossdomainpolicy.xml

... presumably as they do not want others to use the files they host there outside of their own website.

That means Silverlight will not allow access to files on those sites as it is a good Internet citizen . Try hosting the files on your own site (where your Silverlight app resides), then it will not need any cross domain access file at all.

Side note: If you do ever need a cross domain file on a website, for use by Silverlight, use a crossdomainpolicy.xml as the other one is not as useful (designed for older flash use)