[Silverlight]讓Silverlight 顯示GIF 動態圖片

2010/11/18

這需求被提很久了..
但是我一直不想去解決..
畢竟我們家設計不弱…
但是最近合作廠商堅持…

Silverlight 原生不支援動態GIF …
所以今天這篇來解決動態讀取GIF的問題…

首先要介紹一套好用的套件  IMAGETOOLS
感謝社群的力量…
讓我們可以安心地享用…

下載完之後解壓縮完..
首先開啟一個專案
在左邊的ToolBox 案右鍵 選擇 "Choose Items"

sshot-149



選擇瀏覽

sshot-150

接下來選擇解完壓縮後的 SL4\ImageTools.Controls.dll

sshot-151


之後 ToolBox 會出現 幾個東西
AnimatedImage  還有 ImageEditorContainer
sshot-152

之後我們就把 AnimatedImage 拉到視窗裡面…

XAML Code 如下:


<UserControl x:Class="GIFDisplay.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="500" d:DesignWidth="500" xmlns:my="clr-namespace:ImageTools.Controls;assembly=ImageTools.Controls">

    <Grid x:Name="LayoutRoot" Background="White" Loaded="LayoutRoot_Loaded">
        <my:AnimatedImage HorizontalAlignment="Left"   Margin="35,59,0,0" Name="animatedImage1" VerticalAlignment="Top" Height="165" Width="250" />
    </Grid>
</UserControl>



專案必須要Includ 幾個dlll

sshot-153

其中包含
SL4\ImageTools.Controls.dll
SL4\ImageTools.dll
SL4\ImageTool.IO.Gif.dll

記得
using ImageTools.IO.Gif;

我在 LayoutRoot 加入了Loaded 事件 讓他啟動時載入圖片..

private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)
{
           //圖片來源:
           //http://www.wretch.cc/blog/off60
           

           ImageTools.IO.Decoders.AddDecoder<GifDecoder>();
           ImageTools.ExtendedImage imgt = new ImageTools.ExtendedImage();
           imgt.UriSource = new Uri("cola.gif", UriKind.RelativeOrAbsolute);
           animatedImage1.Source = imgt;

}


其中 ImageTools.IO.Decoders.AddDecoder<GifDecoder>(); 這一行很重要…
加入解碼方法..
讓他去讀取專案下面的 cola.gif

因為他版本改過很多我查一些論壇才知道問題在這…

效果如下:


讚一下



檔案下載

參考來源:
1.http://imagetools.codeplex.com/wikipage?title=Working%20with%20different%20image%20formats&referringTitle=Home
2.範例圖片來源為 http://www.wretch.cc/blog/off60 因為我很喜歡兔子 ..(羞


1 意見:

Rayson 提到...

謝謝你熱心&詳細的教學
對我幫助相當大~ 謝謝

程式 . 生活 . D小調.@2010 | Binary Design: One Winged Angel.