maui.net-maui

GIF image is not working in .net MAUI application

I would like to display some gif animation images in my application. The library I used to do it with Xamarin.Forms was Xamarin.FFImageLoading.Svg.Forms. Now that we are migrating our application to .net MAUI, I see that the MAUI document says that it supports GIF files. I tried a sample, but it did not work.

I have seen a gif related bug and workaround in the following link, and I also tried it, but for me the gif animation is still not working.

https://github.com/dotnet/maui/issues/5034

My code is on github, public repository.

https://github.com/rynjas/GifMauiSample

I would appreciate it if you could help me with this issue.

The steps to reproduce the issue are as follows:

  1. Create a sample .NET MAUI project
  2. Added a gif image to the Resources/images directory (giphy.gif)
  3. Set the Build action of the gif image properties to MauiImage
  4. Add an image component to the MainPage.xml, as follows Run the application, only the first frame of the GIF appears, no animation occurs.
    <Image Source="giphy.gif" HeightRequest="200" HorizontalOptions="Center" />
  1. I followed the workaround in the following ticket, so I added these steps to GIFMAUISample/GIFMAUISample.csproj https://github.com/dotnet/maui/issues/5034
<MauiImage Include="Resources\Images\*" />
<MauiImage Update="Resources\Images\*.gif" Resize="False" />

The issue is still not resolved.

Solution

  • According to the official documents by default when the gif image is loaded, by default it will not be played, Because IsAnimationPlaying property is set to false.

    So, the gif image will not be played until you set IsAnimationPlaying to true.

    Here is a tested/working example:

    <Image Source="giphy.gif"
       HeightRequest="200" 
       HorizontalOptions="Center" 
       IsAnimationPlaying="True" />

    important alert is written in the docs:

    While the animated GIF support in .NET MAUI includes the ability to download files, it does not support caching or streaming animated GIFs.

    Also be aware for android that if it does not play in hot reload set IsAnimationPlaying to false and then set it back to true, while you are in hot reload mode and it should work fine

    iOS and Mac are still facing some issues so you can keep track through: GitHub issue

    Microsoft docs: .NET MAUI gif images