WPF 加载和显示 GIF 图片的完整指南

WPF 加载和显示 GIF 图片的完整指南

在 WPF 中加载和显示 GIF 图片需要一些特殊处理，因为 WPF 的 Image 控件默认不支持动画 GIF。

解决方案一：使用 WpfAnimatedGif 库（推荐）

这是最简单且功能最完整的方法。

实现步骤：

1. 安装 NuGet 包：
   在 NuGet 包管理器中安装 WpfAnimatedGif：

   Install-Package WpfAnimatedGif
   

2. XAML 实现：

   <Window x:Class="GifDemo.MainWindow"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:gif="http://wpfanimatedgif.codeplex.com"mc:Ignorable="d"Title="GIF 动画演示" Height="450" Width="800"><Grid><Grid.RowDefinitions><RowDefinition Height="*"/><RowDefinition Height="Auto"/></Grid.RowDefinitions><!-- 加载 GIF 图片 --><Image x:Name="gifImage" gif:ImageBehavior.AnimatedSource="Assets/loading.gif"gif:ImageBehavior.RepeatBehavior="Forever"Stretch="Uniform"HorizontalAlignment="Center"VerticalAlignment="Center"/><!-- 控制面板 --><StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center" Margin="10"><Button Content="开始" Click="PlayGif" Margin="5" Padding="10,5"/><Button Content="暂停" Click="PauseGif" Margin="5" Padding="10,5"/><Button Content="恢复" Click="ResumeGif" Margin="5" Padding="10,5"/><Button Content="停止" Click="StopGif" Margin="5" Padding="10,5"/><ComboBox x:Name="gifSelector" Margin="10,0" Width="150"SelectionChanged="GifSelectionChanged"><ComboBoxItem Content="加载动画" Tag="Assets/loading.gif"/><ComboBoxItem Content="庆祝动画" Tag="Assets/celebration.gif"/><ComboBoxItem Content="进度动画" Tag="Assets/progress.gif"/></ComboBox></StackPanel></Grid>
   </Window>
   

