Optimizing Animated GIF Performance for WPF UIs

Smooth Animated GIF Playback in WPF Applications

Animated GIFs can add life to WPF user interfaces, but naive approaches often result in choppy playback, high CPU usage, or memory leaks. This article shows a reliable, performant approach to display smooth animated GIFs in WPF, with code, explanations, and tips for optimization and troubleshooting.

Why GIFs can be problematic in WPF

• Frame timing: GIFs include per-frame delays; incorrect handling makes animation too fast/slow.
• Decoding overhead: Re-decoding frames on every tick wastes CPU.
• Threading: UI-thread decoding blocks rendering; background decoding must marshal frames safely.
• Memory: Keeping many frames in memory without disposal raises usage.

Approach overview

1. Decode GIF frames once (or on-demand) on a background thread.
2. Cache decoded frames as bitmaps (limited-size cache).
3. Use a high-resolution dispatcher timer to update the Image control’s Source on the UI thread at each frame’s specified delay.
4. Dispose unused frames to control memory.
5. Optionally leverage System.Windows.Media.Imaging.GifBitmapDecoder or third-party libraries for more advanced features.

Implementation (full example)

• Features: background decoding, accurate frame timing, limited cache, proper disposal, pause/resume.

Code (WPF C#):

csharp
Copy CodeCopied
using System;
using System.Collections.Concurrent;
using System.Collections.Generic;
using System.IO;
using System.Threading;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Imaging;
using System.Windows.Threading;

public class AnimatedGifPlayer : IDisposable
{
private readonly Image _target;
    private readonly List<int> _frameDelays = new();
    private readonly List<BitmapSource> _frames = new();
    private readonly DispatcherTimer _timer;
    private CancellationTokenSource _cts;
    private int _currentIndex;
    private readonly object _lock = new();
    private bool _isLooping = true;

    public AnimatedGifPlayer(Image target)
    {
        _target = target ?? throw new ArgumentNullException(nameof(target));
        _timer = new DispatcherTimer(DispatcherPriority.Render);
        _timer.Tick += Timer_Tick;
    }

    public async Task LoadAsync(Stream gifStream, int cacheLimit = 50)
    {
        if (gifStream == null) throw new ArgumentNullException(nameof(gifStream));
        _cts?.Cancel();
        _cts = new CancellationTokenSource();

        // Decode on background thread
        await Task.Run(() =>
        {
            var decoder = new GifBitmapDecoder(gifStream, BitmapCreateOptions.PreservePixelFormat, BitmapCacheOption.Default);
            var rawFrames = decoder.Frames;
            var metadataReader = decoder.Metadata as BitmapMetadata;

            // Extract delays and convert to hundredths of a second -> milliseconds
            _frameDelays.Clear();
            _frames.Clear();
            for (int i = 0; i < rawFrames.Count; i++)
            {
                var frame = rawFrames[i];
                int delayMs = 100; // default
                try
                {
                    // GIF frame delay stored under “/grctlext/Delay”
                    if (frame.Metadata is BitmapMetadata meta)
                    {
                        var delayObj = meta.GetQuery(”/grctlext/Delay”);
                        if (delayObj != null)
                        {
                            // GIF delay is in 1/100th sec units
                            delayMs = (Convert.ToInt32(delayObj)  10);
                            if (delayMs <= 0) delayMs = 100;
                        }
                    }
                }
                catch { / ignore and use default */ }

                _frameDelays.Add(delayMs);

                // Freeze frames for cross-thread access
                var frozen = new WriteableBitmap(frame);
                frozen.Freeze();
                _frames.Add(frozen);
            }
        }, _cts.Token);

        // Setup timer
        _currentIndex = 0;
        if (_frames.Count > 0)
        {
            _target.Dispatcher.Invoke(() => _target.Source = _frames[0]);
            _timer.Interval = TimeSpan.FromMilliseconds(Math.Max(1, _frameDelays[0]));
        }
    }

    private void Timer_Tick(object sender, EventArgs e)
    {
        if (_frames.Count == 0) return;
        _currentIndex++;
        if (_currentIndex >= _frames.Count)
        {
            if (_isLooping) _currentIndex = 0;
            else { Stop(); return; }
        }

        _target.Source = _frames[_currentIndex];
        _timer.Interval = TimeSpan.FromMilliseconds(Math.Max(1, _frameDelays[_currentIndex]));
    }

    public void Play()
    {
        if (_frames.Count == 0) return;
        _timer.Start();
    }

    public void Pause()
    {
        _timer.Stop();
    }

    public void Stop()
    {
        _timer.Stop();
        _currentIndex = 0;
        if (_frames.Count > 0)
            _target.Source = _frames[0];
    }

    public void Dispose()
    {
        _timer.Stop();
        _cts?.Cancel();
        frames.Clear();
    }
}

xml
 ffON2NH02oMAcqyoh2UU MQCbz04ET5EljRmK3YpQ CPXAhl7VTkj2dHDyAYAf” data-copycode=“true” role=“button” aria-label=“Copy Code”>Copy CodeCopied
<Image x:Name=“MyGifImage” Width=“200” Height=“200” />

csharp
Copy CodeCopied
private AnimatedGifPlayer _player;

private async void Window_Loaded(object sender, RoutedEventArgs e)
{
    _player = new AnimatedGifPlayer(MyGifImage);
    using var fs = File.OpenRead(“Assets/animation.gif”);
    await _player.LoadAsync(fs);
    _player.Play();
}

private void Window_Closing(object sender, System.ComponentModel.CancelEventArgs e)
{
    _player?.Dispose();
}