2011年6月28日火曜日

Show GIF images in Windows Phone applications

JPEG and PNG are supported by BitmapImage of Silverlight, but GIF is not supported. However, with ImageTools available at CodePlex, GIF images can be handled.

(1) Download ImageTools from CodePlex.

http://imagetools.codeplex.com/

The format of the binary + documentation package is .rar, so utility software that can extract RAR files is required.


(2) Add DLLs found in bin\Phone folder to your project as necessary.

ImageTools.dll
ImageTools.IO.Gif.dll
ImageTools.Utils.dll


(3) Register the GIF decoder in initialization code.

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


(4) Construct an ExtendedImage instance based on GIF data.

// Create an empty ExtendedImage instance.
ExtendedImage exImage = new ExtendedImage();

// Create an instance of GIF decoder.
GifDecoder gifDecoder = new GifDecoder();

// Get a stream of GIF data from somewhere.
Stream gifStream = ...;

// Interpret the stream as GIF and set the result
// to the ExtendedImage instance.
gifDecoder.Decode(exImage, gifStream);


(5) Use as BitmapImage.

// Get a BitmapImage instance from somewhere.
BitmapImage bitmap = ...;

// Specify the ExtendedImage constructed based on GIF data
// as source of the BitmapImage.
using (var stream = exImage.ToStream())
{
    bitmap.SetSource(stream);
}


The above is an example for the case where input GIF data is available as stream, but if available as Uri, it seems to be enough to simply set the Uri to UriSource property of ExtendedImage. A code example for that case can be found at the following.

http://imagetools.codeplex.com/documentation

A class named ImageConverter implementing IValueConverter is also provided. It seems to be able to be used in XAML files.


Windows PhoneアプリでGIFを表示する

Silverlight の BitmapImage では JPEG と PNG はサポートされているものの、GIF はサポートされていない。しかし、CodePlex で公開されている ImageTools を使用すると、GIF 画像を扱うことができる。

(1) ImageTools を CodePlex からダウンロードする。

http://imagetools.codeplex.com/

バイナリ+ドキュメントのパッケージが .rar 形式なので、RAR を扱える解凍ソフトが別途必要。


(2) 解凍後の bin\Phone フォルダ以下にある DLL のうち、必要なものを適宜プロジェクトに追加する。

ImageTools.dll
ImageTools.IO.Gif.dll
ImageTools.Utils.dll


(3) 初期化コードで GIF デコーダを登録する。

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


(4) GIF データをもとに ExtendedImage のインスタンスを構築する。

// 空の ExtendedImage のインスタンスを作成する。
ExtendedImage exImage = new ExtendedImage();

// GIF デコーダのインスタンスを作成する。
GifDecoder gifDecoder = new GifDecoder();

// GIF データのストリームをどこかから持ってくる。
Stream gifStream = ...;

// ストリームを GIF として解釈し、デコード結果を ExtendedImage にセットする。
gifDecoder.Decode(exImage, gifStream);


(5) BitmapImage として利用する。

// BitmapImage インスタンスをどこかから持ってくる。
BitmapImage bitmap = ...;

// BitmapImage のソースとして、GIF データをもとに構築した
// ExtendedImage を指定する。
using (var stream = exImage.ToStream())
{
    bitmap.SetSource(stream);
}


上記は、入力 GIF データがストリームとして得られる場合の例だが、Uri として得られる場合は、単純に ExtendedImage の UriSource プロパティに Uri を設定するだけでよさそう。その場合のコード例は次の場所にある。

http://imagetools.codeplex.com/documentation

IValueConverter を実装した ImageCoverter というクラスもあるので、XAML の中でも使えそう。