From 203e83e0260c5daae4fd697452fcbe410cbe8a3d Mon Sep 17 00:00:00 2001
From: roubachof <jm.alfonsi@gmail.com>
Date: Thu, 7 Sep 2023 19:27:27 +0200
Subject: [PATCH 1/4] fix(ShadowContainer): prevent unnecessary repaint

---
 .../ShadowContainerSamplePage.WinUI.xaml      | 1074 +++++++++--------
 .../Controls/Shadows/ShadowContainer.Paint.cs |   43 +-
 2 files changed, 600 insertions(+), 517 deletions(-)

diff --git a/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/ShadowContainerSamplePage.WinUI.xaml b/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/ShadowContainerSamplePage.WinUI.xaml
index a0f368ad9..1a62e9cdc 100644
--- a/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/ShadowContainerSamplePage.WinUI.xaml
+++ b/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/ShadowContainerSamplePage.WinUI.xaml
@@ -82,8 +82,20 @@
 						Color="#8c76ff" />
 		</utu:ShadowCollection>
 		<utu:ShadowCollection x:Key="TestRedGreenShadows">
-			<utu:Shadow OffsetX="-5" OffsetY="-5"  BlurRadius="10" Spread="0" Color="Red" Opacity="1" IsInner="True" />
-			<utu:Shadow OffsetX="4" OffsetY="4" BlurRadius="10" Spread="0" Color="Green" Opacity="1" IsInner="True" />
+			<utu:Shadow BlurRadius="10"
+						IsInner="True"
+						OffsetX="-5"
+						OffsetY="-5"
+						Opacity="1"
+						Spread="0"
+						Color="Red" />
+			<utu:Shadow BlurRadius="10"
+						IsInner="True"
+						OffsetX="4"
+						OffsetY="4"
+						Opacity="1"
+						Spread="0"
+						Color="Green" />
 		</utu:ShadowCollection>
 	</Page.Resources>
 
@@ -94,15 +106,15 @@
 					<ScrollViewer HorizontalScrollMode="Disabled">
 						<StackPanel Spacing="24">
 
-							<!-- Calculator -->
+							<!--  Calculator  -->
 							<StackPanel>
-								<TextBlock Text="Many colored shadows" Style="{StaticResource TitleTextBlockStyle}" />
-								<TextBlock Text="You can add as many shadows as you like. You can also dynamically change the shadow properties." Style="{StaticResource BodyTextBlockStyle}" />
+								<TextBlock Style="{StaticResource TitleTextBlockStyle}" Text="Many colored shadows" />
+								<TextBlock Style="{StaticResource BodyTextBlockStyle}" Text="You can add as many shadows as you like. You can also dynamically change the shadow properties." />
 
 								<utu:ShadowContainer x:Name="ShadowContainer"
+													 Margin="32"
 													 Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
-													 CornerRadius="20"
-													 Margin="32">
+													 CornerRadius="20">
 									<utu:ShadowContainer.Shadows>
 										<utu:ShadowCollection x:Name="Shadows">
 											<utu:Shadow BlurRadius="20"
@@ -123,8 +135,8 @@
 												MaxWidth="500"
 												Padding="16"
 												BorderBrush="{StaticResource CardStrokeColorDefaultBrush}"
-												CornerRadius="20"
-												BorderThickness="1">
+												BorderThickness="1"
+												CornerRadius="20">
 										<ItemsRepeater x:Name="ShadowsItemsControl">
 											<ItemsRepeater.ItemTemplate>
 												<DataTemplate>
@@ -182,19 +194,19 @@
 											<utu:ShadowContainer Background="{StaticResource UnoColor}"
 																 CornerRadius="20"
 																 Shadows="{StaticResource ButtonShadows}">
-												<Button Content="Add Shadow"
-														Click="AddShadow"
-														Background="Transparent"
+												<Button Background="Transparent"
 														BorderThickness="1"
+														Click="AddShadow"
+														Content="Add Shadow"
 														Foreground="White" />
 											</utu:ShadowContainer>
 											<utu:ShadowContainer Background="{StaticResource UnoColor}"
 																 CornerRadius="20"
 																 Shadows="{StaticResource ButtonShadows}">
-												<Button Content="Remove Shadow"
-														Click="RemoveShadow"
-														Background="Transparent"
+												<Button Background="Transparent"
 														BorderThickness="1"
+														Click="RemoveShadow"
+														Content="Remove Shadow"
 														Foreground="White" />
 											</utu:ShadowContainer>
 										</StackPanel>
@@ -202,10 +214,10 @@
 								</utu:ShadowContainer>
 							</StackPanel>
 
-							<!-- Purple-ish Panel -->
+							<!--  Purple-ish Panel  -->
 							<StackPanel>
-								<TextBlock Text="Enable neumorphism" Style="{StaticResource TitleTextBlockStyle}" />
-								<TextBlock Text="Being able to add several shadows enables you to create neumorphic designs." Style="{StaticResource BodyTextBlockStyle}" />
+								<TextBlock Style="{StaticResource TitleTextBlockStyle}" Text="Enable neumorphism" />
+								<TextBlock Style="{StaticResource BodyTextBlockStyle}" Text="Being able to add several shadows enables you to create neumorphic designs." />
 
 								<StackPanel Width="400"
 											Margin="0,20"
@@ -244,9 +256,9 @@
 												 PlaceholderText="Hollow element"
 												 Text="Login" />
 									</utu:ShadowContainer>
-									<utu:ShadowContainer Background="{StaticResource UnoColor}"
-														 Shadows="{StaticResource NeumorphismHollow}"
-														 Margin="0,15">
+									<utu:ShadowContainer Margin="0,15"
+														 Background="{StaticResource UnoColor}"
+														 Shadows="{StaticResource NeumorphismHollow}">
 										<TextBox Width="200"
 												 Padding="10"
 												 BorderThickness="0"
@@ -262,11 +274,11 @@
 														 Shadows="{StaticResource NeumorphismBulging}">
 										<Button Width="200"
 												Height="40"
+												HorizontalAlignment="Center"
+												Background="Transparent"
 												BorderBrush="{StaticResource UnoColor}"
 												Content="Bulging element"
 												CornerRadius="15"
-												HorizontalAlignment="Center"
-												Background="Transparent"
 												Foreground="White" />
 									</utu:ShadowContainer>
 
@@ -277,70 +289,136 @@
 												Spacing="16">
 
 										<utu:ShadowContainer Background="{StaticResource UnoColor}" Shadows="{StaticResource NeumorphismRaising}">
-											<Button Content="Regular"
-													CornerRadius="20"
+											<Button Background="Transparent"
 													BorderThickness="0"
-													Background="Transparent"
+													Content="Regular"
+													CornerRadius="20"
 													Foreground="White" />
 										</utu:ShadowContainer>
 
 										<utu:ShadowContainer Background="{StaticResource UnoColor}" Shadows="{StaticResource NeumorphismRaising}">
-											<Button Content="Round"
-													Width="100"
+											<Button Width="100"
 													Height="100"
+													Background="Transparent"
 													BorderBrush="{StaticResource UnoColor}"
+													Content="Round"
 													CornerRadius="50"
-													Background="Transparent"
 													Foreground="White" />
 										</utu:ShadowContainer>
 
 										<utu:ShadowContainer Background="{StaticResource UnoColor}" Shadows="{StaticResource NeumorphismRaising}">
-											<Button Content="Bigger"
-													Height="60"
+											<Button Height="60"
+													Background="Transparent"
 													BorderThickness="0"
+													Content="Bigger"
 													CornerRadius="20"
-													Background="Transparent"
 													Foreground="White" />
 										</utu:ShadowContainer>
 									</StackPanel>
 								</StackPanel>
 							</StackPanel>
 
-							<!-- Complex Shadow Shapes -->
+							<!--  Complex Shadow Shapes  -->
 							<StackPanel Spacing="8">
-								<TextBlock Text="Complex Shadow Shapes" Style="{StaticResource TitleTextBlockStyle}" />
+								<TextBlock Style="{StaticResource TitleTextBlockStyle}" Text="Complex Shadow Shapes" />
+
+								<!--
+									Should be the same as: https://developer.mozilla.org/fr/docs/Web/CSS/CSS_backgrounds_and_borders/Box-shadow_generator
+									element {
+									width: 300px;	height: 100px;	background-color: #7A67F8;	position: relative;
+									box-shadow:
+									6px -5px 5px 0px #E88BAB,
+									inset 5px -5px 5px 0px #94DB6D,
+									inset -20px -10px 10px 10px #000000;
+									}
+								-->
+								<utu:ShadowContainer Margin="0,30" Background="{StaticResource UnoColor}">
+									<utu:ShadowContainer.Shadows>
+										<utu:ShadowCollection>
+											<utu:Shadow BlurRadius="10"
+														IsInner="True"
+														OffsetX="-20"
+														OffsetY="-10"
+														Opacity="1"
+														Spread="10"
+														Color="Black" />
+											<utu:Shadow BlurRadius="5"
+														IsInner="True"
+														OffsetX="5"
+														OffsetY="-5"
+														Opacity="1"
+														Spread="0"
+														Color="#94DB6D" />
+											<utu:Shadow BlurRadius="5"
+														OffsetX="6"
+														OffsetY="-5"
+														Opacity="1"
+														Spread="0"
+														Color="#E88BAB" />
+										</utu:ShadowCollection>
+									</utu:ShadowContainer.Shadows>
+									<Button Width="300"
+											Height="100"
+											Background="Transparent"
+											BorderThickness="0"
+											Content="CSS box-shadow"
+											CornerRadius="0"
+											Foreground="White" />
+								</utu:ShadowContainer>
+
 
 								<StackPanel>
 									<TextBlock Text="Border 200x100 CR=10,50,10,50" />
 									<StackPanel Orientation="Horizontal">
-										<Border Width="200" Height="100" CornerRadius="10,50,10,50" Background="Blue" />
+										<Border Width="200"
+												Height="100"
+												Background="Blue"
+												CornerRadius="10,50,10,50" />
 										<utu:ShadowContainer Background="Blue" Shadows="{StaticResource TestRedGreenShadows}">
-											<Border Width="200" Height="100" CornerRadius="10,50,10,50" />
+											<Border Width="200"
+													Height="100"
+													CornerRadius="10,50,10,50" />
 										</utu:ShadowContainer>
 									</StackPanel>
 								</StackPanel>
 								<StackPanel>
 									<TextBlock Text="Rectangle 200x100 Radius=50,20" />
 									<StackPanel Orientation="Horizontal">
-										<Rectangle Width="200" Height="100" RadiusX="50" RadiusY="20" Fill="Blue" />
+										<Rectangle Width="200"
+												   Height="100"
+												   Fill="Blue"
+												   RadiusX="50"
+												   RadiusY="20" />
 										<utu:ShadowContainer Background="Blue" Shadows="{StaticResource TestRedGreenShadows}">
-											<Rectangle Width="200" Height="100" RadiusX="50" RadiusY="20" />
+											<Rectangle Width="200"
+													   Height="100"
+													   RadiusX="50"
+													   RadiusY="20" />
 										</utu:ShadowContainer>
 									</StackPanel>
 								</StackPanel>
 								<StackPanel>
 									<TextBlock Text="Rectangle 200x100 Radius=20,20" />
 									<StackPanel Orientation="Horizontal">
-										<Rectangle Width="200" Height="100" RadiusX="20" RadiusY="20" Fill="Blue" />
+										<Rectangle Width="200"
+												   Height="100"
+												   Fill="Blue"
+												   RadiusX="20"
+												   RadiusY="20" />
 										<utu:ShadowContainer Background="Blue" Shadows="{StaticResource TestRedGreenShadows}">
-											<Rectangle Width="200" Height="100" RadiusX="20" RadiusY="20" />
+											<Rectangle Width="200"
+													   Height="100"
+													   RadiusX="20"
+													   RadiusY="20" />
 										</utu:ShadowContainer>
 									</StackPanel>
 								</StackPanel>
 								<StackPanel>
 									<TextBlock Text="Ellipse 100x100" />
 									<StackPanel Orientation="Horizontal">
-										<Ellipse Width="100" Height="100" Fill="Blue" />
+										<Ellipse Width="100"
+												 Height="100"
+												 Fill="Blue" />
 										<utu:ShadowContainer Background="Blue" Shadows="{StaticResource TestRedGreenShadows}">
 											<Ellipse Width="100" Height="100" />
 										</utu:ShadowContainer>
@@ -349,7 +427,9 @@
 								<StackPanel>
 									<TextBlock Text="Ellipse 200x100" />
 									<StackPanel Orientation="Horizontal">
-										<Ellipse Width="200" Height="100" Fill="Blue" />
+										<Ellipse Width="200"
+												 Height="100"
+												 Fill="Blue" />
 										<utu:ShadowContainer Background="Blue" Shadows="{StaticResource TestRedGreenShadows}">
 											<Ellipse Width="200" Height="100" />
 										</utu:ShadowContainer>
@@ -357,515 +437,509 @@
 								</StackPanel>
 
 
-								<!--Test ShadowContainer stretching its content by default-->
+								<!--  Test ShadowContainer stretching its content by default  -->
 
-								<StackPanel HorizontalAlignment="Stretch"
-										Spacing="50"
-										Padding="20">
+								<StackPanel Padding="20"
+											HorizontalAlignment="Stretch"
+											Spacing="50">
 
-									<utu:ShadowContainer Shadows="{StaticResource ButtonShadows}"
-													 HorizontalAlignment="Stretch"
-													 HorizontalContentAlignment="Stretch"
-													 Background="{StaticResource UnoColor}">
-										<TextBox Padding="10"
-											 BorderThickness="0"
-											 CornerRadius="20"
-											 Foreground="White"
-											 HorizontalAlignment="Stretch"
-											 PlaceholderForeground="LightGray"
-											 PlaceholderText="Shadows element"
-											 Text="NO Padding NO Margin"/>
-									</utu:ShadowContainer>
-
-									<utu:ShadowContainer Shadows="{StaticResource ButtonShadows}"
-													 HorizontalAlignment="Stretch"
-													 HorizontalContentAlignment="Stretch"
-													 Background="{StaticResource UnoColor}">
+									<utu:ShadowContainer HorizontalAlignment="Stretch"
+														 HorizontalContentAlignment="Stretch"
+														 Background="{StaticResource UnoColor}"
+														 Shadows="{StaticResource ButtonShadows}">
 										<TextBox Padding="10"
-											 BorderThickness="0"
-											 CornerRadius="20"
-											 Foreground="White"
-											 HorizontalAlignment="Stretch"
-											 PlaceholderForeground="LightGray"
-											 PlaceholderText="Shadows element"
-											 Text="Padding"/>
-									</utu:ShadowContainer>
-
-
-									<utu:ShadowContainer Shadows="{StaticResource ButtonShadows}"
-													 HorizontalAlignment="Stretch"
-													 HorizontalContentAlignment="Stretch"
-													 Background="{StaticResource UnoColor}">
-										<TextBox BorderThickness="0"
-											 CornerRadius="20"
-											 Foreground="White"
-											 HorizontalAlignment="Stretch"
-											 PlaceholderForeground="LightGray"
-											 PlaceholderText="Shadows element"
-											 Text="Margin"
-											 Margin="30,30,30,30"/>
-									</utu:ShadowContainer>
-
-
-									<utu:ShadowContainer Shadows="{StaticResource ButtonShadows}"
-													 HorizontalAlignment="Stretch"
-													 HorizontalContentAlignment="Stretch"
-													 Background="{StaticResource UnoColor}">
+												 HorizontalAlignment="Stretch"
+												 BorderThickness="0"
+												 CornerRadius="20"
+												 Foreground="White"
+												 PlaceholderForeground="LightGray"
+												 PlaceholderText="Shadows element"
+												 Text="NO Padding NO Margin" />
+									</utu:ShadowContainer>
+
+									<utu:ShadowContainer HorizontalAlignment="Stretch"
+														 HorizontalContentAlignment="Stretch"
+														 Background="{StaticResource UnoColor}"
+														 Shadows="{StaticResource ButtonShadows}">
 										<TextBox Padding="10"
