Merge pull request #11842 from unoplatform/dev/jela/lottie-opaque

fix(lottie): Ensure that opaque state is adjusted on any Loaded event

src/AddIns/Uno.UI.Lottie/LottieVisualSource.Skottie.cs

@@ -25,6 +25,7 @@ using System.IO;
 
 #if HAS_UNO_WINUI
 using SkiaSharp.Views.Windows;
+using Windows.UI.Core;
 #else
 using SkiaSharp.Views.UWP;
 #endif
@@ -216,26 +217,28 @@ namespace Microsoft.Toolkit.Uwp.UI.Lottie
 		{
 			if (_hardwareCanvas != null)
 			{
-				void UpdateTransparency(object s, object e)
+				static void UpdateTransparency(object s, object e)
 				{
-					// The SKGLTextureView is opaque by default, so we poke at the tree
-					// to change the opacity of the first view of the SKSwapChainPanel
-					// to make it transparent.
-#if __ANDROID__
-					if (_hardwareCanvas.ChildCount == 1
-						&& _hardwareCanvas.GetChildAt(0) is Android.Views.TextureView texture)
+					if (s is SKSwapChainPanel swapChainPanel)
 					{
-						texture.SetOpaque(false);
-					}
+
+						// The SKGLTextureView is opaque by default, so we poke at the tree
+						// to change the opacity of the first view of the SKSwapChainPanel
+						// to make it transparent.
+#if __ANDROID__
+						if (swapChainPanel.ChildCount == 1
+							&& swapChainPanel.GetChildAt(0) is Android.Views.TextureView texture)
+						{
+							texture.SetOpaque(false);
+						}
 #elif __IOS__
-					if (_hardwareCanvas.Subviews.Length == 1
-						&& _hardwareCanvas.Subviews[0] is GLKit.GLKView texture)
-					{
-						texture.Opaque = false;
-					}
+						if (swapChainPanel.Subviews.Length == 1
+							&& swapChainPanel.Subviews[0] is GLKit.GLKView texture)
+						{
+							texture.Opaque = false;
+						}
 #endif
-
-					_hardwareCanvas.Loaded -= UpdateTransparency;
+					}
 				}
 
 				_hardwareCanvas.Loaded += UpdateTransparency;

src/SamplesApp/UITests.Shared/Lottie/LottieProgressPage.xaml

@@ -28,7 +28,7 @@
 		</TextBlock>
 		<!--#endregion-->
 
-		<Border Grid.Row="1">
+		<Border x:Name="container" Grid.Row="1">
 			<!--  AnimatedVisualPlayer  -->
 			<winui:AnimatedVisualPlayer x:Name="Progress_Player"
 											AutoPlay="False">
@@ -43,6 +43,7 @@
 		<!--  Light Switch and Progress Slider  -->
 		<Grid Grid.Row="2" RowSpacing="10">
 			<Grid.ColumnDefinitions>
+				<ColumnDefinition Width="Auto" />
 				<ColumnDefinition Width="Auto" />
 				<ColumnDefinition Width="*" />
 			</Grid.ColumnDefinitions>
@@ -55,8 +56,11 @@
 							  Toggled="LightToggle_Toggled">
 				Light Switch
 			</ToggleSwitch>
+			<Button Grid.Column="1"
+					Content="ReloadView"
+					Click="{x:Bind OnReloadView}" />
 			<!--  Progress Slider: Scrub animation frames  -->
-			<Grid Grid.Column="1">
+			<Grid Grid.Column="2">
 				<StackPanel>
 					<TextBlock Margin="40,20,0,5">Progress Slider</TextBlock>
 					<Slider x:Name="ProgressSlider"

src/SamplesApp/UITests.Shared/Lottie/LottieProgressPage.xaml.cs

@@ -20,6 +20,13 @@ namespace UITests.Lottie
 			var _ = InitializeJsonSource();
 		}
 
+		private async void OnReloadView()
+		{
+			container.Child = null;
+			await Task.Delay(2000);
+			container.Child = Progress_Player;
+		}
+
 		private async Task InitializeJsonSource()
 		{
 			// We'll need to set the JSON Source in code-behind in order to await it ...