[WinUI/ShadowContainer] ShadowContainer content not stretching by default

[agneszitte]

Current behavior

ShadowContainer content not stretching by default

Expected behavior

ShadowContainer content should stretch by default to allow controls inside to properly stretch also if needed

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

Related test branch : https://github.com/unoplatform/uno.toolkit.ui/tree/dev/agzi/ShadowContainerStretchContentIssue

<!-- Test ShadowContainer not stretching its content by default -->

							<StackPanel Background="{StaticResource UnoColor}"
										HorizontalAlignment="Stretch"
										BorderBrush="Black"
										BorderThickness="1"
										Spacing="10"
										Padding="20">
								
								<TextBox Padding="10"
										 Background="Purple"
										 CornerRadius="20"
										 Foreground="White"
										 HorizontalAlignment="Stretch"
										 PlaceholderForeground="LightGray"
										 PlaceholderText="Hollow element"
										 Text="Password" />
								
								<utu:ShadowContainer Shadows="{StaticResource NeumorphismHollow}"
													 HorizontalAlignment="Stretch"
													 HorizontalContentAlignment="Stretch">
									<TextBox Padding="10"
											 Background="{StaticResource UnoColor}"
											 BorderThickness="0"
											 CornerRadius="20"
											 Foreground="White"
											 HorizontalAlignment="Stretch"
											 PlaceholderForeground="LightGray"
											 PlaceholderText="Hollow element"
											 Text="Password" />
								</utu:ShadowContainer>
							</StackPanel>

Nuget Package: Uno.Toolkit.UI

Package Version(s): 4.0.0-dev.67

Affected platform(s):

• Windows
• [?] Double-check properly the other platforms

IDE:

• Visual Studio 2022
• Visual Studio 2019
• Visual Studio Code
• Visual Studio for Mac
• Rider Windows
• Rider macOS

[Xiaoy312]

related: #677

[rafael-rosa-knowcode]

Since we are using canvas
It does not respond to the HorizontalAlignment command, as it uses a defined position.
As can be seen in the link
https://playground.platform.uno/#ceb8c3ed

[roubachof]

If we use a grid or a clipping layout will have the following:

1. Shadows will be clipped
2. The shadow component will become a real layout with its own size whereas it should depend only on the size of its child.

canvas	clipping layout

We could consider the shadow container as a "ghost" component meaning that it's only a component adapting its size to its child.
Doing so, the child is the master of the positioning and sizing.
In fact the shadow container is only the "shadow(s)" of the content. So it should be totally dependent of the positioning/sizing on the element casting the shadow (its content)

[roubachof]

Maybe a grid with two children: the current canvas and the element casting the shadow on top of it would do the trick...

[roubachof]

To be more clear:

Maybe a possible structure could be then:

Grid
  -> Canvas
    -> SkCanvas
  -> Child

This way the grid will have the same size of its child but the shadows will not be clipped.