-											 BorderThickness="0"
-											 CornerRadius="20"
-											 Foreground="White"
-											 HorizontalAlignment="Stretch"
-											 PlaceholderForeground="LightGray"
-											 PlaceholderText="Shadows element"
-											 Text="Padding + Margin diff"
-											 Margin="15,30,50,30"/>
-									</utu:ShadowContainer>
-
-
-									<utu:ShadowContainer Shadows="{StaticResource ButtonShadows}"
-													 HorizontalAlignment="Stretch"
-													 HorizontalContentAlignment="Stretch"
-													 Background="{StaticResource UnoColor}">
-										<TextBox BorderThickness="0"
-											 CornerRadius="20"
-											 Foreground="White"
-											 HorizontalAlignment="Stretch"
-											 PlaceholderForeground="LightGray"
-											 PlaceholderText="Shadows element"
-											 Text="Padding"
-											 Padding="15,30,50,30"/>
+												 HorizontalAlignment="Stretch"
+												 BorderThickness="0"
+												 CornerRadius="20"
+												 Foreground="White"
+												 PlaceholderForeground="LightGray"
+												 PlaceholderText="Shadows element"
+												 Text="Padding" />
+									</utu:ShadowContainer>
+
+
+									<utu:ShadowContainer HorizontalAlignment="Stretch"
+														 HorizontalContentAlignment="Stretch"
+														 Background="{StaticResource UnoColor}"
+														 Shadows="{StaticResource ButtonShadows}">
+										<TextBox Margin="30,30,30,30"
+												 HorizontalAlignment="Stretch"
+												 BorderThickness="0"
+												 CornerRadius="20"
+												 Foreground="White"
+												 PlaceholderForeground="LightGray"
+												 PlaceholderText="Shadows element"
+												 Text="Margin" />
+									</utu:ShadowContainer>
+
+
+									<utu:ShadowContainer HorizontalAlignment="Stretch"
+														 HorizontalContentAlignment="Stretch"
+														 Background="{StaticResource UnoColor}"
+														 Shadows="{StaticResource ButtonShadows}">
+										<TextBox Margin="15,30,50,30"
+												 Padding="10"
+												 HorizontalAlignment="Stretch"
+												 BorderThickness="0"
+												 CornerRadius="20"
+												 Foreground="White"
+												 PlaceholderForeground="LightGray"
+												 PlaceholderText="Shadows element"
+												 Text="Padding + Margin diff" />
+									</utu:ShadowContainer>
+
+
+									<utu:ShadowContainer HorizontalAlignment="Stretch"
+														 HorizontalContentAlignment="Stretch"
+														 Background="{StaticResource UnoColor}"
+														 Shadows="{StaticResource ButtonShadows}">
+										<TextBox Padding="15,30,50,30"
+												 HorizontalAlignment="Stretch"
+												 BorderThickness="0"
+												 CornerRadius="20"
+												 Foreground="White"
+												 PlaceholderForeground="LightGray"
+												 PlaceholderText="Shadows element"
+												 Text="Padding" />
 									</utu:ShadowContainer>
 								</StackPanel>
 
 
-								<StackPanel HorizontalAlignment="Stretch"
-										Spacing="50"
-										Padding="20">
-									<utu:ShadowContainer Shadows="{StaticResource NeumorphismHollow}"
-													 HorizontalAlignment="Stretch"
-													 HorizontalContentAlignment="Stretch"
-													 Background="{StaticResource UnoColor}">
-										<TextBox Padding="10"
-											 BorderThickness="0"
-											 CornerRadius="20"
-											 Foreground="White"
-											 HorizontalAlignment="Stretch"
-											 PlaceholderForeground="LightGray"
-											 PlaceholderText="Hollow element"
-											 Text="NO Padding NO Margin"/>
-									</utu:ShadowContainer>
-
-									<utu:ShadowContainer Shadows="{StaticResource NeumorphismHollow}"
-													 HorizontalAlignment="Stretch"
-													 HorizontalContentAlignment="Stretch"
-													 Background="{StaticResource UnoColor}">
+								<StackPanel Padding="20"
+											HorizontalAlignment="Stretch"
+											Spacing="50">
+									<utu:ShadowContainer HorizontalAlignment="Stretch"
+														 HorizontalContentAlignment="Stretch"
+														 Background="{StaticResource UnoColor}"
+														 Shadows="{StaticResource NeumorphismHollow}">
 										<TextBox Padding="10"
-											 BorderThickness="0"
-											 CornerRadius="20"
-											 Foreground="White"
-											 HorizontalAlignment="Stretch"
-											 PlaceholderForeground="LightGray"
-											 PlaceholderText="Hollow element"
-											 Text="Padding"/>
-									</utu:ShadowContainer>
-
-
-									<utu:ShadowContainer Shadows="{StaticResource NeumorphismHollow}"
-													 HorizontalAlignment="Stretch"
-													 HorizontalContentAlignment="Stretch"
-													 Background="{StaticResource UnoColor}">
-										<TextBox BorderThickness="0"
-											 CornerRadius="20"
-											 Foreground="White"
-											 HorizontalAlignment="Stretch"
-											 PlaceholderForeground="LightGray"
-											 PlaceholderText="Hollow element"
-											 Text="Margin"
-											 Margin="30,30,30,30"/>
-									</utu:ShadowContainer>
-
-
-									<utu:ShadowContainer Shadows="{StaticResource NeumorphismHollow}"
-													 HorizontalAlignment="Stretch"
-													 HorizontalContentAlignment="Stretch"
-													 Background="{StaticResource UnoColor}">
+												 HorizontalAlignment="Stretch"
+												 BorderThickness="0"
+												 CornerRadius="20"
+												 Foreground="White"
+												 PlaceholderForeground="LightGray"
+												 PlaceholderText="Hollow element"
+												 Text="NO Padding NO Margin" />
+									</utu:ShadowContainer>
+
+									<utu:ShadowContainer HorizontalAlignment="Stretch"
+														 HorizontalContentAlignment="Stretch"
+														 Background="{StaticResource UnoColor}"
+														 Shadows="{StaticResource NeumorphismHollow}">
 										<TextBox Padding="10"
-											 BorderThickness="0"
-											 CornerRadius="20"
-											 Foreground="White"
-											 HorizontalAlignment="Stretch"
-											 PlaceholderForeground="LightGray"
-											 PlaceholderText="Hollow element"
-											 Text="Padding + Margin diff"
-											 Margin="15,30,50,30"/>
-									</utu:ShadowContainer>
-
-
-									<utu:ShadowContainer Shadows="{StaticResource NeumorphismHollow}"
-													 HorizontalAlignment="Stretch"
-													 HorizontalContentAlignment="Stretch"
-													 Background="{StaticResource UnoColor}">
-										<TextBox 
-											 BorderThickness="0"
-											 CornerRadius="20"
-											 Foreground="White"
-											 HorizontalAlignment="Stretch"
-											 PlaceholderForeground="LightGray"
-											 PlaceholderText="Hollow element"
-											 Text="Padding"
-											 Padding="15,30,50,30"/>
+												 HorizontalAlignment="Stretch"
+												 BorderThickness="0"
+												 CornerRadius="20"
+												 Foreground="White"
+												 PlaceholderForeground="LightGray"
+												 PlaceholderText="Hollow element"
+												 Text="Padding" />
+									</utu:ShadowContainer>
+
+
+									<utu:ShadowContainer HorizontalAlignment="Stretch"
+														 HorizontalContentAlignment="Stretch"
+														 Background="{StaticResource UnoColor}"
+														 Shadows="{StaticResource NeumorphismHollow}">
+										<TextBox Margin="30,30,30,30"
+												 HorizontalAlignment="Stretch"
+												 BorderThickness="0"
+												 CornerRadius="20"
+												 Foreground="White"
+												 PlaceholderForeground="LightGray"
+												 PlaceholderText="Hollow element"
+												 Text="Margin" />
+									</utu:ShadowContainer>
+
+
+									<utu:ShadowContainer HorizontalAlignment="Stretch"
+														 HorizontalContentAlignment="Stretch"
+														 Background="{StaticResource UnoColor}"
+														 Shadows="{StaticResource NeumorphismHollow}">
+										<TextBox Margin="15,30,50,30"
+												 Padding="10"
+												 HorizontalAlignment="Stretch"
+												 BorderThickness="0"
+												 CornerRadius="20"
+												 Foreground="White"
+												 PlaceholderForeground="LightGray"
+												 PlaceholderText="Hollow element"
+												 Text="Padding + Margin diff" />
+									</utu:ShadowContainer>
+
+
+									<utu:ShadowContainer HorizontalAlignment="Stretch"
+														 HorizontalContentAlignment="Stretch"
+														 Background="{StaticResource UnoColor}"
+														 Shadows="{StaticResource NeumorphismHollow}">
+										<TextBox Padding="15,30,50,30"
+												 HorizontalAlignment="Stretch"
+												 BorderThickness="0"
+												 CornerRadius="20"
+												 Foreground="White"
+												 PlaceholderForeground="LightGray"
+												 PlaceholderText="Hollow element"
+												 Text="Padding" />
 									</utu:ShadowContainer>
 								</StackPanel>
 
-								<StackPanel HorizontalAlignment="Stretch"
-										Spacing="50"
-										Padding="20">
+								<StackPanel Padding="20"
+											HorizontalAlignment="Stretch"
+											Spacing="50">
 
-									<utu:ShadowContainer Shadows="{StaticResource NeumorphismRaising}"
-													 HorizontalAlignment="Stretch"
-													 HorizontalContentAlignment="Stretch"
-													 Background="{StaticResource UnoColor}">
-										<TextBox Padding="10"
-											 BorderThickness="0"
-											 CornerRadius="20"
-											 Foreground="White"
-											 HorizontalAlignment="Center"
-											 PlaceholderForeground="LightGray"
-											 PlaceholderText="Raising element"
-											 Text="Center"/>
-									</utu:ShadowContainer>
-
-									<utu:ShadowContainer Shadows="{StaticResource NeumorphismRaising}"
-													 HorizontalAlignment="Stretch"
-													 HorizontalContentAlignment="Stretch"
-													 Background="{StaticResource UnoColor}">
+									<utu:ShadowContainer HorizontalAlignment="Stretch"
+														 HorizontalContentAlignment="Stretch"
+														 Background="{StaticResource UnoColor}"
+														 Shadows="{StaticResource NeumorphismRaising}">
 										<TextBox Padding="10"
-											 BorderThickness="0"
-											 CornerRadius="20"
-											 Foreground="White"
-											 HorizontalAlignment="Right"
-											 PlaceholderForeground="LightGray"
-											 PlaceholderText="Raising element"
-											 Text="Right"/>
-									</utu:ShadowContainer>
-
-
-									<utu:ShadowContainer Shadows="{StaticResource NeumorphismHollow}"
-													 HorizontalAlignment="Stretch"
-													 HorizontalContentAlignment="Stretch"
-													 Background="{StaticResource UnoColor}">
-										<TextBox BorderThickness="0"
-											 CornerRadius="20"
-											 Foreground="White"
-											 HorizontalAlignment="Right"
-											 PlaceholderForeground="LightGray"
-											 PlaceholderText="Hollow element"
-											 Text="Right"
-											 Margin="200,30,30,30"/>
-									</utu:ShadowContainer>
-
-
-									<utu:ShadowContainer Shadows="{StaticResource NeumorphismRaising}"
-													 HorizontalAlignment="Stretch"
-													 HorizontalContentAlignment="Stretch"
-													 Background="{StaticResource UnoColor}">
+												 HorizontalAlignment="Center"
+												 BorderThickness="0"
+												 CornerRadius="20"
+												 Foreground="White"
+												 PlaceholderForeground="LightGray"
+												 PlaceholderText="Raising element"
+												 Text="Center" />
+									</utu:ShadowContainer>
+
+									<utu:ShadowContainer HorizontalAlignment="Stretch"
+														 HorizontalContentAlignment="Stretch"
+														 Background="{StaticResource UnoColor}"
+														 Shadows="{StaticResource NeumorphismRaising}">
 										<TextBox Padding="10"
-											 BorderThickness="0"
-											 CornerRadius="20"
-											 Foreground="White"
-											 HorizontalAlignment="Left"
-											 PlaceholderForeground="LightGray"
-											 PlaceholderText="Raising element"
-											 Text="Left"
-											 Margin="15,30,200,30"/>
-									</utu:ShadowContainer>
-
-
-									<utu:ShadowContainer Shadows="{StaticResource NeumorphismHollow}"
-													 HorizontalAlignment="Stretch"
-													 HorizontalContentAlignment="Stretch"
-													 Background="{StaticResource UnoColor}">
-										<TextBox 
-											 BorderThickness="0"
-											 CornerRadius="20"
-											 Foreground="White"
-											 HorizontalAlignment="Left"
-											 PlaceholderForeground="LightGray"
-											 PlaceholderText="Hollow element"
-											 Text="Left"
-											 Padding="15,30,50,30"/>
-									</utu:ShadowContainer>
-									<utu:ShadowContainer Shadows="{StaticResource NeumorphismHollow}"
-													 HorizontalAlignment="Center"
-													 HorizontalContentAlignment="Center"
-													 Background="{StaticResource UnoColor}">
-										<TextBox 
-											 BorderThickness="0"
-											 CornerRadius="20"
-											 Foreground="White"
-											 HorizontalAlignment="Left"
-											 PlaceholderForeground="LightGray"
-											 PlaceholderText="Hollow element"
-											 Text="Left on ShadowContainer Center"
-											 Padding="15,30,50,30"/>
+												 HorizontalAlignment="Right"
+												 BorderThickness="0"
+												 CornerRadius="20"
+												 Foreground="White"
+												 PlaceholderForeground="LightGray"
+												 PlaceholderText="Raising element"
+												 Text="Right" />
+									</utu:ShadowContainer>
+
+
+									<utu:ShadowContainer HorizontalAlignment="Stretch"
+														 HorizontalContentAlignment="Stretch"
+														 Background="{StaticResource UnoColor}"
+														 Shadows="{StaticResource NeumorphismHollow}">
+										<TextBox Margin="200,30,30,30"
+												 HorizontalAlignment="Right"
+												 BorderThickness="0"
+												 CornerRadius="20"
+												 Foreground="White"
+												 PlaceholderForeground="LightGray"
+												 PlaceholderText="Hollow element"
+												 Text="Right" />
+									</utu:ShadowContainer>
+
+
+									<utu:ShadowContainer HorizontalAlignment="Stretch"
+														 HorizontalContentAlignment="Stretch"
+														 Background="{StaticResource UnoColor}"
+														 Shadows="{StaticResource NeumorphismRaising}">
+										<TextBox Margin="15,30,200,30"
+												 Padding="10"
+												 HorizontalAlignment="Left"
+												 BorderThickness="0"
+												 CornerRadius="20"
+												 Foreground="White"
+												 PlaceholderForeground="LightGray"
+												 PlaceholderText="Raising element"
+												 Text="Left" />
+									</utu:ShadowContainer>
+
+
+									<utu:ShadowContainer HorizontalAlignment="Stretch"
+														 HorizontalContentAlignment="Stretch"
+														 Background="{StaticResource UnoColor}"
+														 Shadows="{StaticResource NeumorphismHollow}">
+										<TextBox Padding="15,30,50,30"
+												 HorizontalAlignment="Left"
+												 BorderThickness="0"
+												 CornerRadius="20"
+												 Foreground="White"
+												 PlaceholderForeground="LightGray"
+												 PlaceholderText="Hollow element"
+												 Text="Left" />
+									</utu:ShadowContainer>
+									<utu:ShadowContainer HorizontalAlignment="Center"
+														 HorizontalContentAlignment="Center"
+														 Background="{StaticResource UnoColor}"
+														 Shadows="{StaticResource NeumorphismHollow}">
+										<TextBox Padding="15,30,50,30"
+												 HorizontalAlignment="Left"
+												 BorderThickness="0"
+												 CornerRadius="20"
+												 Foreground="White"
+												 PlaceholderForeground="LightGray"
+												 PlaceholderText="Hollow element"
+												 Text="Left on ShadowContainer Center" />
 									</utu:ShadowContainer>
 								</StackPanel>
 
 
