fix: ShadowContainer on wasm wasn't repainting when unloaded then loaded

[ramezgerges]

GitHub Issue (If applicable): closes unoplatform/uno#17366

PR Type

What kind of change does this PR introduce?

What is the current behavior?

What is the new behavior?

PR Checklist

Please check if your PR fulfills the following requirements:

• Tested code with current supported SDKs
• Tested the changes where applicable:
  • UWP
  • WinUI
  • iOS
  • Android
  • WASM
  • MacOS
• Updated the documentation as needed:
  • General Doc Update
  • Controls Doc Update
  • Extensions Doc Update
  • controls-styles.md
  • lightweight-styling.md (LightWeight Styling Resource Keys)
• Runtime Tests and/or UI Tests for the changes have been added (for bug fixes / features) (if applicable)
• Contains NO breaking changes
• Associated with an issue (GitHub or internal)
• Commits must be following the Conventional Commits specification.

Other information

Internal Issue (If applicable):

[ramezgerges]

Not sure who to ping, maybe @kazo0. Is there a way to add a UI test in Toolkit? RenderTargetBitmap isn't available on WASm, so adding runtime tests that do image comparisons is not feasible.

For reference, here's a small repro as a diff that can be converted to a test. When the rectangle unloads and loads again, the shadow disappears, which shouldn't happen.

Index: samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/App.xaml.cs
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/App.xaml.cs b/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/App.xaml.cs
--- a/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/App.xaml.cs	(revision e07a955a412551c1357ec6c55cf3c4b761c5111a)
+++ b/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/App.xaml.cs	(date 1720649215271)
@@ -1,7 +1,10 @@
 using Microsoft.Extensions.Logging;
+using Microsoft.UI.Dispatching;
+using Microsoft.UI.Xaml.Shapes;
 using System;
 using System.Globalization;
 using System.Threading.Tasks;
+using Uno.Extensions;
 using Uno.Toolkit.UI;
 using Uno.UI;
 using Windows.ApplicationModel;
@@ -117,7 +120,29 @@
 				// This is to allow the splash/loading view to start to render, before we finishing building shell etc
 				await Task.Yield();
 
-				splash.Content = _shell = BuildShell();
+				var sc = new ShadowContainer()
+				{
+					Shadows = new ShadowCollection().Apply(sc => sc.Add(new Uno.Toolkit.UI.Shadow() { BlurRadius = 50, Color = Microsoft.UI.Colors.FromARGB("#928F99"), Opacity = 0.5 })),
+					Content = new Rectangle()
+					{
+						Width = 100,
+						Height = 100,
+						Fill = new SolidColorBrush(Microsoft.UI.Colors.Red)
+					}
+				};
+				splash.Content = sc;
+
+				DispatcherQueue.GetForCurrentThread().TryEnqueue(DispatcherQueuePriority.Low, async () =>
+				{
+					await Task.Delay(1000);
+					splash.Content = null;
+					DispatcherQueue.GetForCurrentThread().TryEnqueue(DispatcherQueuePriority.Low, async () =>
+					{
+						await Task.Delay(1000);
+						splash.Content = sc;
+					});
+				});
+
 				loadable.IsExecuting = false;
 			}
 

[kazo0]

Not sure who to ping, maybe @kazo0. Is there a way to add a UI test in Toolkit? RenderTargetBitmap isn't available on WASm, so adding runtime tests that do image comparisons is not feasible.

For reference, here's a small repro as a diff that can be converted to a test. When the rectangle unloads and loads again, the shadow disappears, which shouldn't happen.

Index: samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/App.xaml.cs
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/App.xaml.cs b/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/App.xaml.cs
--- a/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/App.xaml.cs	(revision e07a955a412551c1357ec6c55cf3c4b761c5111a)
+++ b/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/App.xaml.cs	(date 1720649215271)
@@ -1,7 +1,10 @@
 using Microsoft.Extensions.Logging;
+using Microsoft.UI.Dispatching;
+using Microsoft.UI.Xaml.Shapes;
 using System;
 using System.Globalization;
 using System.Threading.Tasks;
+using Uno.Extensions;
 using Uno.Toolkit.UI;
 using Uno.UI;
 using Windows.ApplicationModel;
@@ -117,7 +120,29 @@
 				// This is to allow the splash/loading view to start to render, before we finishing building shell etc
 				await Task.Yield();
 
-				splash.Content = _shell = BuildShell();
+				var sc = new ShadowContainer()
+				{
+					Shadows = new ShadowCollection().Apply(sc => sc.Add(new Uno.Toolkit.UI.Shadow() { BlurRadius = 50, Color = Microsoft.UI.Colors.FromARGB("#928F99"), Opacity = 0.5 })),
+					Content = new Rectangle()
+					{
+						Width = 100,
+						Height = 100,
+						Fill = new SolidColorBrush(Microsoft.UI.Colors.Red)
+					}
+				};
+				splash.Content = sc;
+
+				DispatcherQueue.GetForCurrentThread().TryEnqueue(DispatcherQueuePriority.Low, async () =>
+				{
+					await Task.Delay(1000);
+					splash.Content = null;
+					DispatcherQueue.GetForCurrentThread().TryEnqueue(DispatcherQueuePriority.Low, async () =>
+					{
+						await Task.Delay(1000);
+						splash.Content = sc;
+					});
+				});
+
 				loadable.IsExecuting = false;
 			}
 

@ramezgerges You should be able add UI Tests here: https://github.com/unoplatform/uno.toolkit.ui/blob/main/src/Uno.Toolkit.UITest/Controls/ShadowContainer/Given_ShadowContainer.cs

[kazo0]

@ramezgerges it looks like the test you added is failing. I believe because its failing to navigate to your test page. We have to do some funky hacks for the ShadowContainer tests since it is only available in WinUI and not UWP.

you may need to add the ShadowContainerTestPage2 page

here:

uno.toolkit.ui/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Uno.Toolkit.Samples.Shared.projitems

Line 152 in b7fc5f5

<Compile Include="$(MSBuildThisFileDirectory)Content\TestPages\ShadowContainerTestPage.WinUI.xaml.cs" />

and here:

uno.toolkit.ui/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Uno.Toolkit.Samples.Shared.projitems

Lines 239 to 242 in b7fc5f5

	<Page Include="$(MSBuildThisFileDirectory)Content\Controls\ShadowContainerSamplePage.WinUI.xaml">
	<SubType>Designer</SubType>
	<Generator>MSBuild:Compile</Generator>
	</Page>

[kazo0]

@ramezgerges Any chance this may fix any of these ShadowContainer related issues?

[All platforms][ShadowContainer] Not possible at the moment to insert a Border between Background and inset-shadow · Issue #795 · unoplatform/uno.toolkit.ui (github.com)

[ShadowContainer][Wasm] Shadow Builder - Delay visible when adding/removing shadows or switching to Light/Dark · Issue #976 · unoplatform/Uno.Gallery (github.com)

[Win][ShadowContainer] Container enlarges for a single frame during click · Issue #996 · unoplatform/Uno.Gallery (github.com)

[ramezgerges]

@kazo0 Most likely not, but it's an invalidation issue, so anything with a "this thing should show but it doesn't" problem could be affected.