加载中

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 withImageTools, 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.

话说前几天我一个朋友跟我谈到一个特别的需求,想从Web上下载GIF图片过来然后在Windows phone 上显示。我们都知道Silverlight与Windows Phone都是不支持GIF图像格式的。如果你尝试去下载gif图片然后在Image控件上显示,你将会得到一个异常。

所以我在网络上找到了  ImageTools 库,这是个包含多种图像格式转换器的第三方库,其中就支持针对GIF格式的图像转换。
使用方式:
首先为你的项目添加此库的引用,如下图,我们使用NuGet来获取ImageTools
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.Control”

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.

为了达成我们的目标,这里需要两个部件:
1, AnimatedImage,它将替换掉标准的 Silverlight ImageControl。
2, ImageConverter,完成图片格式的转换。

这两个对象都是  ImageTools.Controls 命名空间下的,所以在XAML中也要申明命名空间

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


一旦已经引入了命名空间,那么就能将 converter 作为页面资源添加进来,如下代码所示
代码

当然如果希望这个converter能够在整个项目都能使用,那么你可以在  App.xaml 文件的 Application.Resources 节点添加此元素。


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:AnimatedImagex: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();
}
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.
好了,现在可以在页面添加AnimatedImage控件了,这里可以将控件的  Source 属性绑定为  Uri 对象,然后设置好 Image Converter 的引用。如下:

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

然后将 ImageSource 属性在后台C#代码中进行如下设定。

ImageSource = new Uri("http://www.nonstopgifs.com/animated-gifs/games/games-animated-gif-002.gif", UriKind.Absolute);

最后我们在页面的构造方法中添加这样一行代码来支持GIF解码的功能。

public MainPage()
{
    InitializeComponent();
    ImageTools.IO.Decoders.AddDecoder();
}
好了,编译一遍然后运行,你肯定能看到运动起来的GIF图片 
返回顶部
顶部