-								<StackPanel HorizontalAlignment="Stretch"
-										Spacing="50"
-										Padding="20">
+								<StackPanel Padding="20"
+											HorizontalAlignment="Stretch"
+											Spacing="50">
 
-									<utu:ShadowContainer Shadows="{StaticResource NeumorphismRaising}"
-													 HorizontalAlignment="Stretch"
-													 HorizontalContentAlignment="Stretch"
-													 Background="{StaticResource UnoColor}">
+									<utu:ShadowContainer HorizontalAlignment="Stretch"
+														 HorizontalContentAlignment="Stretch"
+														 Background="{StaticResource UnoColor}"
+														 Shadows="{StaticResource NeumorphismRaising}">
 										<TextBox Padding="10"
-											 BorderThickness="0"
-											 CornerRadius="20"
-											 Foreground="White"
-											 HorizontalAlignment="Center"
-											 VerticalAlignment="Center"
-											 PlaceholderForeground="LightGray"
-											 PlaceholderText="Raising element"
-											 Text="Center"/>
-									</utu:ShadowContainer>
-
-									<utu:ShadowContainer Shadows="{StaticResource NeumorphismRaising}"
-													 HorizontalAlignment="Stretch"
-													 HorizontalContentAlignment="Stretch"
-													 Background="{StaticResource UnoColor}">
+												 HorizontalAlignment="Center"
+												 VerticalAlignment="Center"
+												 BorderThickness="0"
+												 CornerRadius="20"
+												 Foreground="White"
+												 PlaceholderForeground="LightGray"
+												 PlaceholderText="Raising element"
+												 Text="Center" />
+									</utu:ShadowContainer>
+
+									<utu:ShadowContainer HorizontalAlignment="Stretch"
+														 HorizontalContentAlignment="Stretch"
+														 Background="{StaticResource UnoColor}"
+														 Shadows="{StaticResource NeumorphismRaising}">
 										<TextBox Padding="10"
-											 BorderThickness="0"
-											 CornerRadius="20"
-											 Foreground="White"
-											 HorizontalAlignment="Right"
-											 VerticalAlignment="Center"
-											 PlaceholderForeground="LightGray"
-											 PlaceholderText="Raising element"
-											 Text="Right"/>
+												 HorizontalAlignment="Right"
+												 VerticalAlignment="Center"
+												 BorderThickness="0"
+												 CornerRadius="20"
+												 Foreground="White"
+												 PlaceholderForeground="LightGray"
+												 PlaceholderText="Raising element"
+												 Text="Right" />
 									</utu:ShadowContainer>
 
 
-									<utu:ShadowContainer Shadows="{StaticResource NeumorphismHollow}"
-													 HorizontalAlignment="Stretch"
-													 HorizontalContentAlignment="Stretch"
-													 Background="{StaticResource UnoColor}">
+									<utu:ShadowContainer HorizontalAlignment="Stretch"
+														 HorizontalContentAlignment="Stretch"
+														 Background="{StaticResource UnoColor}"
+														 Shadows="{StaticResource NeumorphismHollow}">
 										<TextBox Padding="10"
-											 BorderThickness="0"
-											 CornerRadius="20"
-											 Foreground="White"
-											 HorizontalAlignment="Right"
-											 VerticalAlignment="Top"
-											 PlaceholderForeground="LightGray"
-											 PlaceholderText="Raising element"
-											 Text="Right Top "/>
+												 HorizontalAlignment="Right"
+												 VerticalAlignment="Top"
+												 BorderThickness="0"
+												 CornerRadius="20"
+												 Foreground="White"
+												 PlaceholderForeground="LightGray"
+												 PlaceholderText="Raising element"
+												 Text="Right Top " />
 									</utu:ShadowContainer>
 
 
-									<utu:ShadowContainer Shadows="{StaticResource NeumorphismRaising}"
-													 HorizontalAlignment="Stretch"
-													 HorizontalContentAlignment="Stretch"
-													 Background="{StaticResource UnoColor}">
-										<TextBox Padding="10"
-											 BorderThickness="0"
-											 CornerRadius="20"
-											 Foreground="White"
-											 HorizontalAlignment="Left"
-											 VerticalAlignment="Bottom"
-											 PlaceholderForeground="LightGray"
-											 PlaceholderText="Raising element"
-											 Text="Left"
-											 Margin="15,100,50,200"/>
-									</utu:ShadowContainer>
-
-
-									<utu:ShadowContainer Shadows="{StaticResource NeumorphismHollow}"
-													 HorizontalAlignment="Stretch"
-													 HorizontalContentAlignment="Stretch"
-													 Background="{StaticResource UnoColor}">
-										<TextBox 
-											 BorderThickness="0"
-											 CornerRadius="20"
-											 Foreground="White"
-											 HorizontalAlignment="Left"
-											 VerticalAlignment="Top"
-											 PlaceholderForeground="LightGray"
-											 PlaceholderText="Hollow element"
-											 Text="Left"
-											 Margin="15,100,50,100"/>
-									</utu:ShadowContainer>
-									<utu:ShadowContainer Shadows="{StaticResource NeumorphismHollow}"
-													 HorizontalAlignment="Center"
-													 HorizontalContentAlignment="Center"
-													 Background="{StaticResource UnoColor}">
-										<TextBox 
-											 BorderThickness="0"
-											 CornerRadius="20"
-											 Foreground="White"
-											 HorizontalAlignment="Left"
-											 VerticalAlignment="Top"
-											 PlaceholderForeground="LightGray"
-											 PlaceholderText="Hollow element"
-											 Text="Left on ShadowContainer Center"
-											 Padding="15,200,50,100"/>
+									<utu:ShadowContainer HorizontalAlignment="Stretch"
+														 HorizontalContentAlignment="Stretch"
+														 Background="{StaticResource UnoColor}"
+														 Shadows="{StaticResource NeumorphismRaising}">
+										<TextBox Margin="15,100,50,200"
+												 Padding="10"
+												 HorizontalAlignment="Left"
+												 VerticalAlignment="Bottom"
+												 BorderThickness="0"
+												 CornerRadius="20"
+												 Foreground="White"
+												 PlaceholderForeground="LightGray"
+												 PlaceholderText="Raising element"
+												 Text="Left" />
+									</utu:ShadowContainer>
+
+
+									<utu:ShadowContainer HorizontalAlignment="Stretch"
+														 HorizontalContentAlignment="Stretch"
+														 Background="{StaticResource UnoColor}"
+														 Shadows="{StaticResource NeumorphismHollow}">
+										<TextBox Margin="15,100,50,100"
+												 HorizontalAlignment="Left"
+												 VerticalAlignment="Top"
+												 BorderThickness="0"
+												 CornerRadius="20"
+												 Foreground="White"
+												 PlaceholderForeground="LightGray"
+												 PlaceholderText="Hollow element"
+												 Text="Left" />
+									</utu:ShadowContainer>
+									<utu:ShadowContainer HorizontalAlignment="Center"
+														 HorizontalContentAlignment="Center"
+														 Background="{StaticResource UnoColor}"
+														 Shadows="{StaticResource NeumorphismHollow}">
+										<TextBox Padding="15,200,50,100"
+												 HorizontalAlignment="Left"
+												 VerticalAlignment="Top"
+												 BorderThickness="0"
+												 CornerRadius="20"
+												 Foreground="White"
+												 PlaceholderForeground="LightGray"
+												 PlaceholderText="Hollow element"
+												 Text="Left on ShadowContainer Center" />
 									</utu:ShadowContainer>
 								</StackPanel>
 
 
 
 
-								<StackPanel HorizontalAlignment="Stretch"
-										Spacing="50"
-										Padding="20">
+								<StackPanel Padding="20"
+											HorizontalAlignment="Stretch"
+											Spacing="50">
 
 
 
 
-									<utu:ShadowContainer Shadows="{StaticResource NeumorphismBulging}"
-													 HorizontalAlignment="Stretch"
-													 HorizontalContentAlignment="Stretch"
-													 Background="{StaticResource UnoColor}">
-										<TextBox Padding="10"
-											 BorderThickness="0"
-											 CornerRadius="20"
-											 Foreground="White"
-											 HorizontalAlignment="Left"
-											 VerticalAlignment="Center"
-											 PlaceholderForeground="LightGray"
-											 PlaceholderText="Raising element"
-											 Text="Left Margin 0,130,300,20"
-											 Margin="0,130,300,20"/>
-									</utu:ShadowContainer>
-
-
-									<utu:ShadowContainer Shadows="{StaticResource NeumorphismBulging}"
-													 HorizontalAlignment="Stretch"
-													 HorizontalContentAlignment="Stretch"
-													 Background="{StaticResource UnoColor}">
-										<TextBox Padding="10"
-											 BorderThickness="0"
-											 CornerRadius="20"
-											 Foreground="White"
-											 HorizontalAlignment="Left"
-											 VerticalAlignment="Center"
-											 PlaceholderForeground="LightGray"
-											 PlaceholderText="Raising element"
-											 Text="Left Margin 300,20,0,130"
-											 Margin="300,20,0,130"/>
+									<utu:ShadowContainer HorizontalAlignment="Stretch"
+														 HorizontalContentAlignment="Stretch"
+														 Background="{StaticResource UnoColor}"
+														 Shadows="{StaticResource NeumorphismBulging}">
+										<TextBox Margin="0,130,300,20"
+												 Padding="10"
+												 HorizontalAlignment="Left"
+												 VerticalAlignment="Center"
+												 BorderThickness="0"
+												 CornerRadius="20"
+												 Foreground="White"
+												 PlaceholderForeground="LightGray"
+												 PlaceholderText="Raising element"
+												 Text="Left Margin 0,130,300,20" />
 									</utu:ShadowContainer>
 
 
+									<utu:ShadowContainer HorizontalAlignment="Stretch"
+														 HorizontalContentAlignment="Stretch"
+														 Background="{StaticResource UnoColor}"
+														 Shadows="{StaticResource NeumorphismBulging}">
+										<TextBox Margin="300,20,0,130"
+												 Padding="10"
+												 HorizontalAlignment="Left"
+												 VerticalAlignment="Center"
+												 BorderThickness="0"
+												 CornerRadius="20"
+												 Foreground="White"
+												 PlaceholderForeground="LightGray"
+												 PlaceholderText="Raising element"
+												 Text="Left Margin 300,20,0,130" />
+									</utu:ShadowContainer>
 
 
 
 
 
-									<utu:ShadowContainer Shadows="{StaticResource NeumorphismBulging}"
-													 HorizontalAlignment="Stretch"
-													 HorizontalContentAlignment="Stretch"
-													 Background="{StaticResource UnoColor}">
-										<TextBox Padding="10"
-											 BorderThickness="0"
-											 CornerRadius="20"
-											 Foreground="White"
-											 HorizontalAlignment="Right"
-											 VerticalAlignment="Center"
-											 PlaceholderForeground="LightGray"
-											 PlaceholderText="Raising element"
-											 Text="Right Margin 0,130,300,20"
-											 Margin="0,130,300,20"/>
-									</utu:ShadowContainer>
-
-
-									<utu:ShadowContainer Shadows="{StaticResource NeumorphismBulging}"
-													 HorizontalAlignment="Stretch"
-													 HorizontalContentAlignment="Stretch"
-													 Background="{StaticResource UnoColor}">
-										<TextBox Padding="10"
-											 BorderThickness="0"
-											 CornerRadius="20"
-											 Foreground="White"
-											 HorizontalAlignment="Right"
-											 VerticalAlignment="Center"
-											 PlaceholderForeground="LightGray"
-											 PlaceholderText="Raising element"
-											 Text="Right Margin 300,20,0,130"
-											 Margin="300,20,0,130"/>
+
+
+									<utu:ShadowContainer HorizontalAlignment="Stretch"
+														 HorizontalContentAlignment="Stretch"
+														 Background="{StaticResource UnoColor}"
+														 Shadows="{StaticResource NeumorphismBulging}">
+										<TextBox Margin="0,130,300,20"
+												 Padding="10"
+												 HorizontalAlignment="Right"
+												 VerticalAlignment="Center"
+												 BorderThickness="0"
+												 CornerRadius="20"
+												 Foreground="White"
+												 PlaceholderForeground="LightGray"
+												 PlaceholderText="Raising element"
+												 Text="Right Margin 0,130,300,20" />
+									</utu:ShadowContainer>
+
+
+									<utu:ShadowContainer HorizontalAlignment="Stretch"
+														 HorizontalContentAlignment="Stretch"
+														 Background="{StaticResource UnoColor}"
+														 Shadows="{StaticResource NeumorphismBulging}">
+										<TextBox Margin="300,20,0,130"
+												 Padding="10"
+												 HorizontalAlignment="Right"
+												 VerticalAlignment="Center"
+												 BorderThickness="0"
+												 CornerRadius="20"
+												 Foreground="White"
+												 PlaceholderForeground="LightGray"
+												 PlaceholderText="Raising element"
+												 Text="Right Margin 300,20,0,130" />
 									</utu:ShadowContainer>
 
 
 
 
