Click here to Skip to main content
13,894,020 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


12 bookmarked
Posted 5 May 2013
Licenced CPOL

GIF Animation in WPF

, 6 May 2013
Rate this:
Please Sign up or sign in to vote.
A library which provides an option to play animated Sprite sheets.


GIF images cannot be used directly in a WPF application. There are lot of third party libraries which support GIF images in WPF. Here is one which could play animated sprite sheets in WPF.


If you are good with WPF custom controls, Dispatcher timer, and Render Transforms, you are ready to read this tip.

Using the Code

We have a custom control which contains an image control in which the Source property is bound to the ImageSource property. The user will set the Sprite sheet image source to this property.

<Style TargetType="{x:Type local:Animator}">
        <Setter Property="Template">
                <ControlTemplate TargetType="{x:Type local:Animator}">
                    <Grid >
                        <Canvas Background="{TemplateBinding Background}"

                            x:Name="PART_Border" HorizontalAlignment="Center"

                            <Image Source="{TemplateBinding ImageSource}"

                               Stretch="UniformToFill" x:Name="PART_Image">

Normally a Sprite sheet can be horizontal or vertical or both (with rows and columns). A small portion of the sprite image will be exposed by clipping it. We used the HorizontalOffset and VerticalOffset properties to decide the Clip rect.

private void SetRect()
    if (_image != null)
        _border.Clip = new RectangleGeometry(new Rect(0, 0, HorizontalOffset, VerticalOffset));
        _border.Height = VerticalOffset;
        _border.Width = HorizontalOffset;
        if (HorizontalOffset > 0.0)
            _maxHpieces = Convert.ToInt16(_image.ActualWidth / HorizontalOffset);
        if (VerticalOffset > 0.0)
            _maxVpieces = Convert.ToInt16(_image.ActualHeight / VerticalOffset);

Choosing the offset values is the only challenge here. It simply defines the size of each image in the Sprite map. We are going to change the translate transform based on the offset values at a specific interval. Since we already clipped a particular portion of the image based on the offset, it gives an impression of animation.

void Animator_Loaded(object sender, RoutedEventArgs e)
    _timer = new DispatcherTimer(Interval, DispatcherPriority.Normal, Callback, Dispatcher);
    Loaded -= Animator_Loaded;
    Unloaded += Animator_Unloaded;

private void Callback(object sender, EventArgs eventArgs)
    if (_Hcount >= _maxHpieces)
        _Hcount = 0;
        if (_Vcount >= _maxVpieces)
            _Vcount = 0;
    _image.RenderTransform = new TranslateTransform
    	(-HorizontalOffset * _Hcount, -VerticalOffset * _Vcount);

The offset values may change based on the size of the sprite image. I have attached a demo which contains the various sizes of Sprite images.

Points of Interest

There are many online tools and sites which convert GIF images to Sprite images. The following one looks good:


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Jawahar Suresh Babu
Software Developer (Senior)
India India
Jawahar working as a Senior Development Engineer in Aditi Technologies,Bangalore, India. Specialist in all XAML frameworks. Very passionate on UX Design and Development. Skilled in Expression Blend, Design, WPF, Silverlight, Windows Phone 7/8, Windows 8. Good knowledge in Entity Framework, SQLite and SQL Server also. Also had good experience with PRISM, MVVM, Caliiburn Micro and other design patterns.

He developed few products for Syncfusion Inc. Also working on some freelancing projects. Worked as a lead developer of Metro Studio from Syncfusion Inc.

An active freelancer.

You may also be interested in...

Comments and Discussions

GeneralNicely done! Pin
Meshack Musundi11-Dec-13 19:06
professionalMeshack Musundi11-Dec-13 19:06 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web05 | 2.8.190306.1 | Last Updated 6 May 2013
Article Copyright 2013 by Jawahar Suresh Babu
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid