10

I would like to display an animation gif such as loading... in my XAML as my procedure is progressing. I found out that this cannot be easily done in WPF as I loaded my Gif and it just shows the first frame. What are the best ways to display an animation in WPF.

paradisonoir
  • 2,892
  • 9
  • 30
  • 41
  • possible duplicate of [How do I get an animated gif to work in WPF?](http://stackoverflow.com/questions/210922/how-do-i-get-an-animated-gif-to-work-in-wpf) – Thomas Levesque Dec 10 '10 at 23:03
  • [Adding “Loading”-image on top of ListView](http://stackoverflow.com/questions/1492096/adding-loading-image-on-top-of-listview) – hakre Aug 28 '12 at 10:19

3 Answers3

5

I had this issue, until I discovered that in WPF4, you can simulate your own keyframe image animations. First, split your animation into a series of images, title them something like "Image1.gif", "Image2,gif", and so on. Import those images into your solution resources. I'm assuming you put them in the default resource location for images.

You are going to use the Image control. Use the following XAML code. I've removed the non-essentials.

<Image Name="Image1">
   <Image.Triggers>
      <EventTrigger RoutedEvent="Image.Loaded"
         <EventTrigger.Actions>
            <BeginStoryboard>
               <Storyboard>
                   <ObjectAnimationUsingKeyFrames Duration="0:0:1" Storyboard.TargetProperty="Source" RepeatBehavior="Forever">
                      <DiscreteObjectKeyFrames KeyTime="0:0:0">
                         <DiscreteObjectKeyFrame.Value>
                            <BitmapImage UriSource="Images/Image1.gif"/>
                         </DiscreteObjectKeyFrame.Value>
                      </DiscreteObjectKeyFrames>
                     <DiscreteObjectKeyFrames KeyTime="0:0:0.25">
                        <DiscreteObjectKeyFrame.Value>
                           <BitmapImage UriSource="Images/Image2.gif"/>
                        </DiscreteObjectKeyFrame.Value>
                     </DiscreteObjectKeyFrames>
                     <DiscreteObjectKeyFrames KeyTime="0:0:0.5">
                        <DiscreteObjectKeyFrame.Value>
                           <BitmapImage UriSource="Images/Image3.gif"/>
                        </DiscreteObjectKeyFrame.Value>
                     </DiscreteObjectKeyFrames>
                     <DiscreteObjectKeyFrames KeyTime="0:0:0.75">
                        <DiscreteObjectKeyFrame.Value>
                           <BitmapImage UriSource="Images/Image4.gif"/>
                        </DiscreteObjectKeyFrame.Value>
                     </DiscreteObjectKeyFrames>
                     <DiscreteObjectKeyFrames KeyTime="0:0:1">
                        <DiscreteObjectKeyFrame.Value>
                           <BitmapImage UriSource="Images/Image5.gif"/>
                        </DiscreteObjectKeyFrame.Value>
                     </DiscreteObjectKeyFrames>
                  </ObjectAnimationUsingKeyFrames>
               </Storyboard>
            </BeginStoryboard>
         </EventTrigger.Actions>
      </EventTrigger>
   </Image.Triggers>
</Image>
CodeMouse92
  • 6,840
  • 14
  • 73
  • 130
  • 1
    I adopted this for a Windows Phone game I was working on, and it worked a treat! (Mind you, you can't do it with `EventTrigger`s but just move the code out into a normal storyboard) – GONeale Nov 02 '12 at 23:02
  • I get "DiscreteObjectKeyFrames are not supported in WPF" error. – ILIA BROUDNO Feb 25 '15 at 23:14
2

You could embed a MediaElement

<MediaElement LoadedBehavior="Play" Source="path/to.file" />

or winforms PictureBox:

    <wfi:WindowsFormsHost>
        <winForms:PictureBox x:Name="pictureBoxLoading">
        </winForms:PictureBox>
    </wfi:WindowsFormsHost>

However, I'd recommend finding a way to do this in WPF. Have a look at StoryBoards and animations. Without knowing what you're trying to achieve or why you want to do this it's hard to advise further.

Matt Lacey
  • 65,560
  • 11
  • 91
  • 143
1

Simply Right Click on .gif file and change two properties:

Build Action : Embedded Resource

Copy To Output Directory : Copy if Newer

Then

 <MediaElement x:Name="myGif" UnloadedBehavior="Manual" Source="giphy_s.gif" MediaEnded="MediaElement_MediaEnded"/>

and set Event For Continue Running

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