-									<utu:ShadowContainer Shadows="{StaticResource NeumorphismBulging}"
-													 HorizontalAlignment="Stretch"
-													 HorizontalContentAlignment="Stretch"
-													 Background="{StaticResource UnoColor}">
-										<TextBox Padding="10"
-											 BorderThickness="0"
-											 CornerRadius="20"
-											 Foreground="White"
-											 HorizontalAlignment="Center"
-											 VerticalAlignment="Center"
-											 PlaceholderForeground="LightGray"
-											 PlaceholderText="Raising element"
-											 Text="Center Margin 0,130,300,20"
-											 Margin="0,130,300,20"/>
-									</utu:ShadowContainer>
-
-
-									<utu:ShadowContainer Shadows="{StaticResource NeumorphismBulging}"
-													 HorizontalAlignment="Stretch"
-													 HorizontalContentAlignment="Stretch"
-													 Background="{StaticResource UnoColor}">
-										<TextBox Padding="10"
-											 BorderThickness="0"
-											 CornerRadius="20"
-											 Foreground="White"
-											 HorizontalAlignment="Center"
-											 VerticalAlignment="Center"
-											 PlaceholderForeground="LightGray"
-											 PlaceholderText="Raising element"
-											 Text="Center Margin 300,20,0,130"
-											 Margin="300,20,0,130"/>
+									<utu:ShadowContainer HorizontalAlignment="Stretch"
+														 HorizontalContentAlignment="Stretch"
+														 Background="{StaticResource UnoColor}"
+														 Shadows="{StaticResource NeumorphismBulging}">
+										<TextBox Margin="0,130,300,20"
+												 Padding="10"
+												 HorizontalAlignment="Center"
+												 VerticalAlignment="Center"
+												 BorderThickness="0"
+												 CornerRadius="20"
+												 Foreground="White"
+												 PlaceholderForeground="LightGray"
+												 PlaceholderText="Raising element"
+												 Text="Center Margin 0,130,300,20" />
 									</utu:ShadowContainer>
 
 
+									<utu:ShadowContainer HorizontalAlignment="Stretch"
+														 HorizontalContentAlignment="Stretch"
+														 Background="{StaticResource UnoColor}"
+														 Shadows="{StaticResource NeumorphismBulging}">
+										<TextBox Margin="300,20,0,130"
+												 Padding="10"
+												 HorizontalAlignment="Center"
+												 VerticalAlignment="Center"
+												 BorderThickness="0"
+												 CornerRadius="20"
+												 Foreground="White"
+												 PlaceholderForeground="LightGray"
+												 PlaceholderText="Raising element"
+												 Text="Center Margin 300,20,0,130" />
+									</utu:ShadowContainer>
 
 
-									<utu:ShadowContainer Shadows="{StaticResource NeumorphismBulging}"
-													 HorizontalAlignment="Stretch"
-													 HorizontalContentAlignment="Stretch"
-													 Background="{StaticResource UnoColor}">
-										<TextBox Padding="10"
-											 BorderThickness="0"
-											 CornerRadius="20"
-											 Foreground="White"
-											 HorizontalAlignment="Stretch"
-											 VerticalAlignment="Center"
-											 PlaceholderForeground="LightGray"
-											 PlaceholderText="Raising element"
-											 Text="Stretch Margin 0,130,300,20"
-											 Margin="0,130,300,20"/>
-									</utu:ShadowContainer>
-
-
-									<utu:ShadowContainer Shadows="{StaticResource NeumorphismBulging}"
-													 HorizontalAlignment="Stretch"
-													 HorizontalContentAlignment="Stretch"
-													 Background="{StaticResource UnoColor}">
-										<TextBox Padding="10"
-											 
-											 BorderThickness="0"
-											 CornerRadius="20"
-											 Foreground="White"
-											 HorizontalAlignment="Stretch"
-											 VerticalAlignment="Center"
-											 PlaceholderForeground="LightGray"
-											 PlaceholderText="Raising element"
-											 Text="Stretch Margin 300,20,0,130"
-											 Margin="300,20,0,130"/>
+
+
+									<utu:ShadowContainer HorizontalAlignment="Stretch"
+														 HorizontalContentAlignment="Stretch"
+														 Background="{StaticResource UnoColor}"
+														 Shadows="{StaticResource NeumorphismBulging}">
+										<TextBox Margin="0,130,300,20"
+												 Padding="10"
+												 HorizontalAlignment="Stretch"
+												 VerticalAlignment="Center"
+												 BorderThickness="0"
+												 CornerRadius="20"
+												 Foreground="White"
+												 PlaceholderForeground="LightGray"
+												 PlaceholderText="Raising element"
+												 Text="Stretch Margin 0,130,300,20" />
+									</utu:ShadowContainer>
+
+
+									<utu:ShadowContainer HorizontalAlignment="Stretch"
+														 HorizontalContentAlignment="Stretch"
+														 Background="{StaticResource UnoColor}"
+														 Shadows="{StaticResource NeumorphismBulging}">
+										<TextBox Margin="300,20,0,130"
+												 Padding="10"
+												 HorizontalAlignment="Stretch"
+												 VerticalAlignment="Center"
+												 BorderThickness="0"
+												 CornerRadius="20"
+												 Foreground="White"
+												 PlaceholderForeground="LightGray"
+												 PlaceholderText="Raising element"
+												 Text="Stretch Margin 300,20,0,130" />
 									</utu:ShadowContainer>
 
 
@@ -877,11 +951,11 @@
 									<ColumnDefinition Width="Auto" />
 									<ColumnDefinition Width="Auto" />
 								</Grid.ColumnDefinitions>
-								<utu:ShadowContainer Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
-													 CornerRadius="20"
-													 Margin="32">
+								<utu:ShadowContainer Margin="32"
+													 Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
+													 CornerRadius="20">
 									<utu:ShadowContainer.Shadows>
-										<utu:ShadowCollection >
+										<utu:ShadowCollection>
 											<utu:Shadow BlurRadius="20"
 														IsInner="True"
 														OffsetX="10"
@@ -898,10 +972,12 @@
 														Color="{StaticResource UnoPink}" />
 										</utu:ShadowCollection>
 									</utu:ShadowContainer.Shadows>
-									<TextBox Text="Shadow Text" Height="50"/>
+									<TextBox Height="50" Text="Shadow Text" />
 								</utu:ShadowContainer>
 
-								<TextBox Text="Normal Text" Height="50" Grid.Column="1" />
+								<TextBox Grid.Column="1"
+										 Height="50"
+										 Text="Normal Text" />
 							</Grid>
 						</StackPanel>
 					</ScrollViewer>
diff --git a/src/Uno.Toolkit.Skia.WinUI/Controls/Shadows/ShadowContainer.Paint.cs b/src/Uno.Toolkit.Skia.WinUI/Controls/Shadows/ShadowContainer.Paint.cs
index f9b0e32bc..e5ecf192b 100644
--- a/src/Uno.Toolkit.Skia.WinUI/Controls/Shadows/ShadowContainer.Paint.cs
+++ b/src/Uno.Toolkit.Skia.WinUI/Controls/Shadows/ShadowContainer.Paint.cs
@@ -23,6 +23,7 @@ public partial class ShadowContainer
 
 	private ShadowPaintState? _lastPaintState;
 	private bool _isShadowDirty;
+	private int _paintCount;
 
 	internal event EventHandler<SurfacePaintCompletedEventArgs>? SurfacePaintCompleted;
 
@@ -39,7 +40,7 @@ private void OnSurfacePaintCompleted(bool createdNewCanvas)
 	private bool NeedsPaint(ShadowPaintState state, out bool pixelRatioChanged)
 	{
 		var needsPaint = state != _lastPaintState;
-		pixelRatioChanged = state.PixelRatio != _lastPaintState?.PixelRatio;
+		pixelRatioChanged = _lastPaintState != null && state.PixelRatio != _lastPaintState.PixelRatio;
 
 		_lastPaintState = state;
 		return needsPaint;
@@ -81,6 +82,11 @@ private void OnSurfacePainted(object? sender, SKPaintSurfaceEventArgs e)
 			return;
 		}
 
+		if (_logger.IsEnabled(LogLevel.Trace))
+		{
+			_logger.Trace($"[ShadowContainer] Painting shadows (x{++_paintCount}) for content {Content.GetType().Name}, actualSize: {contentAsFE.ActualWidth}x{contentAsFE.ActualHeight}");
+		}
+
 		using var _ = canvas.SnapshotState();
 
 		var key =
@@ -148,7 +154,7 @@ private void OnSurfacePainted(object? sender, SKPaintSurfaceEventArgs e)
 		};
 	}
 
