CODEWITHSUNDEEP
c#wpfuser-interfacexamlanimation
paradisonoir
paradisonoir

Reputation: 2920

display an animation gif in WPF

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.

Upvotes: 10

Views: 18159

Answers (3)

user8099567
user8099567

Reputation:

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();
        }

Upvotes: 1

CodeMouse92
CodeMouse92

Reputation: 6898

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>

Upvotes: 5

Matt Lacey
Matt Lacey

Reputation: 65586

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.

Upvotes: 2

Related Questions