在WPF顯示動態GIF圖片

WPF中是不支持直接預覽GIF圖片的

<Image Source="1.gif"/>

上面這種用法是預覽的GIF圖片是靜止不動的。

通過使用WpfAnimatedGif我們可以在WPF應用程序中預覽、控制GIF圖片。

WpfAnimatedGif的gitbub地址
https://github.com/XamlAnimatedGif/WpfAnimatedGif

WpfAnimatedGif的使用方法
https://github.com/XamlAnimatedGif/WpfAnimatedGif/wiki

通過NuGet引入包

xaml中使用

1. 聲明xml命名空間

xmlns:gif="http://wpfanimatedgif.codeplex.com"

2. 在Image控件中，使用ImageBehavior.AnimatedSource代替Source

<Image gif:ImageBehavior.AnimatedSource="1.gif"/>

以下是完整代碼：

<Window x:Class="Gif.GifWindow"
        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"
        xmlns:local="clr-namespace:Gif"
        xmlns:gif="http://wpfanimatedgif.codeplex.com"
        mc:Ignorable="d"
        Title="GifWindow" Height="450" Width="800">
    <Grid>
        <Image gif:ImageBehavior.AnimatedSource="1.gif"/>
    </Grid>
</Window>

運行后就可以看到效果了。

如果想在設計狀態下就看到效果，只需將ImageBehavior.AnimateInDesignMode屬性設置為true

可以在window元素中設置，控制整個window內部所有Image控件

<Window x:Class="Gif.GifWindow"
        xmlns:gif="http://wpfanimatedgif.codeplex.com"
        gif:ImageBehavior.AnimateInDesignMode="True">

也可以在Image元素內設置，只控制該元素

<Image gif:ImageBehavior.AnimatedSource="1.gif" gif:ImageBehavior.AnimateInDesignMode="True"/>

設置ImageBehavior.RepeatBehavior屬性控制播放行為

<!--播放3次-->
<Image gif:ImageBehavior.AnimatedSource="1.gif" gif:ImageBehavior.RepeatBehavior="3x"/>

<!--播放10秒-->
<Image gif:ImageBehavior.AnimatedSource="1.gif" gif:ImageBehavior.RepeatBehavior="0:0:10"/>

<!--永久播放-->
<Image gif:ImageBehavior.AnimatedSource="1.gif" gif:ImageBehavior.RepeatBehavior="Forever"/>

<object property="iterationCountx"/>

-or-

<object property="[days.]hours:minutes:seconds[.fractionalSeconds]"/>

-or-

<object property="[days.]hours:minutes"/>

-or-

<object property="days"/>

-or-

<object property="Forever"/>

該屬性的默認值為0x，表示使用GIF圖片自身的信息。
以上所有屬性都支持使用綁定的方式設置。

代碼中使用

var image = new BitmapImage();
image.BeginInit();
image.UriSource = new Uri("1.gif",UriKind.Relative);
image.EndInit();
WpfAnimatedGif.ImageBehavior.SetAnimatedSource(img, image);

<Image x:Name="img"/>

控制播放次數

// Repeat 3 times
ImageBehavior.SetRepeatBehavior(img, new RepeatBehavior(3));

// Repeat for 10 seconds
ImageBehavior.SetRepeatBehavior(img, new RepeatBehavior(TimeSpan.FromSeconds(10)));

// Repeat forever
ImageBehavior.SetRepeatBehavior(img, RepeatBehavior.Forever);

播放完成回調事件

        <Image gif:ImageBehavior.AnimatedSource="1.gif" 
               gif:ImageBehavior.RepeatBehavior="3x" 
               gif:ImageBehavior.AnimationCompleted="Image_AnimationCompleted"/>

當播放次數為Forever時，永遠不會觸發該事件。

手動控制播放、暫停、跳轉到哪個畫面

獲取Image控件的ImageAnimationController

var controller = ImageBehavior.GetAnimationController(imageControl);

// 暫停
controller.Pause();

// 繼續
controller.Play();

// 跳轉到最后一個畫面
controller.GotoFrame(controller.FrameCount - 1);

你可能不想讓圖片自動播放，只需設置ImageBehavior.AutoStart屬性即可。

            <Image x:Name="img" 
                   gif:ImageBehavior.AnimatedSource="1.gif" 
                   gif:ImageBehavior.AutoStart="False"/>

通過訂閱CurrentFrameChanged事件可以監聽GIF畫面的改變

controller.CurrentFrameChanged += Controller_CurrentFrameChanged;

private void Controller_CurrentFrameChanged(object sender, EventArgs e)
{

}

當animation沒有完全加載的時候，GetAnimationController方法會返回null，通過訂閱AnimationLoaded事件避免。