Animated GIF Image Control In Universal Windows Program

Required OS: Windows 10, version 1607 with the updated UWP Tools.

In XAML Image control, until Windows 10 < 1607 the version image control doesn't play  GIF animation, on the first image (GIF first frame) displays in the control, in Windows 10 >= 1607 the image control default supports playing  GIF animation.

Highlighted properties

  1. Autoplay
  2. IsAnimatedBitmap
  3. IsPlaying
  4. Play
  5. Stop

Autoplay: Default set true, it plays the animation automatically.

IsAnimatedBitmap: To chec if the loaded image is animated or not.

IsPlaying: To check whether the animation is playing or not.

Play & Stop: Play and Stop the animation.

Sample Code in XAML

  1. <Image>  
  2.      <Image.Source>  
  3.          <BitmapImage x:Name="GifImage" UriSource="Assets/windows.gif"/>                             
  4.      </Image.Source>  
  5. </Image>  

Enable and Disable Play control
  1. <StackPanel Margin="10">  
  2.   <Image Loaded="FrameworkElement_OnLoaded">  
  3.      <Image.Source>  
  4.        <BitmapImage x:Name="GifImage" UriSource="Assets/windows.gif"   
  5.                                  ImageOpened="GifImage_OnImageOpened"/>  
  6.                 </Image.Source>  
  7.   </Image>  
  8.   <StackPanel x:Name="BtnPlayControl" Orientation="Horizontal">  
  9.       <Button x:Name="BtnPlay" Margin="10" Content="Play" Click="BtnPlay_OnClick" />  
  10. <Button x:Name="BtnPause" Margin="10" Content="Pause"  Click="BtnPause_OnClick"></Button>  
  11.             </StackPanel>  
  12.   </StackPanel>  
  13. private void BtnPlay_OnClick(object sender, RoutedEventArgs e)  
  14. {  
  15.      if (!GifImage.IsPlaying)  
  16.          GifImage.Play();  
  17. }  
  18. private void BtnPause_OnClick(object sender, RoutedEventArgs e)  
  19. {  
  20.      GifImage.Stop();  
  21. }  
 

IsAnimatedBitmap

If the GIF animation is not loaded in the image control, there is no need to show the play & pause control in GUI. Let's se how to handle it.

In the image control, each image is loaded into the control,the  image control fires the ImageOpened event. In this event, check the IsAnimatedBitmap , if is true; enable play and stop, otherwise false.

If the Application is running Windows 10 Version < 1607, play and pause button should be disabled because Windows 10 Version < 1607 won’t support the GIF animation

ApiInformation.IsPropertyPresent

ApiInformation.IsPropertyPresent: This API is used to check whether the specified property is present or not in the running system.

  1. private void GifImage_OnImageOpened(object sender, RoutedEventArgs e)  
  2.         {  
  3.             var loadedImage = (BitmapImage) sender;  
  4.             if (loadedImage != null &&  
  5.                 (ApiInformation.IsPropertyPresent("Windows.UI.Xaml.Media.Imaging.BitmapImage",nameof(BitmapImage.IsAnimatedBitmap))   
  6.                                         && loadedImage.IsAnimatedBitmap))  
  7.             {  
  8.                 BtnPlayControl.Visibility = Visibility.Visible;  
  9.             }  
  10.         }