3. 代码后台：

   using System.Windows;
   using WpfAnimatedGif;namespace GifDemo
   {public partial class MainWindow : Window{public MainWindow(){InitializeComponent();// 设置默认选择gifSelector.SelectedIndex = 0;}// 播放 GIFprivate void PlayGif(object sender, RoutedEventArgs e){ImageBehavior.SetAnimatedSource(gifImage, new BitmapImage(new Uri("Assets/loading.gif", UriKind.Relative)));}// 暂停 GIFprivate void PauseGif(object sender, RoutedEventArgs e){ImageBehavior.GetAnimator(gifImage)?.Pause();}// 恢复播放private void ResumeGif(object sender, RoutedEventArgs e){ImageBehavior.GetAnimator(gifImage)?.Play();}// 停止 GIFprivate void StopGif(object sender, RoutedEventArgs e){ImageBehavior.GetAnimator(gifImage)?.Dispose();gifImage.Source = null;}// 切换 GIFprivate void GifSelectionChanged(object sender, RoutedEventArgs e){if (gifSelector.SelectedItem is ComboBoxItem item && item.Tag is string gifPath){var source = new BitmapImage(new Uri(gifPath, UriKind.Relative));ImageBehavior.SetAnimatedSource(gifImage, source);}}}
   }
   

解决方案二：使用自定义 GIF 解码器

如果你不想使用第三方库，可以使用自定义实现：

using System;
using System.IO;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;
using System.Drawing;
using System.Drawing.Imaging;namespace GifDemo
{public partial class MainWindow : Window{private Bitmap _gifBitmap;private BitmapSource[] _gifFrames;private int _currentFrame;private bool _isPlaying;private readonly DispatcherTimer _animationTimer = new DispatcherTimer();public MainWindow(){InitializeComponent();_animationTimer.Tick += NextFrame;}private void LoadGif(string path){// 清理现有资源StopGif();// 加载新 GIF_gifBitmap = new Bitmap(path);// 获取帧数int frameCount = _gifBitmap.GetFrameCount(FrameDimension.Time);_gifFrames = new BitmapSource[frameCount];// 提取所有帧for (int i = 0; i < frameCount; i++){_gifBitmap.SelectActiveFrame(FrameDimension.Time, i);_gifFrames[i] = ToBitmapSource(_gifBitmap);}// 获取帧延迟var frameDelay = GetFrameDelay(_gifBitmap);_animationTimer.Interval = TimeSpan.FromMilliseconds(frameDelay);// 显示第一帧_currentFrame = 0;gifImage.Source = _gifFrames[0];// 开始播放PlayGif();}private int GetFrameDelay(Bitmap gif){const int PropertyTagFrameDelay = 0x5100;// 获取帧延迟属性var delayProperty = gif.GetPropertyItem(PropertyTagFrameDelay);// 默认延迟 (100ms)if (delayProperty == null) return 100;// 返回第一帧的延迟（以毫秒为单位）return BitConverter.ToInt32(delayProperty.Value, 0) * 10;}private BitmapSource ToBitmapSource(Bitmap bitmap){using (var memory = new MemoryStream()){bitmap.Save(memory, ImageFormat.Png);memory.Position = 0;var bitmapImage = new BitmapImage();bitmapImage.BeginInit();bitmapImage.StreamSource = memory;bitmapImage.CacheOption = BitmapCacheOption.OnLoad;bitmapImage.EndInit();bitmapImage.Freeze();return bitmapImage;}}private void NextFrame(object sender, EventArgs e){if (!_isPlaying || _gifFrames == null) return;_currentFrame = (_currentFrame + 1) % _gifFrames.Length;gifImage.Source = _gifFrames[_currentFrame];}private void PlayGif(object sender = null, RoutedEventArgs e = null){_isPlaying = true;_animationTimer.Start();}private void PauseGif(object sender, RoutedEventArgs e){_isPlaying = false;_animationTimer.Stop();}private void StopGif(object sender = null, RoutedEventArgs e = null){_isPlaying = false;_animationTimer.Stop();_currentFrame = 0;gifImage.Source = _gifFrames?[0];}protected override void OnClosed(EventArgs e){base.OnClosed(e);_animationTimer.Stop();_gifBitmap?.Dispose();}}
}

解决方案三：使用 MediaElement（适用于简单 GIF）

对于不需要透明背景的 GIF，可以使用 MediaElement：

<Window x:Class="GifDemo.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="GIF 动画演示" Height="450" Width="800"><Grid><!-- 使用 MediaElement 播放 GIF --><MediaElement x:Name="mediaElement" Source="Assets/loading.gif"LoadedBehavior="Play"UnloadedBehavior="Stop"Stretch="Uniform"HorizontalAlignment="Center"VerticalAlignment="Center"/><!-- 控制面板 --><StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="10"><Button Content="播放" Click="PlayGif" Margin="5" Padding="10,5"/><Button Content="暂停" Click="PauseGif" Margin="5" Padding="10,5"/><Button Content="停止" Click="StopGif" Margin="5" Padding="10,5"/></StackPanel></Grid>
</Window>

public partial class MainWindow : Window
{public MainWindow(){InitializeComponent();}private void PlayGif(object sender, RoutedEventArgs e){mediaElement.Play();}private void PauseGif(object sender, RoutedEventArgs e){mediaElement.Pause();}private void StopGif(object sender, RoutedEventArgs e){mediaElement.Stop();}
}

常见问题解决方案

1. GIF 不播放

• 检查文件路径是否正确
• 确保 GIF 文件已设置为 “Resource” 或 “Content” 生成操作
• 验证 GIF 文件是否损坏（用其他软件打开测试）

2. 透明背景显示为黑色

• 使用支持透明背景的解决方案（如 WpfAnimatedGif）
• 确保 GIF 本身支持透明
• 在 Image 控件上设置 Background="Transparent"

3. 性能问题

• 避免加载过多 GIF
• 暂停不可见的 GIF
• 降低 GIF 分辨率
• 使用 BitmapCache 提高渲染性能：

  <Image.CacheMode><BitmapCache EnableClearType="True" RenderAtScale="1" />
  </Image.CacheMode>
  

4. 控制 GIF 播放次数

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

总结

在 WPF 中加载和显示 GIF 图片有以下几种方法：

1. 推荐方案：使用 WpfAnimatedGif NuGet 包

   • 优点：功能完整、支持透明背景、易于使用
   • 缺点：需要添加外部依赖

2. 自定义解码器：

   • 优点：无外部依赖
   • 缺点：实现复杂、功能有限

3. 使用 MediaElement：

   • 优点：内置支持
   • 缺点：不支持透明背景、功能有限

对于大多数应用场景，推荐使用 WpfAnimatedGif 库，它提供了最完整的 GIF 支持，包括：

• 播放控制（播放、暂停、停止）
• 速度调整
• 播放次数控制
• 透明背景支持
• 事件通知（如帧改变、播放完成等）

通过本文提供的代码示例，您可以轻松地在 WPF 应用中实现 GIF 加载和播放功能，并根据需要添加自定义控制功能。