-	private IShadowShapeContext GetShadowShapeContext(object content)
+	private ShadowShapeContext GetShadowShapeContext(object content)
 	{
 		return content switch
 		{
@@ -163,28 +169,29 @@ private IShadowShapeContext GetShadowShapeContext(object content)
 
 	/// <summary>
 	/// Serves both as a record of states relevant to shadow shape (not <see cref="Shape"/>, but in the broad sense), and the implementations for painting the shadows.
+	/// We can't use an interface here or we will lose the ability to compare instances of this class (thanks to generated Equals).
 	/// </summary>
-	private interface IShadowShapeContext
+	private abstract record ShadowShapeContext
 	{
-		void ClipToContent(ShadowPaintState state, SKCanvas canvas);
+		public abstract void ClipToContent(ShadowPaintState state, SKCanvas canvas);
 
-		void DrawContentBackground(ShadowPaintState state, SKCanvas canvas, Color color);
+		public abstract void DrawContentBackground(ShadowPaintState state, SKCanvas canvas, Color color);
 
-		void DrawDropShadow(ShadowPaintState state, SKCanvas canvas, SKPaint paint, ShadowInfo shadow);
+		public abstract void DrawDropShadow(ShadowPaintState state, SKCanvas canvas, SKPaint paint, ShadowInfo shadow);
 
-		void DrawInnerShadow(ShadowPaintState state, SKCanvas canvas, SKPaint paint, ShadowInfo shadow);
+		public abstract void DrawInnerShadow(ShadowPaintState state, SKCanvas canvas, SKPaint paint, ShadowInfo shadow);
 	}
 
-	private abstract record RoundRectShadowShapeContext(double Width, double Height) : IShadowShapeContext
+	private abstract record RoundRectShadowShapeContext(double Width, double Height) : ShadowShapeContext
 	{
 		protected abstract SKRoundRect GetContentShape(ShadowPaintState state);
 
-		public void ClipToContent(ShadowPaintState state, SKCanvas canvas)
+		public override void ClipToContent(ShadowPaintState state, SKCanvas canvas)
 		{
 			canvas.ClipRoundRect(GetContentShape(state), antialias: true);
 		}
 
-		public void DrawContentBackground(ShadowPaintState state, SKCanvas canvas, Color color)
+		public override void DrawContentBackground(ShadowPaintState state, SKCanvas canvas, Color color)
 		{
 			var shape = GetContentShape(state);
 			using var backgroundPaint = new SKPaint
@@ -200,7 +207,7 @@ public void DrawContentBackground(ShadowPaintState state, SKCanvas canvas, Color
 			canvas.DrawRoundRect(shape, backgroundPaint);
 		}
 
-		public void DrawDropShadow(ShadowPaintState state, SKCanvas canvas, SKPaint paint, ShadowInfo shadow)
+		public override void DrawDropShadow(ShadowPaintState state, SKCanvas canvas, SKPaint paint, ShadowInfo shadow)
 		{
 			var spread = (float)shadow.Spread * state.PixelRatio;
 			var offsetX = (float)shadow.OffsetX * state.PixelRatio;
@@ -238,7 +245,7 @@ public void DrawDropShadow(ShadowPaintState state, SKCanvas canvas, SKPaint pain
 			canvas.DrawRoundRect(shape, paint);
 		}
 
-		public void DrawInnerShadow(ShadowPaintState state, SKCanvas canvas, SKPaint paint, ShadowInfo shadow)
+		public override void DrawInnerShadow(ShadowPaintState state, SKCanvas canvas, SKPaint paint, ShadowInfo shadow)
 		{
 			var spread = (float)shadow.Spread * state.PixelRatio;
 			var offsetX = (float)shadow.OffsetX * state.PixelRatio;
@@ -329,7 +336,7 @@ public float GetBlurSigma(float pixelRatio)
 	/// Used in comparison to determine if the shadow needs to be repainted.
 	/// </summary>
 	private sealed record ShadowPaintState(
-		IShadowShapeContext Shape,
+		ShadowShapeContext Shape,
 		Color? Background,
 		float PixelRatio,
 		ShadowInfo[] Shadows)
@@ -355,11 +362,11 @@ public override int GetHashCode()
 		}
 
 		public bool Equals(ShadowPaintState? x) =>
-			x is { } y &&
-			Shape == y.Shape &&
-			Background == y.Background &&
-			PixelRatio == y.PixelRatio &&
-			Shadows.SequenceEqual(y.Shadows);
+			x is not null &&
+			Shape == x.Shape &&
+			Background == x.Background &&
+			PixelRatio == x.PixelRatio &&
+			Shadows.SequenceEqual(x.Shadows);
 	}
 
 	public class SurfacePaintCompletedEventArgs : EventArgs

From bd5d990715b6aa82b7d7b0b9bb1479842a9ffa55 Mon Sep 17 00:00:00 2001
From: roubachof <jm.alfonsi@gmail.com>
Date: Fri, 8 Sep 2023 00:25:58 +0200
Subject: [PATCH 2/4] chore: fixes xaml styler vs config to support config file

---
 .../ShadowContainerSamplePage.WinUI.xaml      | 1036 ++++++++---------
 1 file changed, 502 insertions(+), 534 deletions(-)

diff --git a/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/ShadowContainerSamplePage.WinUI.xaml b/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/ShadowContainerSamplePage.WinUI.xaml
index 1a62e9cdc..feb197439 100644
--- a/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/ShadowContainerSamplePage.WinUI.xaml
+++ b/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/ShadowContainerSamplePage.WinUI.xaml
@@ -82,20 +82,8 @@
 						Color="#8c76ff" />
 		</utu:ShadowCollection>
 		<utu:ShadowCollection x:Key="TestRedGreenShadows">
-			<utu:Shadow BlurRadius="10"
-						IsInner="True"
-						OffsetX="-5"
-						OffsetY="-5"
-						Opacity="1"
-						Spread="0"
-						Color="Red" />
-			<utu:Shadow BlurRadius="10"
-						IsInner="True"
-						OffsetX="4"
-						OffsetY="4"
-						Opacity="1"
-						Spread="0"
-						Color="Green" />
+			<utu:Shadow OffsetX="-5" OffsetY="-5"  BlurRadius="10" Spread="0" Color="Red" Opacity="1" IsInner="True" />
+			<utu:Shadow OffsetX="4" OffsetY="4" BlurRadius="10" Spread="0" Color="Green" Opacity="1" IsInner="True" />
 		</utu:ShadowCollection>
 	</Page.Resources>
 
@@ -106,15 +94,15 @@
 					<ScrollViewer HorizontalScrollMode="Disabled">
 						<StackPanel Spacing="24">
 
-							<!--  Calculator  -->
+							<!-- Calculator -->
 							<StackPanel>
-								<TextBlock Style="{StaticResource TitleTextBlockStyle}" Text="Many colored shadows" />
-								<TextBlock Style="{StaticResource BodyTextBlockStyle}" Text="You can add as many shadows as you like. You can also dynamically change the shadow properties." />
+								<TextBlock Text="Many colored shadows" Style="{StaticResource TitleTextBlockStyle}" />
+								<TextBlock Text="You can add as many shadows as you like. You can also dynamically change the shadow properties." Style="{StaticResource BodyTextBlockStyle}" />
 
 								<utu:ShadowContainer x:Name="ShadowContainer"
-													 Margin="32"
 													 Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
-													 CornerRadius="20">
+													 CornerRadius="20"
+													 Margin="32">
 									<utu:ShadowContainer.Shadows>
 										<utu:ShadowCollection x:Name="Shadows">
 											<utu:Shadow BlurRadius="20"
@@ -135,8 +123,8 @@
 												MaxWidth="500"
 												Padding="16"
 												BorderBrush="{StaticResource CardStrokeColorDefaultBrush}"
-												BorderThickness="1"
-												CornerRadius="20">
+												CornerRadius="20"
+												BorderThickness="1">
 										<ItemsRepeater x:Name="ShadowsItemsControl">
 											<ItemsRepeater.ItemTemplate>
 												<DataTemplate>
@@ -194,19 +182,19 @@
 											<utu:ShadowContainer Background="{StaticResource UnoColor}"
 																 CornerRadius="20"
 																 Shadows="{StaticResource ButtonShadows}">
-												<Button Background="Transparent"
-														BorderThickness="1"
+												<Button Content="Add Shadow"
 														Click="AddShadow"
-														Content="Add Shadow"
+														Background="Transparent"
+														BorderThickness="1"
 														Foreground="White" />
 											</utu:ShadowContainer>
 											<utu:ShadowContainer Background="{StaticResource UnoColor}"
 																 CornerRadius="20"
 																 Shadows="{StaticResource ButtonShadows}">
-												<Button Background="Transparent"
-														BorderThickness="1"
+												<Button Content="Remove Shadow"
 														Click="RemoveShadow"
-														Content="Remove Shadow"
+														Background="Transparent"
+														BorderThickness="1"
 														Foreground="White" />
 											</utu:ShadowContainer>
 										</StackPanel>
@@ -214,10 +202,10 @@
 								</utu:ShadowContainer>
 							</StackPanel>
 
-							<!--  Purple-ish Panel  -->
+							<!-- Purple-ish Panel -->
 							<StackPanel>
-								<TextBlock Style="{StaticResource TitleTextBlockStyle}" Text="Enable neumorphism" />
-								<TextBlock Style="{StaticResource BodyTextBlockStyle}" Text="Being able to add several shadows enables you to create neumorphic designs." />
+								<TextBlock Text="Enable neumorphism" Style="{StaticResource TitleTextBlockStyle}" />
+								<TextBlock Text="Being able to add several shadows enables you to create neumorphic designs." Style="{StaticResource BodyTextBlockStyle}" />
 
 								<StackPanel Width="400"
 											Margin="0,20"
@@ -256,9 +244,9 @@
 												 PlaceholderText="Hollow element"
 												 Text="Login" />
 									</utu:ShadowContainer>
-									<utu:ShadowContainer Margin="0,15"
-														 Background="{StaticResource UnoColor}"
-														 Shadows="{StaticResource NeumorphismHollow}">
+									<utu:ShadowContainer Background="{StaticResource UnoColor}"
+														 Shadows="{StaticResource NeumorphismHollow}"
+														 Margin="0,15">
 										<TextBox Width="200"
 												 Padding="10"
 												 BorderThickness="0"
@@ -274,11 +262,11 @@
 														 Shadows="{StaticResource NeumorphismBulging}">
 										<Button Width="200"
 												Height="40"
-												HorizontalAlignment="Center"
-												Background="Transparent"
 												BorderBrush="{StaticResource UnoColor}"
 												Content="Bulging element"
 												CornerRadius="15"
+												HorizontalAlignment="Center"
+												Background="Transparent"
 												Foreground="White" />
 									</utu:ShadowContainer>
 
@@ -289,40 +277,40 @@
 												Spacing="16">
 
 										<utu:ShadowContainer Background="{StaticResource UnoColor}" Shadows="{StaticResource NeumorphismRaising}">
-											<Button Background="Transparent"
-													BorderThickness="0"
-													Content="Regular"
+											<Button Content="Regular"
 													CornerRadius="20"
+													BorderThickness="0"
+													Background="Transparent"
 													Foreground="White" />
 										</utu:ShadowContainer>
 
 										<utu:ShadowContainer Background="{StaticResource UnoColor}" Shadows="{StaticResource NeumorphismRaising}">
-											<Button Width="100"
+											<Button Content="Round"
+													Width="100"
 													Height="100"
-													Background="Transparent"
 													BorderBrush="{StaticResource UnoColor}"
-													Content="Round"
 													CornerRadius="50"
+													Background="Transparent"
 													Foreground="White" />
 										</utu:ShadowContainer>
 
 										<utu:ShadowContainer Background="{StaticResource UnoColor}" Shadows="{StaticResource NeumorphismRaising}">
-											<Button Height="60"
-													Background="Transparent"
+											<Button Content="Bigger"
+													Height="60"
 													BorderThickness="0"
-													Content="Bigger"
 													CornerRadius="20"
+													Background="Transparent"
 													Foreground="White" />
 										</utu:ShadowContainer>
 									</StackPanel>
 								</StackPanel>
 							</StackPanel>
 
-							<!--  Complex Shadow Shapes  -->
+							<!-- Complex Shadow Shapes -->
 							<StackPanel Spacing="8">
-								<TextBlock Style="{StaticResource TitleTextBlockStyle}" Text="Complex Shadow Shapes" />
+								<TextBlock Text="Complex Shadow Shapes" Style="{StaticResource TitleTextBlockStyle}" />
 
-								<!--
+										<!--
 									Should be the same as: https://developer.mozilla.org/fr/docs/Web/CSS/CSS_backgrounds_and_borders/Box-shadow_generator
 									element {
 									width: 300px;	height: 100px;	background-color: #7A67F8;	position: relative;
@@ -365,60 +353,38 @@
 											CornerRadius="0"
 											Foreground="White" />
 								</utu:ShadowContainer>
-
-
-								<StackPanel>
+								
+								<StackPanel>									
 									<TextBlock Text="Border 200x100 CR=10,50,10,50" />
 									<StackPanel Orientation="Horizontal">
-										<Border Width="200"
-												Height="100"
-												Background="Blue"
-												CornerRadius="10,50,10,50" />
+										<Border Width="200" Height="100" CornerRadius="10,50,10,50" Background="Blue" />
 										<utu:ShadowContainer Background="Blue" Shadows="{StaticResource TestRedGreenShadows}">
-											<Border Width="200"
-													Height="100"
-													CornerRadius="10,50,10,50" />
+											<Border Width="200" Height="100" CornerRadius="10,50,10,50" />
 										</utu:ShadowContainer>
 									</StackPanel>
 								</StackPanel>
 								<StackPanel>
 									<TextBlock Text="Rectangle 200x100 Radius=50,20" />
 									<StackPanel Orientation="Horizontal">
-										<Rectangle Width="200"
-												   Height="100"
-												   Fill="Blue"
-												   RadiusX="50"
-												   RadiusY="20" />
+										<Rectangle Width="200" Height="100" RadiusX="50" RadiusY="20" Fill="Blue" />
 										<utu:ShadowContainer Background="Blue" Shadows="{StaticResource TestRedGreenShadows}">
-											<Rectangle Width="200"
-													   Height="100"
-													   RadiusX="50"
-													   RadiusY="20" />
+											<Rectangle Width="200" Height="100" RadiusX="50" RadiusY="20" />
 										</utu:ShadowContainer>
 									</StackPanel>
 								</StackPanel>
 								<StackPanel>
 									<TextBlock Text="Rectangle 200x100 Radius=20,20" />
 									<StackPanel Orientation="Horizontal">
-										<Rectangle Width="200"
-												   Height="100"
-												   Fill="Blue"
-												   RadiusX="20"
-												   RadiusY="20" />
+										<Rectangle Width="200" Height="100" RadiusX="20" RadiusY="20" Fill="Blue" />
 										<utu:ShadowContainer Background="Blue" Shadows="{StaticResource TestRedGreenShadows}">
-											<Rectangle Width="200"
-													   Height="100"
-													   RadiusX="20"
-													   RadiusY="20" />
+											<Rectangle Width="200" Height="100" RadiusX="20" RadiusY="20" />
 										</utu:ShadowContainer>
 									</StackPanel>
 								</StackPanel>
 								<StackPanel>
 									<TextBlock Text="Ellipse 100x100" />
 									<StackPanel Orientation="Horizontal">
-										<Ellipse Width="100"
-												 Height="100"
-												 Fill="Blue" />
+										<Ellipse Width="100" Height="100" Fill="Blue" />
 										<utu:ShadowContainer Background="Blue" Shadows="{StaticResource TestRedGreenShadows}">
 											<Ellipse Width="100" Height="100" />
 										</utu:ShadowContainer>
@@ -427,9 +393,7 @@
 								<StackPanel>
 									<TextBlock Text="Ellipse 200x100" />
 									<StackPanel Orientation="Horizontal">
-										<Ellipse Width="200"
-												 Height="100"
-												 Fill="Blue" />
+										<Ellipse Width="200" Height="100" Fill="Blue" />
 										<utu:ShadowContainer Background="Blue" Shadows="{StaticResource TestRedGreenShadows}">
 											<Ellipse Width="200" Height="100" />
 										</utu:ShadowContainer>
@@ -437,398 +401,403 @@
 								</StackPanel>
 
 
-								<!--  Test ShadowContainer stretching its content by default  -->
+								<!--Test ShadowContainer stretching its content by default-->
 
-								<StackPanel Padding="20"
-											HorizontalAlignment="Stretch"
-											Spacing="50">
+								<StackPanel HorizontalAlignment="Stretch"
+										Spacing="50"
+										Padding="20">
 
-									<utu:ShadowContainer HorizontalAlignment="Stretch"
-														 HorizontalContentAlignment="Stretch"
-														 Background="{StaticResource UnoColor}"
-														 Shadows="{StaticResource ButtonShadows}">
+									<utu:ShadowContainer Shadows="{StaticResource ButtonShadows}"
+													 HorizontalAlignment="Stretch"
+													 HorizontalContentAlignment="Stretch"
+													 Background="{StaticResource UnoColor}">
 										<TextBox Padding="10"
-												 HorizontalAlignment="Stretch"
-												 BorderThickness="0"
-												 CornerRadius="20"
-												 Foreground="White"
-												 PlaceholderForeground="LightGray"
-												 PlaceholderText="Shadows element"
-												 Text="NO Padding NO Margin" />
-									</utu:ShadowContainer>
-
-									<utu:ShadowContainer HorizontalAlignment="Stretch"
-														 HorizontalContentAlignment="Stretch"
-														 Background="{StaticResource UnoColor}"
-														 Shadows="{StaticResource ButtonShadows}">
+											 BorderThickness="0"
+											 CornerRadius="20"
+											 Foreground="White"
+											 HorizontalAlignment="Stretch"
+											 PlaceholderForeground="LightGray"
+											 PlaceholderText="Shadows element"
+											 Text="NO Padding NO Margin"/>
+									</utu:ShadowContainer>
+
+									<utu:ShadowContainer Shadows="{StaticResource ButtonShadows}"
+													 HorizontalAlignment="Stretch"
+													 HorizontalContentAlignment="Stretch"
+													 Background="{StaticResource UnoColor}">
 										<TextBox Padding="10"
-												 HorizontalAlignment="Stretch"
-												 BorderThickness="0"
-												 CornerRadius="20"
-												 Foreground="White"
-												 PlaceholderForeground="LightGray"
-												 PlaceholderText="Shadows element"
-												 Text="Padding" />
-									</utu:ShadowContainer>
-
-
-									<utu:ShadowContainer HorizontalAlignment="Stretch"
-														 HorizontalContentAlignment="Stretch"
-														 Background="{StaticResource UnoColor}"
-														 Shadows="{StaticResource ButtonShadows}">
-										<TextBox Margin="30,30,30,30"
-												 HorizontalAlignment="Stretch"
-												 BorderThickness="0"
-												 CornerRadius="20"
-												 Foreground="White"
-												 PlaceholderForeground="LightGray"
-												 PlaceholderText="Shadows element"
-												 Text="Margin" />
-									</utu:ShadowContainer>
-
-
-									<utu:ShadowContainer HorizontalAlignment="Stretch"
-														 HorizontalContentAlignment="Stretch"
-														 Background="{StaticResource UnoColor}"
-														 Shadows="{StaticResource ButtonShadows}">
-										<TextBox Margin="15,30,50,30"
-												 Padding="10"
-												 HorizontalAlignment="Stretch"
-												 BorderThickness="0"
-												 CornerRadius="20"
-												 Foreground="White"
-												 PlaceholderForeground="LightGray"
-												 PlaceholderText="Shadows element"
-												 Text="Padding + Margin diff" />
-									</utu:ShadowContainer>
-
-
-									<utu:ShadowContainer HorizontalAlignment="Stretch"
-														 HorizontalContentAlignment="Stretch"
-														 Background="{StaticResource UnoColor}"
-														 Shadows="{StaticResource ButtonShadows}">
-										<TextBox Padding="15,30,50,30"
-												 HorizontalAlignment="Stretch"
-												 BorderThickness="0"
-												 CornerRadius="20"
-												 Foreground="White"
-												 PlaceholderForeground="LightGray"
-												 PlaceholderText="Shadows element"
-												 Text="Padding" />
+											 BorderThickness="0"
+											 CornerRadius="20"
+											 Foreground="White"
+											 HorizontalAlignment="Stretch"
+											 PlaceholderForeground="LightGray"
+											 PlaceholderText="Shadows element"
+											 Text="Padding"/>
+									</utu:ShadowContainer>
+
+
+									<utu:ShadowContainer Shadows="{StaticResource ButtonShadows}"
+													 HorizontalAlignment="Stretch"
+													 HorizontalContentAlignment="Stretch"
+													 Background="{StaticResource UnoColor}">
+										<TextBox BorderThickness="0"
+											 CornerRadius="20"
+											 Foreground="White"
+											 HorizontalAlignment="Stretch"
+											 PlaceholderForeground="LightGray"
+											 PlaceholderText="Shadows element"
+											 Text="Margin"
+											 Margin="30,30,30,30"/>
+									</utu:ShadowContainer>
+
+
+									<utu:ShadowContainer Shadows="{StaticResource ButtonShadows}"
+													 HorizontalAlignment="Stretch"
+													 HorizontalContentAlignment="Stretch"
+													 Background="{StaticResource UnoColor}">
+										<TextBox Padding="10"
+											 BorderThickness="0"
+											 CornerRadius="20"
+											 Foreground="White"
+											 HorizontalAlignment="Stretch"
+											 PlaceholderForeground="LightGray"
+											 PlaceholderText="Shadows element"
+											 Text="Padding + Margin diff"
+											 Margin="15,30,50,30"/>
+									</utu:ShadowContainer>
+
+
+									<utu:ShadowContainer Shadows="{StaticResource ButtonShadows}"
+													 HorizontalAlignment="Stretch"
+													 HorizontalContentAlignment="Stretch"
+													 Background="{StaticResource UnoColor}">
+										<TextBox BorderThickness="0"
+											 CornerRadius="20"
+											 Foreground="White"
+											 HorizontalAlignment="Stretch"
+											 PlaceholderForeground="LightGray"
+											 PlaceholderText="Shadows element"
+											 Text="Padding"
+											 Padding="15,30,50,30"/>
 									</utu:ShadowContainer>
 								</StackPanel>
 
 
-								<StackPanel Padding="20"
-											HorizontalAlignment="Stretch"
-											Spacing="50">
-									<utu:ShadowContainer HorizontalAlignment="Stretch"
-														 HorizontalContentAlignment="Stretch"
-														 Background="{StaticResource UnoColor}"
-														 Shadows="{StaticResource NeumorphismHollow}">
+								<StackPanel HorizontalAlignment="Stretch"
+										Spacing="50"
+										Padding="20">
+									<utu:ShadowContainer Shadows="{StaticResource NeumorphismHollow}"
+													 HorizontalAlignment="Stretch"
+													 HorizontalContentAlignment="Stretch"
+													 Background="{StaticResource UnoColor}">
 										<TextBox Padding="10"
-												 HorizontalAlignment="Stretch"
-												 BorderThickness="0"
-												 CornerRadius="20"
-												 Foreground="White"
-												 PlaceholderForeground="LightGray"
-												 PlaceholderText="Hollow element"
-												 Text="NO Padding NO Margin" />
-									</utu:ShadowContainer>
-
-									<utu:ShadowContainer HorizontalAlignment="Stretch"
-														 HorizontalContentAlignment="Stretch"
-														 Background="{StaticResource UnoColor}"
-														 Shadows="{StaticResource NeumorphismHollow}">
+											 BorderThickness="0"
+											 CornerRadius="20"
+											 Foreground="White"
+											 HorizontalAlignment="Stretch"
+											 PlaceholderForeground="LightGray"
+											 PlaceholderText="Hollow element"
+											 Text="NO Padding NO Margin"/>
+									</utu:ShadowContainer>
+
+									<utu:ShadowContainer Shadows="{StaticResource NeumorphismHollow}"
+													 HorizontalAlignment="Stretch"
+													 HorizontalContentAlignment="Stretch"
+													 Background="{StaticResource UnoColor}">
 										<TextBox Padding="10"
-												 HorizontalAlignment="Stretch"
-												 BorderThickness="0"
-												 CornerRadius="20"
-												 Foreground="White"
-												 PlaceholderForeground="LightGray"
-												 PlaceholderText="Hollow element"
-												 Text="Padding" />
-									</utu:ShadowContainer>
-
-
-									<utu:ShadowContainer HorizontalAlignment="Stretch"
-														 HorizontalContentAlignment="Stretch"
-														 Background="{StaticResource UnoColor}"
-														 Shadows="{StaticResource NeumorphismHollow}">
-										<TextBox Margin="30,30,30,30"
-												 HorizontalAlignment="Stretch"
-												 BorderThickness="0"
-												 CornerRadius="20"
-												 Foreground="White"
-												 PlaceholderForeground="LightGray"
-												 PlaceholderText="Hollow element"
-												 Text="Margin" />
-									</utu:ShadowContainer>
-
-
-									<utu:ShadowContainer HorizontalAlignment="Stretch"
-														 HorizontalContentAlignment="Stretch"
-														 Background="{StaticResource UnoColor}"
-														 Shadows="{StaticResource NeumorphismHollow}">
-										<TextBox Margin="15,30,50,30"
-												 Padding="10"
-												 HorizontalAlignment="Stretch"
-												 BorderThickness="0"
-												 CornerRadius="20"
-												 Foreground="White"
-												 PlaceholderForeground="LightGray"
-												 PlaceholderText="Hollow element"
-												 Text="Padding + Margin diff" />
-									</utu:ShadowContainer>
-
-
-									<utu:ShadowContainer HorizontalAlignment="Stretch"
-														 HorizontalContentAlignment="Stretch"
-														 Background="{StaticResource UnoColor}"
-														 Shadows="{StaticResource NeumorphismHollow}">
-										<TextBox Padding="15,30,50,30"
-												 HorizontalAlignment="Stretch"
-												 BorderThickness="0"
-												 CornerRadius="20"
-												 Foreground="White"
-												 PlaceholderForeground="LightGray"
-												 PlaceholderText="Hollow element"
-												 Text="Padding" />
+											 BorderThickness="0"
+											 CornerRadius="20"
+											 Foreground="White"
+											 HorizontalAlignment="Stretch"
+											 PlaceholderForeground="LightGray"
+											 PlaceholderText="Hollow element"
+											 Text="Padding"/>
+									</utu:ShadowContainer>
+
+
+									<utu:ShadowContainer Shadows="{StaticResource NeumorphismHollow}"
+													 HorizontalAlignment="Stretch"
+													 HorizontalContentAlignment="Stretch"
+													 Background="{StaticResource UnoColor}">
+										<TextBox BorderThickness="0"
+											 CornerRadius="20"
+											 Foreground="White"
+											 HorizontalAlignment="Stretch"
+											 PlaceholderForeground="LightGray"
+											 PlaceholderText="Hollow element"
+											 Text="Margin"
+											 Margin="30,30,30,30"/>
+									</utu:ShadowContainer>
+
+
+									<utu:ShadowContainer Shadows="{StaticResource NeumorphismHollow}"
+													 HorizontalAlignment="Stretch"
+													 HorizontalContentAlignment="Stretch"
+													 Background="{StaticResource UnoColor}">
+										<TextBox Padding="10"
+											 BorderThickness="0"
+											 CornerRadius="20"
+											 Foreground="White"
+											 HorizontalAlignment="Stretch"
+											 PlaceholderForeground="LightGray"
+											 PlaceholderText="Hollow element"
+											 Text="Padding + Margin diff"
+											 Margin="15,30,50,30"/>
+									</utu:ShadowContainer>
+
+
+									<utu:ShadowContainer Shadows="{StaticResource NeumorphismHollow}"
+													 HorizontalAlignment="Stretch"
+													 HorizontalContentAlignment="Stretch"
+													 Background="{StaticResource UnoColor}">
+										<TextBox 
+											 BorderThickness="0"
+											 CornerRadius="20"
+											 Foreground="White"
+											 HorizontalAlignment="Stretch"
+											 PlaceholderForeground="LightGray"
+											 PlaceholderText="Hollow element"
+											 Text="Padding"
+											 Padding="15,30,50,30"/>
 									</utu:ShadowContainer>
 								</StackPanel>
 
-								<StackPanel Padding="20"
-											HorizontalAlignment="Stretch"
-											Spacing="50">
+								<StackPanel HorizontalAlignment="Stretch"
+										Spacing="50"
+										Padding="20">
 
-									<utu:ShadowContainer HorizontalAlignment="Stretch"
-														 HorizontalContentAlignment="Stretch"
-														 Background="{StaticResource UnoColor}"
-														 Shadows="{StaticResource NeumorphismRaising}">
+									<utu:ShadowContainer Shadows="{StaticResource NeumorphismRaising}"
+													 HorizontalAlignment="Stretch"
+													 HorizontalContentAlignment="Stretch"
+													 Background="{StaticResource UnoColor}">
 										<TextBox Padding="10"
-												 HorizontalAlignment="Center"
-												 BorderThickness="0"
-												 CornerRadius="20"
-												 Foreground="White"
-												 PlaceholderForeground="LightGray"
-												 PlaceholderText="Raising element"
-												 Text="Center" />
-									</utu:ShadowContainer>
-
-									<utu:ShadowContainer HorizontalAlignment="Stretch"
-														 HorizontalContentAlignment="Stretch"
-														 Background="{StaticResource UnoColor}"
-														 Shadows="{StaticResource NeumorphismRaising}">
+											 BorderThickness="0"
+											 CornerRadius="20"
+											 Foreground="White"
+											 HorizontalAlignment="Center"
+											 PlaceholderForeground="LightGray"
+											 PlaceholderText="Raising element"
+											 Text="Center"/>
+									</utu:ShadowContainer>
+
+									<utu:ShadowContainer Shadows="{StaticResource NeumorphismRaising}"
+													 HorizontalAlignment="Stretch"
+													 HorizontalContentAlignment="Stretch"
+													 Background="{StaticResource UnoColor}">
 										<TextBox Padding="10"
-												 HorizontalAlignment="Right"
-												 BorderThickness="0"
-												 CornerRadius="20"
-												 Foreground="White"
-												 PlaceholderForeground="LightGray"
-												 PlaceholderText="Raising element"
-												 Text="Right" />
-									</utu:ShadowContainer>
-
-
-									<utu:ShadowContainer HorizontalAlignment="Stretch"
-														 HorizontalContentAlignment="Stretch"
-														 Background="{StaticResource UnoColor}"
-														 Shadows="{StaticResource NeumorphismHollow}">
-										<TextBox Margin="200,30,30,30"
-												 HorizontalAlignment="Right"
-												 BorderThickness="0"
-												 CornerRadius="20"
-												 Foreground="White"
-												 PlaceholderForeground="LightGray"
-												 PlaceholderText="Hollow element"
-												 Text="Right" />
-									</utu:ShadowContainer>
-
-
-									<utu:ShadowContainer HorizontalAlignment="Stretch"
-														 HorizontalContentAlignment="Stretch"
-														 Background="{StaticResource UnoColor}"
-														 Shadows="{StaticResource NeumorphismRaising}">
-										<TextBox Margin="15,30,200,30"
-												 Padding="10"
-												 HorizontalAlignment="Left"
-												 BorderThickness="0"
-												 CornerRadius="20"
-												 Foreground="White"
-												 PlaceholderForeground="LightGray"
-												 PlaceholderText="Raising element"
-												 Text="Left" />
-									</utu:ShadowContainer>
-
-
-									<utu:ShadowContainer HorizontalAlignment="Stretch"
-														 HorizontalContentAlignment="Stretch"
-														 Background="{StaticResource UnoColor}"
-														 Shadows="{StaticResource NeumorphismHollow}">
-										<TextBox Padding="15,30,50,30"
-												 HorizontalAlignment="Left"
-												 BorderThickness="0"
-												 CornerRadius="20"
-												 Foreground="White"
-												 PlaceholderForeground="LightGray"
-												 PlaceholderText="Hollow element"
-												 Text="Left" />
-									</utu:ShadowContainer>
-									<utu:ShadowContainer HorizontalAlignment="Center"
-														 HorizontalContentAlignment="Center"
-														 Background="{StaticResource UnoColor}"
-														 Shadows="{StaticResource NeumorphismHollow}">
-										<TextBox Padding="15,30,50,30"
-												 HorizontalAlignment="Left"
-												 BorderThickness="0"
-												 CornerRadius="20"
-												 Foreground="White"
-												 PlaceholderForeground="LightGray"
-												 PlaceholderText="Hollow element"
-												 Text="Left on ShadowContainer Center" />
+											 BorderThickness="0"
+											 CornerRadius="20"
+											 Foreground="White"
+											 HorizontalAlignment="Right"
+											 PlaceholderForeground="LightGray"
+											 PlaceholderText="Raising element"
+											 Text="Right"/>
+									</utu:ShadowContainer>
+
+
+									<utu:ShadowContainer Shadows="{StaticResource NeumorphismHollow}"
+													 HorizontalAlignment="Stretch"
+													 HorizontalContentAlignment="Stretch"
+													 Background="{StaticResource UnoColor}">
+										<TextBox BorderThickness="0"
+											 CornerRadius="20"
+											 Foreground="White"
+											 HorizontalAlignment="Right"
+											 PlaceholderForeground="LightGray"
+											 PlaceholderText="Hollow element"
+											 Text="Right"
+											 Margin="200,30,30,30"/>
+									</utu:ShadowContainer>
+
+
+									<utu:ShadowContainer Shadows="{StaticResource NeumorphismRaising}"
+													 HorizontalAlignment="Stretch"
+													 HorizontalContentAlignment="Stretch"
+													 Background="{StaticResource UnoColor}">
+										<TextBox Padding="10"
+											 BorderThickness="0"
+											 CornerRadius="20"
+											 Foreground="White"
+											 HorizontalAlignment="Left"
+											 PlaceholderForeground="LightGray"
+											 PlaceholderText="Raising element"
+											 Text="Left"
+											 Margin="15,30,200,30"/>
+									</utu:ShadowContainer>
+
+
+									<utu:ShadowContainer Shadows="{StaticResource NeumorphismHollow}"
+													 HorizontalAlignment="Stretch"
+													 HorizontalContentAlignment="Stretch"
+													 Background="{StaticResource UnoColor}">
+										<TextBox 
+											 BorderThickness="0"
+											 CornerRadius="20"
+											 Foreground="White"
+											 HorizontalAlignment="Left"
+											 PlaceholderForeground="LightGray"
+											 PlaceholderText="Hollow element"
+											 Text="Left"
+											 Padding="15,30,50,30"/>
+									</utu:ShadowContainer>
+									<utu:ShadowContainer Shadows="{StaticResource NeumorphismHollow}"
+													 HorizontalAlignment="Center"
+													 HorizontalContentAlignment="Center"
+													 Background="{StaticResource UnoColor}">
+										<TextBox 
+											 BorderThickness="0"
+											 CornerRadius="20"
+											 Foreground="White"
+											 HorizontalAlignment="Left"
+											 PlaceholderForeground="LightGray"
+											 PlaceholderText="Hollow element"
+											 Text="Left on ShadowContainer Center"
+											 Padding="15,30,50,30"/>
 									</utu:ShadowContainer>
 								</StackPanel>
 
 
-								<StackPanel Padding="20"
-											HorizontalAlignment="Stretch"
-											Spacing="50">
+								<StackPanel HorizontalAlignment="Stretch"
+										Spacing="50"
+										Padding="20">
 
-									<utu:ShadowContainer HorizontalAlignment="Stretch"
-														 HorizontalContentAlignment="Stretch"
-														 Background="{StaticResource UnoColor}"
-														 Shadows="{StaticResource NeumorphismRaising}">
+									<utu:ShadowContainer Shadows="{StaticResource NeumorphismRaising}"
+													 HorizontalAlignment="Stretch"
+													 HorizontalContentAlignment="Stretch"
+													 Background="{StaticResource UnoColor}">
 										<TextBox Padding="10"
-												 HorizontalAlignment="Center"
-												 VerticalAlignment="Center"
-												 BorderThickness="0"
-												 CornerRadius="20"
-												 Foreground="White"
-												 PlaceholderForeground="LightGray"
-												 PlaceholderText="Raising element"
-												 Text="Center" />
-									</utu:ShadowContainer>
-
-									<utu:ShadowContainer HorizontalAlignment="Stretch"
-														 HorizontalContentAlignment="Stretch"
-														 Background="{StaticResource UnoColor}"
-														 Shadows="{StaticResource NeumorphismRaising}">
+											 BorderThickness="0"
+											 CornerRadius="20"
+											 Foreground="White"
+											 HorizontalAlignment="Center"
+											 VerticalAlignment="Center"
+											 PlaceholderForeground="LightGray"
+											 PlaceholderText="Raising element"
+											 Text="Center"/>
+									</utu:ShadowContainer>
+
+									<utu:ShadowContainer Shadows="{StaticResource NeumorphismRaising}"
+													 HorizontalAlignment="Stretch"
+													 HorizontalContentAlignment="Stretch"
+													 Background="{StaticResource UnoColor}">
 										<TextBox Padding="10"
-												 HorizontalAlignment="Right"
-												 VerticalAlignment="Center"
-												 BorderThickness="0"
-												 CornerRadius="20"
-												 Foreground="White"
-												 PlaceholderForeground="LightGray"
-												 PlaceholderText="Raising element"
-												 Text="Right" />
+											 BorderThickness="0"
+											 CornerRadius="20"
+											 Foreground="White"
+											 HorizontalAlignment="Right"
+											 VerticalAlignment="Center"
+											 PlaceholderForeground="LightGray"
+											 PlaceholderText="Raising element"
+											 Text="Right"/>
 									</utu:ShadowContainer>
 
 
-									<utu:ShadowContainer HorizontalAlignment="Stretch"
-														 HorizontalContentAlignment="Stretch"
-														 Background="{StaticResource UnoColor}"
-														 Shadows="{StaticResource NeumorphismHollow}">
+									<utu:ShadowContainer Shadows="{StaticResource NeumorphismHollow}"
+													 HorizontalAlignment="Stretch"
+													 HorizontalContentAlignment="Stretch"
+													 Background="{StaticResource UnoColor}">
 										<TextBox Padding="10"
-												 HorizontalAlignment="Right"
-												 VerticalAlignment="Top"
-												 BorderThickness="0"
-												 CornerRadius="20"
-												 Foreground="White"
-												 PlaceholderForeground="LightGray"
-												 PlaceholderText="Raising element"
-												 Text="Right Top " />
-									</utu:ShadowContainer>
-
-
-									<utu:ShadowContainer HorizontalAlignment="Stretch"
-														 HorizontalContentAlignment="Stretch"
-														 Background="{StaticResource UnoColor}"
-														 Shadows="{StaticResource NeumorphismRaising}">
-										<TextBox Margin="15,100,50,200"
-												 Padding="10"
-												 HorizontalAlignment="Left"
-												 VerticalAlignment="Bottom"
-												 BorderThickness="0"
-												 CornerRadius="20"
-												 Foreground="White"
-												 PlaceholderForeground="LightGray"
-												 PlaceholderText="Raising element"
-												 Text="Left" />
+											 BorderThickness="0"
+											 CornerRadius="20"
+											 Foreground="White"
+											 HorizontalAlignment="Right"
+											 VerticalAlignment="Top"
+											 PlaceholderForeground="LightGray"
+											 PlaceholderText="Raising element"
+											 Text="Right Top "/>
 									</utu:ShadowContainer>
 
 
-									<utu:ShadowContainer HorizontalAlignment="Stretch"
-														 HorizontalContentAlignment="Stretch"
-														 Background="{StaticResource UnoColor}"
-														 Shadows="{StaticResource NeumorphismHollow}">
-										<TextBox Margin="15,100,50,100"
-												 HorizontalAlignment="Left"
-												 VerticalAlignment="Top"
-												 BorderThickness="0"
-												 CornerRadius="20"
-												 Foreground="White"
-												 PlaceholderForeground="LightGray"
-												 PlaceholderText="Hollow element"
-												 Text="Left" />
-									</utu:ShadowContainer>
-									<utu:ShadowContainer HorizontalAlignment="Center"
-														 HorizontalContentAlignment="Center"
-														 Background="{StaticResource UnoColor}"
-														 Shadows="{StaticResource NeumorphismHollow}">
-										<TextBox Padding="15,200,50,100"
-												 HorizontalAlignment="Left"
-												 VerticalAlignment="Top"
-												 BorderThickness="0"
-												 CornerRadius="20"
-												 Foreground="White"
-												 PlaceholderForeground="LightGray"
-												 PlaceholderText="Hollow element"
-												 Text="Left on ShadowContainer Center" />
+									<utu:ShadowContainer Shadows="{StaticResource NeumorphismRaising}"
+													 HorizontalAlignment="Stretch"
+													 HorizontalContentAlignment="Stretch"
+													 Background="{StaticResource UnoColor}">
+										<TextBox Padding="10"
+											 BorderThickness="0"
+											 CornerRadius="20"
+											 Foreground="White"
+											 HorizontalAlignment="Left"
+											 VerticalAlignment="Bottom"
+											 PlaceholderForeground="LightGray"
+											 PlaceholderText="Raising element"
+											 Text="Left"
+											 Margin="15,100,50,200"/>
+									</utu:ShadowContainer>
+
+
+									<utu:ShadowContainer Shadows="{StaticResource NeumorphismHollow}"
+													 HorizontalAlignment="Stretch"
+													 HorizontalContentAlignment="Stretch"
+													 Background="{StaticResource UnoColor}">
+										<TextBox 
+											 BorderThickness="0"
+											 CornerRadius="20"
+											 Foreground="White"
+											 HorizontalAlignment="Left"
+											 VerticalAlignment="Top"
+											 PlaceholderForeground="LightGray"
+											 PlaceholderText="Hollow element"
+											 Text="Left"
+											 Margin="15,100,50,100"/>
+									</utu:ShadowContainer>
+									<utu:ShadowContainer Shadows="{StaticResource NeumorphismHollow}"
+													 HorizontalAlignment="Center"
+													 HorizontalContentAlignment="Center"
+													 Background="{StaticResource UnoColor}">
+										<TextBox 
+											 BorderThickness="0"
+											 CornerRadius="20"
+											 Foreground="White"
+											 HorizontalAlignment="Left"
+											 VerticalAlignment="Top"
+											 PlaceholderForeground="LightGray"
+											 PlaceholderText="Hollow element"
+											 Text="Left on ShadowContainer Center"
+											 Padding="15,200,50,100"/>
 									</utu:ShadowContainer>
 								</StackPanel>
 
 
 
 
-								<StackPanel Padding="20"
-											HorizontalAlignment="Stretch"
-											Spacing="50">
+								<StackPanel HorizontalAlignment="Stretch"
+										Spacing="50"
+										Padding="20">
 
 
 
 
-									<utu:ShadowContainer HorizontalAlignment="Stretch"
-														 HorizontalContentAlignment="Stretch"
-														 Background="{StaticResource UnoColor}"
-														 Shadows="{StaticResource NeumorphismBulging}">
-										<TextBox Margin="0,130,300,20"
-												 Padding="10"
-												 HorizontalAlignment="Left"
-												 VerticalAlignment="Center"
-												 BorderThickness="0"
-												 CornerRadius="20"
-												 Foreground="White"
-												 PlaceholderForeground="LightGray"
-												 PlaceholderText="Raising element"
-												 Text="Left Margin 0,130,300,20" />
-									</utu:ShadowContainer>
-
-
-									<utu:ShadowContainer HorizontalAlignment="Stretch"
-														 HorizontalContentAlignment="Stretch"
-														 Background="{StaticResource UnoColor}"
-														 Shadows="{StaticResource NeumorphismBulging}">
-										<TextBox Margin="300,20,0,130"
-												 Padding="10"
-												 HorizontalAlignment="Left"
-												 VerticalAlignment="Center"
-												 BorderThickness="0"
-												 CornerRadius="20"
-												 Foreground="White"
-												 PlaceholderForeground="LightGray"
-												 PlaceholderText="Raising element"
-												 Text="Left Margin 300,20,0,130" />
+									<utu:ShadowContainer Shadows="{StaticResource NeumorphismBulging}"
+													 HorizontalAlignment="Stretch"
+													 HorizontalContentAlignment="Stretch"
+													 Background="{StaticResource UnoColor}">
+										<TextBox Padding="10"
+											 BorderThickness="0"
+											 CornerRadius="20"
+											 Foreground="White"
+											 HorizontalAlignment="Left"
+											 VerticalAlignment="Center"
+											 PlaceholderForeground="LightGray"
+											 PlaceholderText="Raising element"
+											 Text="Left Margin 0,130,300,20"
+											 Margin="0,130,300,20"/>
+									</utu:ShadowContainer>
+
+
+									<utu:ShadowContainer Shadows="{StaticResource NeumorphismBulging}"
+													 HorizontalAlignment="Stretch"
+													 HorizontalContentAlignment="Stretch"
+													 Background="{StaticResource UnoColor}">
+										<TextBox Padding="10"
+											 BorderThickness="0"
+											 CornerRadius="20"
+											 Foreground="White"
+											 HorizontalAlignment="Left"
+											 VerticalAlignment="Center"
+											 PlaceholderForeground="LightGray"
+											 PlaceholderText="Raising element"
+											 Text="Left Margin 300,20,0,130"
+											 Margin="300,20,0,130"/>
 									</utu:ShadowContainer>
 
 
@@ -837,109 +806,110 @@
 
 
 
-									<utu:ShadowContainer HorizontalAlignment="Stretch"
-														 HorizontalContentAlignment="Stretch"
-														 Background="{StaticResource UnoColor}"
-														 Shadows="{StaticResource NeumorphismBulging}">
-										<TextBox Margin="0,130,300,20"
-												 Padding="10"
-												 HorizontalAlignment="Right"
-												 VerticalAlignment="Center"
-												 BorderThickness="0"
-												 CornerRadius="20"
-												 Foreground="White"
-												 PlaceholderForeground="LightGray"
-												 PlaceholderText="Raising element"
-												 Text="Right Margin 0,130,300,20" />
-									</utu:ShadowContainer>
-
-
-									<utu:ShadowContainer HorizontalAlignment="Stretch"
-														 HorizontalContentAlignment="Stretch"
-														 Background="{StaticResource UnoColor}"
-														 Shadows="{StaticResource NeumorphismBulging}">
-										<TextBox Margin="300,20,0,130"
-												 Padding="10"
-												 HorizontalAlignment="Right"
-												 VerticalAlignment="Center"
-												 BorderThickness="0"
-												 CornerRadius="20"
-												 Foreground="White"
-												 PlaceholderForeground="LightGray"
-												 PlaceholderText="Raising element"
-												 Text="Right Margin 300,20,0,130" />
+									<utu:ShadowContainer Shadows="{StaticResource NeumorphismBulging}"
+													 HorizontalAlignment="Stretch"
+													 HorizontalContentAlignment="Stretch"
+													 Background="{StaticResource UnoColor}">
+										<TextBox Padding="10"
+											 BorderThickness="0"
+											 CornerRadius="20"
+											 Foreground="White"
+											 HorizontalAlignment="Right"
+											 VerticalAlignment="Center"
+											 PlaceholderForeground="LightGray"
+											 PlaceholderText="Raising element"
+											 Text="Right Margin 0,130,300,20"
+											 Margin="0,130,300,20"/>
+									</utu:ShadowContainer>
+
+
+									<utu:ShadowContainer Shadows="{StaticResource NeumorphismBulging}"
+													 HorizontalAlignment="Stretch"
+													 HorizontalContentAlignment="Stretch"
+													 Background="{StaticResource UnoColor}">
+										<TextBox Padding="10"
+											 BorderThickness="0"
+											 CornerRadius="20"
+											 Foreground="White"
+											 HorizontalAlignment="Right"
+											 VerticalAlignment="Center"
+											 PlaceholderForeground="LightGray"
+											 PlaceholderText="Raising element"
+											 Text="Right Margin 300,20,0,130"
+											 Margin="300,20,0,130"/>
 									</utu:ShadowContainer>
 
 
 
 
-									<utu:ShadowContainer HorizontalAlignment="Stretch"
-														 HorizontalContentAlignment="Stretch"
-														 Background="{StaticResource UnoColor}"
-														 Shadows="{StaticResource NeumorphismBulging}">
-										<TextBox Margin="0,130,300,20"
-												 Padding="10"
-												 HorizontalAlignment="Center"
-												 VerticalAlignment="Center"
-												 BorderThickness="0"
-												 CornerRadius="20"
-												 Foreground="White"
-												 PlaceholderForeground="LightGray"
-												 PlaceholderText="Raising element"
-												 Text="Center Margin 0,130,300,20" />
-									</utu:ShadowContainer>
-
-
-									<utu:ShadowContainer HorizontalAlignment="Stretch"
-														 HorizontalContentAlignment="Stretch"
-														 Background="{StaticResource UnoColor}"
-														 Shadows="{StaticResource NeumorphismBulging}">
-										<TextBox Margin="300,20,0,130"
-												 Padding="10"
-												 HorizontalAlignment="Center"
-												 VerticalAlignment="Center"
-												 BorderThickness="0"
-												 CornerRadius="20"
-												 Foreground="White"
-												 PlaceholderForeground="LightGray"
-												 PlaceholderText="Raising element"
-												 Text="Center Margin 300,20,0,130" />
+									<utu:ShadowContainer Shadows="{StaticResource NeumorphismBulging}"
+													 HorizontalAlignment="Stretch"
+													 HorizontalContentAlignment="Stretch"
+													 Background="{StaticResource UnoColor}">
+										<TextBox Padding="10"
+											 BorderThickness="0"
+											 CornerRadius="20"
+											 Foreground="White"
+											 HorizontalAlignment="Center"
+											 VerticalAlignment="Center"
+											 PlaceholderForeground="LightGray"
+											 PlaceholderText="Raising element"
+											 Text="Center Margin 0,130,300,20"
+											 Margin="0,130,300,20"/>
+									</utu:ShadowContainer>
+
+
+									<utu:ShadowContainer Shadows="{StaticResource NeumorphismBulging}"
+													 HorizontalAlignment="Stretch"
+													 HorizontalContentAlignment="Stretch"
+													 Background="{StaticResource UnoColor}">
+										<TextBox Padding="10"
+											 BorderThickness="0"
+											 CornerRadius="20"
+											 Foreground="White"
+											 HorizontalAlignment="Center"
+											 VerticalAlignment="Center"
+											 PlaceholderForeground="LightGray"
+											 PlaceholderText="Raising element"
+											 Text="Center Margin 300,20,0,130"
+											 Margin="300,20,0,130"/>
 									</utu:ShadowContainer>
 
 
 
 
-									<utu:ShadowContainer HorizontalAlignment="Stretch"
-														 HorizontalContentAlignment="Stretch"
-														 Background="{StaticResource UnoColor}"
-														 Shadows="{StaticResource NeumorphismBulging}">
-										<TextBox Margin="0,130,300,20"
-												 Padding="10"
-												 HorizontalAlignment="Stretch"
-												 VerticalAlignment="Center"
-												 BorderThickness="0"
-												 CornerRadius="20"
-												 Foreground="White"
-												 PlaceholderForeground="LightGray"
-												 PlaceholderText="Raising element"
-												 Text="Stretch Margin 0,130,300,20" />
-									</utu:ShadowContainer>
-
-
-									<utu:ShadowContainer HorizontalAlignment="Stretch"
-														 HorizontalContentAlignment="Stretch"
-														 Background="{StaticResource UnoColor}"
-														 Shadows="{StaticResource NeumorphismBulging}">
-										<TextBox Margin="300,20,0,130"
-												 Padding="10"
-												 HorizontalAlignment="Stretch"
-												 VerticalAlignment="Center"
-												 BorderThickness="0"
-												 CornerRadius="20"
-												 Foreground="White"
-												 PlaceholderForeground="LightGray"
-												 PlaceholderText="Raising element"
-												 Text="Stretch Margin 300,20,0,130" />
+									<utu:ShadowContainer Shadows="{StaticResource NeumorphismBulging}"
+													 HorizontalAlignment="Stretch"
+													 HorizontalContentAlignment="Stretch"
+													 Background="{StaticResource UnoColor}">
+										<TextBox Padding="10"
+											 BorderThickness="0"
+											 CornerRadius="20"
+											 Foreground="White"
+											 HorizontalAlignment="Stretch"
+											 VerticalAlignment="Center"
+											 PlaceholderForeground="LightGray"
+											 PlaceholderText="Raising element"
+											 Text="Stretch Margin 0,130,300,20"
+											 Margin="0,130,300,20"/>
+									</utu:ShadowContainer>
+
+
+									<utu:ShadowContainer Shadows="{StaticResource NeumorphismBulging}"
+													 HorizontalAlignment="Stretch"
+													 HorizontalContentAlignment="Stretch"
+													 Background="{StaticResource UnoColor}">
+										<TextBox Padding="10"
+											 
+											 BorderThickness="0"
+											 CornerRadius="20"
+											 Foreground="White"
+											 HorizontalAlignment="Stretch"
+											 VerticalAlignment="Center"
+											 PlaceholderForeground="LightGray"
+											 PlaceholderText="Raising element"
+											 Text="Stretch Margin 300,20,0,130"
+											 Margin="300,20,0,130"/>
 									</utu:ShadowContainer>
 
 
@@ -951,11 +921,11 @@
 									<ColumnDefinition Width="Auto" />
 									<ColumnDefinition Width="Auto" />
 								</Grid.ColumnDefinitions>
-								<utu:ShadowContainer Margin="32"
-													 Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
-													 CornerRadius="20">
+								<utu:ShadowContainer Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
+													 CornerRadius="20"
+													 Margin="32">
 									<utu:ShadowContainer.Shadows>
-										<utu:ShadowCollection>
+										<utu:ShadowCollection >
 											<utu:Shadow BlurRadius="20"
 														IsInner="True"
 														OffsetX="10"
@@ -972,12 +942,10 @@
 														Color="{StaticResource UnoPink}" />
 										</utu:ShadowCollection>
 									</utu:ShadowContainer.Shadows>
-									<TextBox Height="50" Text="Shadow Text" />
+									<TextBox Text="Shadow Text" Height="50"/>
 								</utu:ShadowContainer>
 
-								<TextBox Grid.Column="1"
-										 Height="50"
-										 Text="Normal Text" />
+								<TextBox Text="Normal Text" Height="50" Grid.Column="1" />
 							</Grid>
 						</StackPanel>
 					</ScrollViewer>

From 83e56931d6b6754d659872041049037403243e80 Mon Sep 17 00:00:00 2001
From: roubachof <jm.alfonsi@gmail.com>
Date: Wed, 13 Sep 2023 16:37:00 +0200
Subject: [PATCH 3/4] fix(ShadowContainer): skia canvas is cleared when resized
 and needs repaint in this case

---
 .../Controls/Shadows/ShadowContainer.Paint.cs |  4 +--
 .../Controls/Shadows/ShadowContainer.cs       | 32 +++++++++++++++----
 .../Controls/Shadows/ShadowsCache.cs          |  1 +
 3 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/Uno.Toolkit.Skia.WinUI/Controls/Shadows/ShadowContainer.Paint.cs b/src/Uno.Toolkit.Skia.WinUI/Controls/Shadows/ShadowContainer.Paint.cs
index e5ecf192b..e24b1ab3b 100644
--- a/src/Uno.Toolkit.Skia.WinUI/Controls/Shadows/ShadowContainer.Paint.cs
+++ b/src/Uno.Toolkit.Skia.WinUI/Controls/Shadows/ShadowContainer.Paint.cs
@@ -39,10 +39,11 @@ private void OnSurfacePaintCompleted(bool createdNewCanvas)
 
 	private bool NeedsPaint(ShadowPaintState state, out bool pixelRatioChanged)
 	{
-		var needsPaint = state != _lastPaintState;
+		var needsPaint = state != _lastPaintState || _isShadowHostDirty;
 		pixelRatioChanged = _lastPaintState != null && state.PixelRatio != _lastPaintState.PixelRatio;
 
 		_lastPaintState = state;
+		_isShadowHostDirty = false;
 		return needsPaint;
 	}
 
@@ -77,7 +78,6 @@ private void OnSurfacePainted(object? sender, SKPaintSurfaceEventArgs e)
 
 		if (state.Shadows.Length == 0)
 		{
-			canvas.Clear(SKColors.Transparent);
 			shape.DrawContentBackground(state, canvas, background ?? Colors.Transparent);
 			return;
 		}
diff --git a/src/Uno.Toolkit.Skia.WinUI/Controls/Shadows/ShadowContainer.cs b/src/Uno.Toolkit.Skia.WinUI/Controls/Shadows/ShadowContainer.cs
index c8bd133fc..57cbc7db2 100644
--- a/src/Uno.Toolkit.Skia.WinUI/Controls/Shadows/ShadowContainer.cs
+++ b/src/Uno.Toolkit.Skia.WinUI/Controls/Shadows/ShadowContainer.cs
@@ -3,7 +3,6 @@
 using System.Collections.Specialized;
 using System.ComponentModel;
 using System.Linq;
-using System.Threading.Tasks;
 using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Controls;
 using Microsoft.UI.Xaml.Media;
@@ -34,10 +33,15 @@ public partial class ShadowContainer : ContentControl
 
 	private readonly SerialDisposable _eventSubscriptions = new();
 
+	private readonly SerialDisposable _shadowHostSubscriptions = new();
+
 	private Grid? _panel;
 	private Canvas? _canvas;
+
 	private SKXamlCanvas? _shadowHost;
 
+	private bool _isShadowHostDirty = true;
+
 	public ShadowContainer()
 	{
 		DefaultStyleKey = typeof(ShadowContainer);
@@ -244,6 +248,7 @@ protected override void OnApplyTemplate()
 		_panel = GetTemplateChild(nameof(PART_ShadowOwner)) as Grid;
 
 		var skiaCanvas = new SKXamlCanvas();
+
 		skiaCanvas.PaintSurface += OnSurfacePainted;
 
 #if __IOS__ || __MACCATALYST__
@@ -252,6 +257,24 @@ protected override void OnApplyTemplate()
 
 		_shadowHost = skiaCanvas;
 		_canvas?.Children.Insert(0, _shadowHost!);
+
+		BindToShadowHost(_shadowHost);
+	}
+
+	private void BindToShadowHost(SKXamlCanvas skiaCanvas)
+	{
+		_shadowHostSubscriptions.Disposable?.Dispose();
+		skiaCanvas.SizeChanged += OnShadowHostSizeChanged;
+		_shadowHostSubscriptions.Disposable = new CompositeDisposable
+		{
+			Disposable.Create(() => skiaCanvas.SizeChanged -= OnShadowHostSizeChanged),
+		};
+
+		// When the skia canvas size changes, the whole canvas is cleared: we'll need to redraw the shadows.
+		void OnShadowHostSizeChanged(object sender, SizeChangedEventArgs args)
+		{
+			_isShadowHostDirty = true;
+		}
 	}
 
 	private void InvalidateCanvasLayout()
@@ -288,7 +311,6 @@ private void InvalidateCanvasLayoutSize()
 			return;
 		}
 
-
 #if __ANDROID__ || __IOS__
 		_canvas.GetDispatcherCompat().Schedule(() => _canvas.InvalidateMeasure());
 #endif
@@ -318,15 +340,13 @@ private void InvalidateCanvasLayoutSize()
 		_canvas.HorizontalAlignment = contentAsFE.HorizontalAlignment;
 		_canvas.VerticalAlignment = contentAsFE.VerticalAlignment;
 
-
-
 		double left =
-			+(contentAsFE.HorizontalAlignment == HorizontalAlignment.Left ? -newHostSpreedWidth : 0)
+			+ (contentAsFE.HorizontalAlignment == HorizontalAlignment.Left ? -newHostSpreedWidth : 0)
 			+ (contentAsFE.HorizontalAlignment == HorizontalAlignment.Right ? -newHostSpreedWidth - childWidth / 2 : 0)
 			+ (contentAsFE.HorizontalAlignment == HorizontalAlignment.Stretch ? -newHostSpreedWidth - childWidth / 4 : 0)
 			+ (contentAsFE.HorizontalAlignment == HorizontalAlignment.Center ? -newHostSpreedWidth - childWidth / 4 : 0);
 		double top =
-			+(contentAsFE.VerticalAlignment == VerticalAlignment.Top ? -newHostSpreedHeight : 0)
+			+ (contentAsFE.VerticalAlignment == VerticalAlignment.Top ? -newHostSpreedHeight : 0)
 			+ (contentAsFE.VerticalAlignment == VerticalAlignment.Bottom ? -newHostSpreedHeight - childHeight / 2 : 0)
 			+ (contentAsFE.VerticalAlignment == VerticalAlignment.Stretch ? -newHostSpreedHeight - childHeight / 4 : 0)
 			+ (contentAsFE.VerticalAlignment == VerticalAlignment.Center ? -newHostSpreedHeight - childHeight / 4 : 0);
diff --git a/src/Uno.Toolkit.Skia.WinUI/Controls/Shadows/ShadowsCache.cs b/src/Uno.Toolkit.Skia.WinUI/Controls/Shadows/ShadowsCache.cs
index 0cc4ccd04..6b5f4f76f 100644
--- a/src/Uno.Toolkit.Skia.WinUI/Controls/Shadows/ShadowsCache.cs
+++ b/src/Uno.Toolkit.Skia.WinUI/Controls/Shadows/ShadowsCache.cs
@@ -6,6 +6,7 @@
 using Uno.Logging;
 
 namespace Uno.Toolkit.UI;
+
 public class ShadowsCache
 {
 	private static readonly ILogger _logger = typeof(ShadowsCache).Log();

From b359de78cba4991110b92fbd3247dcffafba4aea Mon Sep 17 00:00:00 2001
From: roubachof <jm.alfonsi@gmail.com>
Date: Thu, 14 Sep 2023 10:37:28 +0200
Subject: [PATCH 4/4] chore(ShadowContainer): refactored shadows size
 disposable after review

---
 .../ShadowContainerSamplePage.WinUI.xaml      | 26 +++++------
 .../Controls/Shadows/ShadowContainer.cs       | 45 ++++++++++---------
 2 files changed, 38 insertions(+), 33 deletions(-)

diff --git a/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/ShadowContainerSamplePage.WinUI.xaml b/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/ShadowContainerSamplePage.WinUI.xaml
index feb197439..4c6f9e058 100644
--- a/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/ShadowContainerSamplePage.WinUI.xaml
+++ b/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/ShadowContainerSamplePage.WinUI.xaml
@@ -310,7 +310,7 @@
 							<StackPanel Spacing="8">
 								<TextBlock Text="Complex Shadow Shapes" Style="{StaticResource TitleTextBlockStyle}" />
 
-										<!--
+								<!--
 									Should be the same as: https://developer.mozilla.org/fr/docs/Web/CSS/CSS_backgrounds_and_borders/Box-shadow_generator
 									element {
 									width: 300px;	height: 100px;	background-color: #7A67F8;	position: relative;
@@ -323,26 +323,26 @@
 								<utu:ShadowContainer Margin="0,30" Background="{StaticResource UnoColor}">
 									<utu:ShadowContainer.Shadows>
 										<utu:ShadowCollection>
-											<utu:Shadow BlurRadius="10"
-														IsInner="True"
+											<utu:Shadow IsInner="True"
 														OffsetX="-20"
 														OffsetY="-10"
-														Opacity="1"
+														BlurRadius="10"
 														Spread="10"
-														Color="Black" />
-											<utu:Shadow BlurRadius="5"
-														IsInner="True"
+														Color="Black"
+														Opacity="1" />
+											<utu:Shadow IsInner="True"
 														OffsetX="5"
 														OffsetY="-5"
-														Opacity="1"
+														BlurRadius="5"
 														Spread="0"
-														Color="#94DB6D" />
-											<utu:Shadow BlurRadius="5"
-														OffsetX="6"
+														Color="#94DB6D"
+														Opacity="1" />
+											<utu:Shadow OffsetX="6"
 														OffsetY="-5"
-														Opacity="1"
+														BlurRadius="5"
 														Spread="0"
-														Color="#E88BAB" />
+														Color="#E88BAB"
+														Opacity="1" />
 										</utu:ShadowCollection>
 									</utu:ShadowContainer.Shadows>
 									<Button Width="300"
diff --git a/src/Uno.Toolkit.Skia.WinUI/Controls/Shadows/ShadowContainer.cs b/src/Uno.Toolkit.Skia.WinUI/Controls/Shadows/ShadowContainer.cs
index 57cbc7db2..abf901ba4 100644
--- a/src/Uno.Toolkit.Skia.WinUI/Controls/Shadows/ShadowContainer.cs
+++ b/src/Uno.Toolkit.Skia.WinUI/Controls/Shadows/ShadowContainer.cs
@@ -33,8 +33,6 @@ public partial class ShadowContainer : ContentControl
 
 	private readonly SerialDisposable _eventSubscriptions = new();
 
-	private readonly SerialDisposable _shadowHostSubscriptions = new();
-
 	private Grid? _panel;
 	private Canvas? _canvas;
 
@@ -77,6 +75,8 @@ private void BindToPaintingProperties()
 			this.RegisterDisposablePropertyChangedCallback(ShadowsProperty, OnShadowsChanged),
 			this.RegisterDisposablePropertyChangedCallback(ContentProperty, OnContentChanged),
 
+			RegisterDisposableShadowHostSizeChangedCallback(OnShadowHostSizeChanged),
+
 			backgroundNestedDisposable,
 			shadowsNestedDisposable,
 			contentNestedDisposable,
@@ -90,7 +90,7 @@ private void BindToPaintingProperties()
 		// This method should not fire any of InvalidateXyz-methods directly,
 		// in order to avoid duplicated invalidate calls.
 		// Which is why the BindToXyz has been separated from the OnXyzChanged.
-
+		
 		void OnBackgroundChanged(DependencyObject sender, DependencyProperty dp)
 		{
 			BindToBackgroundMemberProperties(Background);
@@ -110,6 +110,11 @@ void OnContentChanged(DependencyObject sender, DependencyProperty dp)
 
 			InvalidateShadows();
 		}
+		// When the skia canvas size changes, the whole canvas is cleared: we'll need to redraw the shadows.
+		void OnShadowHostSizeChanged(object sender, SizeChangedEventArgs args)
+		{
+			_isShadowHostDirty = true;
+		}
 
 		void OnShadowPropertyChanged(object? sender, PropertyChangedEventArgs e)
 		{
@@ -121,6 +126,7 @@ void OnShadowPropertyChanged(object? sender, PropertyChangedEventArgs e)
 			}
 			InvalidateShadows();
 		}
+
 		void OnInnerPropertyChanged(DependencyObject sender, DependencyProperty dp)
 		{
 			InvalidateShadows();
@@ -141,6 +147,21 @@ void OnContentSizeChanged(object sender, SizeChangedEventArgs e)
 			InvalidateShadows();
 		}
 
+		SerialDisposable RegisterDisposableShadowHostSizeChangedCallback(SizeChangedEventHandler sizeChanged)
+		{
+			if (_shadowHost == null)
+			{
+				return new SerialDisposable();
+			}
+
+			_shadowHost.SizeChanged += OnShadowHostSizeChanged;
+			return new SerialDisposable
+			{
+				Disposable = Disposable.Create(() => _shadowHost.SizeChanged -= sizeChanged),
+			};
+
+		}
+
 		void BindToBackgroundMemberProperties(Brush? background)
 		{
 			backgroundNestedDisposable.Disposable = background switch
@@ -257,25 +278,9 @@ protected override void OnApplyTemplate()
 
 		_shadowHost = skiaCanvas;
 		_canvas?.Children.Insert(0, _shadowHost!);
-
-		BindToShadowHost(_shadowHost);
 	}
 
-	private void BindToShadowHost(SKXamlCanvas skiaCanvas)
-	{
-		_shadowHostSubscriptions.Disposable?.Dispose();
-		skiaCanvas.SizeChanged += OnShadowHostSizeChanged;
-		_shadowHostSubscriptions.Disposable = new CompositeDisposable
-		{
-			Disposable.Create(() => skiaCanvas.SizeChanged -= OnShadowHostSizeChanged),
-		};
-
-		// When the skia canvas size changes, the whole canvas is cleared: we'll need to redraw the shadows.
-		void OnShadowHostSizeChanged(object sender, SizeChangedEventArgs args)
-		{
-			_isShadowHostDirty = true;
-		}
-	}
+	
 
 	private void InvalidateCanvasLayout()
 	{