Add Lottie Island to WpfCalculator

Author: JesseCol

Samples/Islands/WpfCalculator/CalculatorDemo/CalculatorDemo.csproj

@@ -97,6 +97,7 @@
       <SubType>Code</SubType>
     </Compile>
     <Compile Include="App_Demo3.cs" />
+    <Compile Include="LottieIslandScenario.cs" />
     <Compile Include="MainWindow.cs">
       <DependentUpon>MainWindow.xaml</DependentUpon>
       <SubType>Code</SubType>
@@ -141,6 +142,8 @@
   <!-- Demo4_Step2_AddIsland -->
   <ItemGroup>
     <ProjectReference Include="..\DrawingIslandCsProjection\DrawingIslandCsProjection.csproj" />
+    <PackageReference Include="CommunityToolkit.WinAppSDK.LottieWinRT" Version="8.0.230819-rc-LottieIsland.7.g92a87e1883" />
+    <PackageReference Include="CommunityToolkit.WinUI.Lottie" Version="8.0.230819-rc-LottieIsland.7.g92a87e1883" />
   </ItemGroup>
   <!-- -->
   <ItemGroup>

Samples/Islands/WpfCalculator/CalculatorDemo/LottieIslandScenario.cs

@@ -0,0 +1,37 @@
+using System;
+using Microsoft.UI.Composition;
+using CommunityToolkit.WinAppSDK.LottieIsland;
+using CommunityToolkit.WinAppSDK.LottieWinRT;
+
+class LottieIslandScenario
+{
+    public static LottieContentIsland CreateLottieIsland(Compositor compositor)
+    {
+        var lottieIsland = LottieContentIsland.Create(compositor);
+        var lottieVisualSource = LottieVisualSourceWinRT.CreateFromString(
+            "ms-appx:///Assets/LottieLogo1.json");
+
+        if (lottieVisualSource != null)
+        {
+            lottieVisualSource.AnimatedVisualInvalidated += (sender, args) =>
+            {
+                object? diagnostics = null;
+                IAnimatedVisualFrameworkless? animatedVisual = 
+                    lottieVisualSource.TryCreateAnimatedVisual(compositor, out diagnostics);
+
+                if (animatedVisual != null)
+                {
+                    // This callback comes back on a different thread, so set the AnimatedVisual on
+                    // the UI thread
+                    compositor.DispatcherQueue.TryEnqueue(async () =>
+                    {
+                        lottieIsland.AnimatedVisual = animatedVisual;
+                        await lottieIsland.PlayAsync(0, 1, true);
+                    });
+                }
+            };
+        }
+
+        return lottieIsland;
+    }
+}

Samples/Islands/WpfCalculator/CalculatorDemo/MainWindow.xaml

@@ -28,6 +28,7 @@
                 <MenuItem Header="File">
                 <!-- Demo4_Step2_AddIsland -->
                     <MenuItem Name="CreateDrawingIslandMenuItem" Click="CreateDrawingIslandMenuItem_Click"  Header="Create DrawingIsland" />
+                    <MenuItem Name="CreateLottieIslandMenuItem" Click="CreateLottieIslandMenuItem_Click"  Header="Create LottieIsland" />
                 <!-- -->
                     <MenuItem Click="OnMenuExit" Header="Exit" />
                 </MenuItem>

Samples/Islands/WpfCalculator/CalculatorDemo/MainWindow_Demo4.cs

@@ -1,6 +1,7 @@
 // // Copyright (c) Microsoft. All rights reserved.
 // // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
+using CommunityToolkit.WinAppSDK.LottieIsland;
 using System.Windows;
 
 #if true // Demo3_Step2_AddCompact
@@ -20,6 +21,19 @@ private void CreateDrawingIslandMenuItem_Click(object sender, RoutedEventArgs e)
 
             wpfIslandHost.DesktopChildSiteBridge.Connect(drawingIsland.Island);
         }
+
+        private void CreateLottieIslandMenuItem_Click(object sender, RoutedEventArgs e)
+        {
+            var wpfIslandHost = new WpfIslandHost(_compositor);
+            _lottieContentIsland = LottieIslandScenario.CreateLottieIsland(_compositor);
+
+            // After this, the WpfIslandHost will be live, and the DesktopChildSiteBridge will be available.
+            DisplayAreaBorder.Child = wpfIslandHost;
+
+            wpfIslandHost.DesktopChildSiteBridge.Connect(_lottieContentIsland.Island);
+        }
+
+        LottieContentIsland _lottieContentIsland;
     }
 }