Animating Gif in WPF

Question

I am using this code for gif Animating in seprate library and xaml code in my main project:

<controls:GifImage GifSource="/project;component/Images/my.gif" Stretch="None" />

Gif Animating (seprate file):

public class GifImage : Image
    {
        #region Memmbers

        private GifBitmapDecoder _gifDecoder;
        private Int32Animation _animation;
        private bool _isInitialized;

        #endregion Memmbers

        #region Properties

        private int FrameIndex
        {
            get { return (int)GetValue(FrameIndexProperty); }
            set { SetValue(FrameIndexProperty, value); }
        }

        private static readonly DependencyProperty FrameIndexProperty =
         DependencyProperty.Register("FrameIndex", typeof(int), typeof(GifImage), new FrameworkPropertyMetadata(0, new PropertyChangedCallback(ChangingFrameIndex)));

        private static void ChangingFrameIndex(DependencyObject obj, DependencyPropertyChangedEventArgs ev)
        {
            GifImage image = obj as GifImage;
            image.Source = image._gifDecoder.Frames[(int)ev.NewValue];
        }

        /// <summary>
        /// Defines whether the animation starts on it's own
        /// </summary>
        public bool AutoStart
        {
            get { return (bool)GetValue(AutoStartProperty); }
            set { SetValue(AutoStartProperty, value); }
        }

        public static readonly DependencyProperty AutoStartProperty =
         DependencyProperty.Register("AutoStart", typeof(bool), typeof(GifImage), new UIPropertyMetadata(false, AutoStartPropertyChanged));

        private static void AutoStartPropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
        {
            if ((bool)e.NewValue)
                (sender as GifImage).StartAnimation();
        }

        public string GifSource
        {
            get { return (string)GetValue(GifSourceProperty); }
            set { SetValue(GifSourceProperty, value); }
        }

        public static readonly DependencyProperty GifSourceProperty =
         DependencyProperty.Register("GifSource", typeof(string), typeof(GifImage), new UIPropertyMetadata(string.Empty, GifSourcePropertyChanged));

        private static void GifSourcePropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
        {
            // CARLO 20100622: Reinitialize animation everytime image is changed
            (sender as GifImage).Initialize();
        }

        #endregion Properties

        #region Private Instance Methods

        private void Initialize()
        {

            _gifDecoder = new GifBitmapDecoder(new Uri(String.Format("pack://application:,,,{0}", this.GifSource)), BitmapCreateOptions.PreservePixelFormat, BitmapCacheOption.Default);
            _animation = new Int32Animation(0, _gifDecoder.Frames.Count - 1, new Duration(new TimeSpan(0, 0, 0, _gifDecoder.Frames.Count / 10, (int)((_gifDecoder.Frames.Count / 10.0 - _gifDecoder.Frames.Count / 10) * 1000))));
            _animation.RepeatBehavior = RepeatBehavior.Forever;
            this.Source = _gifDecoder.Frames[0];

            _isInitialized = true;
        }

        #endregion Private Instance Methods

        #region Public Instance Methods

        /// <summary>
        /// Shows and starts the gif animation
        /// </summary>
        public void Show()
        {
            this.Visibility = Visibility.Visible;
            this.StartAnimation();
        }

        /// <summary>
        /// Hides and stops the gif animation
        /// </summary>
        public void Hide()
        {
            this.Visibility = Visibility.Collapsed;
            this.StopAnimation();
        }

        /// <summary>
        /// Starts the animation
        /// </summary>
        public void StartAnimation()
        {
            if (!_isInitialized)
                this.Initialize();

            BeginAnimation(FrameIndexProperty, _animation);
        }

        /// <summary>
        /// Stops the animation
        /// </summary>
        public void StopAnimation()
        {
            BeginAnimation(FrameIndexProperty, null);
        }

        #endregion Public Instance Methods
    }

but i get error:

The URI prefix is not recognized.

I am not sure why i get error. Could someone help me please ?

The code appears to come from [this answer](https://stackoverflow.com/a/1134340/294248). There is a higher-voted answer on the same page that uses a NuGet package called "XamlAnimatedGif" (nee "WpfAnimatedGif"), as well as various other solutions. — fadden, Dec 13 '19 at 21:28

edtheprogrammerguy · Answer 1 · 2013-10-30T22:51:08.563

30

There is a much easier way to show an animated .gif in wpf - use the MediaElement

Example:

<MediaElement x:Name="myGif" MediaEnded="myGif_MediaEnded" UnloadedBehavior="Manual"     Source="file://C:\waiting.GIF" LoadedBehavior="Play" Stretch="None"/>

If you want the .gif to loop endlessly but it only specifies a limited amount of repeats in the .gif file, you can hook MediaEnded and just restart the animation (Be sure to set the UnloadedBehavior to Manual):

    private void myGif_MediaEnded(object sender, RoutedEventArgs e)
    {
        myGif.Position = new TimeSpan(0, 0, 1);
        myGif.Play();
    }

edited Oct 30 '13 at 22:51

answered Oct 30 '13 at 22:43

edtheprogrammerguy

5,957
6
28
47

How do I specify the location of where the GIF plays on the screen? – zetar Jul 13 '16 at 16:35
1

@Wobbles - not really a reason to downvote. Thanks for the insight, though – edtheprogrammerguy Jul 18 '17 at 12:40
2

@edtheprogrammerguy Answer has limited applications and will cause issues for many users, thus not satisfying why many users would come here looking to "animate a gif". – Wobbles Jul 18 '17 at 12:42

score 0 · Answer 2 · answered Nov 12 '13 at 07:26

0

Try this:

<controls:GifImage GifSource="/Images/my.gif" Stretch="None" />

BTW, I found using this way to play gif in wpf might deform some gif images, and I wonder why...

answered Nov 12 '13 at 07:26

Chobits

65
7

2

Where do you find that control? – Magnus Ahlin Jun 24 '15 at 15:18

score 0 · Answer 3 · answered Aug 16 '17 at 20:38

I can't take credit for this but here's a way to do this in XAML only. I added an "IsBusy" property to my ViewModel to show/hide the spinner during processing.

        <Image Name="Spinner" Source="Resources/spinner.gif" RenderTransformOrigin="0.5, 0.5">
            <Image.Triggers>
                <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard Storyboard.TargetName="Spinner" Storyboard.TargetProperty="RenderTransform.(RotateTransform.Angle)">
                                <DoubleAnimation From="0" To="360" BeginTime="0:0:0" Duration="0:0:2" RepeatBehavior="Forever" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Image.Triggers>
            <Image.RenderTransform>
                <RotateTransform Angle="0" />
            </Image.RenderTransform>
            <Image.Style>
                <Style TargetType="Image">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsBusy}" Value="False">
                            <Setter Property="Visibility" Value="Hidden"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Image.Style>
        </Image>

Here's the link to the author's solution.

this is just rotating the image (pics out first image if source is .gif) — Mohammad Mahroz, Nov 19 '17 at 15:52
The linked page is about replacing an animated-GIF spinner animation with an alternative solution. Two solutions are given, the first of which is shown in the answer (and is not relevant to question). The other uses a WPF [Storyboard](https://learn.microsoft.com/en-us/dotnet/framework/wpf/graphics-multimedia/how-to-animate-a-property-by-using-a-storyboard) to show frames in sequence. This was explored a bit more [in this answer](https://stackoverflow.com/a/5519381/294248). — fadden, Dec 13 '19 at 21:24

Animating Gif in WPF

3 Answers3

Linked

Related