[WPF] Lottie-Windows in WPF apps

[Leon-Zhang]

Hello, as title, could you provide a WPF based viewer example project? Thanks.

[sohchatt]

Do you want a sample for how to use Lottie in a WPF app? Or do you want Lottie Viewer to be ported to WPF? The former is simple and something we can certainly write up for you; the latter is not planned.

[Leon-Zhang]

@sohchatt Hello, a simple example project on Lottie in a WPF app is ok, thanks.

[Zangl]

I would like to use lottie animations but in traditional wpf applications and wondered if you have any thoughts on if using say xaml islands I would be able to use the uwp lottie libraries.

[alekseysshubin]

I can't figure out how to do it with XAML Islands for .NET Framework. Unlike the Islands for .NET Core, Islands for .NET Framework allows hosting only standard controls, but not custom controls. And when I try adding AnimatedVisualPlayer using the standard control approach, I'm getting an error Cannot create control of type Microsoft.UI.Xaml.Controls.AnimatedVisualPlayer. @sohchatt looking forward to the example project!

[sohchatt]

@alekseysshubin I believe you'll have to update to .net core 3.0 for Xaml Islands + WinUI to work correctly. Is updating your project to .net core 3.0 not feasible?

[alekseysshubin]

@sohchatt unfortunately no, we can't update to .NET Core 3 so far.

[sohchatt]

@alekseysshubin out of curiosity, what are your constraints / concerns with upgrading? Is it compatibility with other libraries you're using, etc.? This might be great feedback for @marb2000.

In theory, we could provide a WPFAnimatedVisualPlayer that doesn't require you to use XamlIslands + .Net Core 3.0 but I wanted to understand your requirements further before we go down that route.

[marb2000]

