[Win][ShadowContainer] Container enlarges for a single frame during click

[Xiaoy312]

Current behavior

How to reproduce it (as minimally and precisely as possible)

• launch gallery from #992 branch on windows
• navigate to Toolkit\ShadowContainer
• choose "CheckBox" from the dropdown
• click on the checkbox

Environment

Nuget Package:

Package Version(s):

Affected platform(s): Windows; does not happen on [Skia,Wasm,iOS,Droid]

Visual Studio:

• [ ] 2017 (version: )
• [ ] 2019 (version: )
• [ ] for Mac (version: )

Relevant plugins:

• [ ] Resharper (version: )

Anything else we need to know?

[agneszitte]

@Xiaoy312 Can you try to remove the Shadows property here in the template of the style and set the Shadows only in the visual states please?

https://github.com/unoplatform/Uno.Gallery/blob/4815606be29c9cea97416c7dc72ada03451809b3/Uno.Gallery/Uno.Gallery.Shared/Views/Styles/NeumorphicStyles.xaml#L1588C18-L1588C18

I think there is an issue when the Shadows property is set in the template and needs to be changed in the visual states afterward But if the Shadows property is not set in the template and only set in the visual states then it is fine

Let's see if the current issue you opened is related to that please

[Xiaoy312]

removing default ShadowContainer.Shadows and re-applying it via VisualState.Setters does not work (failed on chip, radio, check)

[Xiaoy312]

this issue seems like a resurgence of unoplatform/uno.toolkit.ui#794 but for different platforms, and also 794 is no longer reproducible on latest version (and legacy stable) as of written (Uno.Toolkit.Skia.WinUI@5.0.0-dev.94, Uno.Toolkit.Skia.WinUI@4.2.22)

however, this issue is still reproducible, but can use the same workaround suggested from 794

[rafael-rosa-knowcode]

@agneszitte @roubachof I created a branch (dev/ramr/issue996) in Toolkit.ui that allows you to reproduce the case during Mouser Over, which makes it easier to test and reproduce the error. Try to add a Breakpoint on the OnSurfacePainted and on the InvalidateCanvasLayoutSize and check the maxBlurRadius variable.

https://github.com/unoplatform/Uno.Gallery/assets/116665025/bccb318c-894d-4bb4-8257-f3f14009252e

The situation occurs due to the visualState event changing the size of the component, in this case becoming larger, and only after the Arrange phase, during the Render phase that Paint is executed and the image is adjusted to the new required image (where there are more BlurRadius). I believe we will need to validate the size change issue before the Render phase or use the same solution that @Xiaoy312 already used in the workaround, which was to leave the shadows transparent until the new render.

[roubachof]

Will have a look at this one.

[Xiaoy312]

I believe we will need to validate the size change issue before the Render phase or use the same solution that @Xiaoy312 already used in the workaround, [which was to leave the shadows transparent until the new render].

thats not what i said or left in the comment. the issue was caused by switching between shadows that produced different layout (for InvalidateCanvasLayoutSize part) the workaround was to add a [color=transparent opacity=0] shadow whose blur and spread, so the resulting layout would be the same, while not affecting the final drawing by using an invisible shadow