Unfortunately only native (C++) 3rd party components can be loaded inside of a XAML Island with the .NET Framework, not managed (C#) components. This is a well-known limitation and It won't be addressed so far.

[Zangl]

For me the two most likely places I would used lottie animations would be as part of a Xamarin app or a WPF app. The WPF version should also support core3, I don't see much traction with uwp, I hope uwp will be placed in the silverlight\winphone vault and wpf core3 gets the most focus.

[Leon-Zhang]

@sohchatt Hello, could you please let me know your schedule for publish WPF version Lottie-Windows? thanks.

[sohchatt]

@Leon-Zhang thanks for your patience. Support for WPF + .Net Core 3.0 was released today with the VS 16.3 update. This means that I can finally put together the sample within the next few days. I'll reply back here when I have something ready.

[Lorymi]

@sohchatt Any update???

[sohchatt]

After looking into Lottie + Xaml Islands, we have a few questions for you,@Leon-Zhang, @Lorymi, @Zangl, @alekseysshubin, that would help us solve the right problem: How are you planning on using Lottie within your WPF apps? Is it mostly WPF UI with Lottie being used only in particular places for Animated Icons / Illustrations? Or are your rewriting larger chunks of your existing WPF UI (including the regions where Lottie is to be used) with WinUI and hosting in WPF via XAML Islands (ex. entire gridview with animated icons, or an entire page)?

[alekseysshubin]

Is it mostly WPF UI with Lottie being used only in particular places for Animated Icons / Illustrations

This is the case for me. Rewriting large portions of the UI would be too much effort for us at the moment. And our app still has to support Windows 7, but XAML Islands are available since Win10 build 1903.

[sohchatt]

In this case, how many instances of Lottie animations are you planning on using in your WPF UI (approximately)?

[alekseysshubin]

@sohchatt around 3-5. We planned to use it for large animated banners.

In fact, we've already worked it around by converting Lottie animations to videos. Though it would definitely be good to have Lottie support in WPF in future, I don't think I'll be able to return to it anytime soon in my current project. So my case is probably not relevant...

[Leon-Zhang]

@sohchatt

How are you planning on using Lottie within your WPF apps? Is it mostly WPF UI with Lottie being used only in particular places for Animated Icons / Illustrations? Or are your rewriting larger chunks of your existing WPF UI (including the regions where Lottie is to be used) with WinUI and hosting in WPF via XAML Islands (ex. entire gridview with animated icons, or an entire page)?

I am using Lottie in a mostly WPF UI project, Lottie being used only in particular places for Animated Icons / Illustrations extactly. thanks.

[Zangl]

@sohchatt ditto @alekseysshubin

[Lorymi]

@sohchatt do you have any plan or road map to port for WPF?

[sohchatt]

@Lorymi: there are no immediate plans for porting the implementation that uses Windows.UI.Composition APIs to WPF or other platforms. However, the current Lottie-Windows implementation can still be used for certain scenarios with Xaml Islands in WPF / Win32 apps. Based on the discussions above, I think it would also be useful to outline the limitations of and provide best practices for the Lottie + Xaml Islands approach through samples and documentation, which is something that @mevey will be looking into going forward.

[hc6159]

can some have the sample of using lottie in xamarin forms for WPF?

[simeoncran]

This thread is really asking for samples:

1. Lottie in WPF
2. Lottie in Xamarin Forms for WPF @traore-i

[mentorfloat]

Worth noting that there is a working Xaml Island sample by Microsoft here: https://github.com/microsoft/Xaml-Islands-Samples

But apparently the packaged app crashes when trying to run outside of Debug mode. There is an open Issue still unresolved.

[marb2000]

@mentorfloat the bug Packaged app crashes when trying to run #5 was fixed within the XamlHost NuGet version 6.1.1. I'm closing the issue right now.

[jfbuehler]

I'm going to assume this project is pretty dead now... :( That's a bummer I was hoping to use Lottie in a WPF project! I built the XAML Islands demo using the latest SDKs as of Jan 2021 and it worked great but not for the AnimatedVisualPlayer like people said above. Argh super bummer!!! https://docs.microsoft.com/en-us/windows/apps/desktop/modernize/host-standard-control-with-xaml-islands

Any plans for Microsoft to pick this up?? There's a big lack of Lottie Windows apps for good reason... UWP is a POS to dev for.

[dbischoff1]

LottieSharp could be an alternative to use Lottie in WPF applications: https://github.com/ascora/LottieSharp But it depends on SharpDX, which is no longer maintained.

[hristowwe]

I'm going to assume this project is pretty dead now... :( That's a bummer I was hoping to use Lottie in a WPF project! I built the XAML Islands demo using the latest SDKs as of Jan 2021 and it worked great but not for the AnimatedVisualPlayer like people said above. Argh super bummer!!! https://docs.microsoft.com/en-us/windows/apps/desktop/modernize/host-standard-control-with-xaml-islands

Any plans for Microsoft to pick this up?? There's a big lack of Lottie Windows apps for good reason... UWP is a POS to dev for.

Do you have working example with lottie for wpf app?

[nishitha-burman]

Currently there are no immediate plans for porting the implementation that uses Windows.UI.Composition APIs to WPF. @jfb8618 what issues did you run into when trying to get AnimatedVisualPlayer working with XAML Islands?

[ibebbs]

So this thread is a little confusing and seems to suggest that Lottie-Windows (i.e. an AnimatedVisualPlayer + LottieVisualSource) within a WindowsXamlHost should work... but doesn't.

I needed to see if this was possible so forked Microsoft's Xaml-Islands-Samples repo, fixed up the build issues and added a Lottie page containing an AnimatedVisualPlayer with a LottieVisualSource. You can find my fork here.

Unfortunately, despite not encountering any exceptions and trying multiple different means of loading/setting the LottieVisualSource, I've been unable to view a lottie animation from the "WPF_XAMLIslands_v1" app.

The animation runs fine from the IDE:

But from the WPF app all I get is a blank page:

To ensure it's not a file/resource issue, I've attempted to load the Lottie file directly with the following code:

var resourceContext = new Windows.ApplicationModel.Resources.Core.ResourceContext(); // not using ResourceContext.GetForCurrentView 
var namedResource = Windows.ApplicationModel.Resources.Core.ResourceManager.Current.MainResourceMap[@"Files/Assets/LottieLogo1.json"];
var resourceCandidate = namedResource.Resolve(resourceContext);
var lottieFileStream = await resourceCandidate.GetValueAsStreamAsync();
var source = new LottieVisualSource();

await source.SetSourceAsync(lottieFileStream);

LottiePlayer.Source = source;
await LottiePlayer.PlayAsync(0, 1, true);

Unfortunately the source.SetSourceAsync(lottieFileStream) line throws:

System.ArgumentException
  HResult=0x80070057
  Message=Failed to load animated visual.

I've confirmed the resource above contains the correct content by using:

var inputStream = lottieFileStream.GetInputStreamAt(0);
var stream = inputStream.AsStreamForRead();
var reader = new StreamReader(stream);
string text = reader.ReadToEnd();  // <- Contains expected JSON

And am now at a bit of a loss.

I'm keen to understand if anyone else has managed to get Lottie-Windows working within a WindowsXamlHost or if this is even possible. Anyone?

[xiejiang2014]

i made a render layer to render lottie in wpf， https://github.com/xiejiang2014/Xiejiang.SKLottie.Samples