From 761045dfd04d018748db9f776be6665482eb7531 Mon Sep 17 00:00:00 2001
From: eriklimakc <erik.lima@knowcode.app>
Date: Tue, 30 Jul 2024 16:41:04 +0100
Subject: [PATCH 1/6] fix: Place header placeholder to proper place when
 disabled

---
 .../Styles/Controls/v2/TextBox.xaml           |  21 +-
 .../Content/Controls/TextBoxSamplePage.xaml   | 239 ++++++++++++++++--
 2 files changed, 229 insertions(+), 31 deletions(-)

diff --git a/src/library/Uno.Material/Styles/Controls/v2/TextBox.xaml b/src/library/Uno.Material/Styles/Controls/v2/TextBox.xaml
index 866326aa6..68b04a4ea 100644
--- a/src/library/Uno.Material/Styles/Controls/v2/TextBox.xaml
+++ b/src/library/Uno.Material/Styles/Controls/v2/TextBox.xaml
@@ -358,6 +358,7 @@
 							<VisualStateGroup x:Name="CommonStates">
 								<VisualState x:Name="Normal">
 									<VisualState.Setters>
+										<!-- Header and Placeholder animations -->
 										<Setter Target="HeaderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
 										<Setter Target="ContentElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
 										<Setter Target="PlaceholderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
@@ -398,6 +399,13 @@
 										<Setter Target="Root.Background" Value="{ThemeResource FilledTextBoxBackgroundDisabled}" />
 										<Setter Target="DeleteButton.Foreground" Value="{ThemeResource FilledTextBoxDeleteButtonForegroundDisabled}" />
 										<Setter Target="IconPresenter.Foreground" Value="{ThemeResource TextBoxLeadingIconForegroundDisabled}" />
+
+										<!-- Header and Placeholder animations -->
+										<Setter Target="HeaderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<Setter Target="ContentElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<Setter Target="PlaceholderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<Setter Target="HeaderElement_CompositeTransform.ScaleX" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
+										<Setter Target="HeaderElement_CompositeTransform.ScaleY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
 									</VisualState.Setters>
 								</VisualState>
 
@@ -617,13 +625,12 @@
 							<VisualStateGroup x:Name="CommonStates">
 								<VisualState x:Name="Normal">
 									<VisualState.Setters>
-
+										<!-- Header and Placeholder animations -->
 										<Setter Target="HeaderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
 										<Setter Target="ContentElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
 										<Setter Target="PlaceholderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
 										<Setter Target="HeaderElement_CompositeTransform.ScaleX" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
 										<Setter Target="HeaderElement_CompositeTransform.ScaleY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
-
 									</VisualState.Setters>
 								</VisualState>
 								<VisualState x:Name="PointerOver">
@@ -634,6 +641,8 @@
 										<Setter Target="HeaderElement.Foreground" Value="{ThemeResource OutlinedTextBoxHeaderForegroundPointerOver}" />
 										<Setter Target="RootBorder.BorderThickness" Value="2" />
 										<Setter Target="RootBorder.Padding" Value="0" />
+
+										<!-- Header and Placeholder animations -->
 										<Setter Target="HeaderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
 										<Setter Target="ContentElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
 										<Setter Target="PlaceholderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
@@ -652,6 +661,13 @@
 										<Setter Target="PlaceholderElement.Foreground" Value="{ThemeResource OutlinedTextBoxPlaceholderForegroundDisabled}" />
 										<Setter Target="HeaderElement.Foreground" Value="{ThemeResource OutlinedTextBoxHeaderForegroundDisabled}" />
 										<Setter Target="IconPresenter.Foreground" Value="{ThemeResource TextBoxLeadingIconForegroundDisabled}" />
+
+										<!-- Header and Placeholder animations -->
+										<Setter Target="HeaderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<Setter Target="ContentElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<Setter Target="PlaceholderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<Setter Target="HeaderElement_CompositeTransform.ScaleX" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
+										<Setter Target="HeaderElement_CompositeTransform.ScaleY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
 									</VisualState.Setters>
 								</VisualState>
 
@@ -668,7 +684,6 @@
 
 									<Storyboard>
 										<!-- Animate Header Upwards -->
-
 										<DoubleAnimation Storyboard.TargetName="HeaderElement_CompositeTransform"
 														 Storyboard.TargetProperty="TranslateY"
 														 Duration="{StaticResource MaterialTextBoxAnimationDuration}"
diff --git a/src/samples/UWP/Uno.Themes.Samples.Shared/Content/Controls/TextBoxSamplePage.xaml b/src/samples/UWP/Uno.Themes.Samples.Shared/Content/Controls/TextBoxSamplePage.xaml
index a6659e121..169d23c68 100644
--- a/src/samples/UWP/Uno.Themes.Samples.Shared/Content/Controls/TextBoxSamplePage.xaml
+++ b/src/samples/UWP/Uno.Themes.Samples.Shared/Content/Controls/TextBoxSamplePage.xaml
@@ -116,6 +116,15 @@
 							<TextBox Style="{StaticResource MaterialFilledTextBoxStyle}" />
 						</smtx:XamlDisplay>
 
+						<!-- TextBox Filled Disabled -->
+						<TextBlock Text="MaterialFilledTextBoxStyle Disabled" />
+						<smtx:XamlDisplay UniqueKey="M3Material_TextBoxSamplePage_28"
+										  Style="{StaticResource XamlDisplayBelowStyle}">
+							<TextBox Style="{StaticResource MaterialFilledTextBoxStyle}"
+									 Text="Disabled"
+									 IsEnabled="False" />
+						</smtx:XamlDisplay>
+
 						<!-- TextBox Filled with placeholder -->
 						<TextBlock Text="MaterialFilledTextBoxStyle - Placeholder only (No header)" />
 						<smtx:XamlDisplay UniqueKey="M3Material_TextBoxSamplePage_21"
@@ -124,6 +133,15 @@
 									 PlaceholderText="Placeholder" />
 						</smtx:XamlDisplay>
 
+						<!-- TextBox Filled with placeholder disabled -->
+						<TextBlock Text="MaterialFilledTextBoxStyle - Placeholder only (No header) Disabled" />
+						<smtx:XamlDisplay UniqueKey="M3Material_TextBoxSamplePage_25"
+										  Style="{StaticResource XamlDisplayBelowStyle}">
+							<TextBox Style="{StaticResource MaterialFilledTextBoxStyle}"
+									 PlaceholderText="Placeholder"
+									 IsEnabled="False" />
+						</smtx:XamlDisplay>
+
 						<!-- TextBox Filled with header -->
 						<TextBlock Text="MaterialFilledTextBoxStyle - Header only (No Placeholder)" />
 						<smtx:XamlDisplay UniqueKey="M3Material_TextBoxSamplePage_22"
@@ -132,6 +150,16 @@
 									 Header="Header" />
 						</smtx:XamlDisplay>
 
+						<!-- TextBox Filled with header disabled -->
+						<TextBlock Text="MaterialFilledTextBoxStyle - Header only (No Placeholder) Disabled" />
+						<smtx:XamlDisplay UniqueKey="M3Material_TextBoxSamplePage_26"
+										  Style="{StaticResource XamlDisplayBelowStyle}">
+							<TextBox Style="{StaticResource MaterialFilledTextBoxStyle}"
+									 Header="Header"
+									 Text="Disabled"
+									 IsEnabled="False" />
+						</smtx:XamlDisplay>
+
 						<!-- TextBox Filled With PlaceholderText and header -->
 						<TextBlock Text="MaterialFilledTextBoxStyle - Header + Placeholder" />
 						<smtx:XamlDisplay UniqueKey="M3Material_TextBoxSamplePage_2"
@@ -141,11 +169,12 @@
 									 Style="{StaticResource MaterialFilledTextBoxStyle}" />
 						</smtx:XamlDisplay>
 
-						<!-- TextBox Filled Disabled with PlaceholderText -->
-						<smtx:XamlDisplay UniqueKey="M3Material_TextBoxSamplePage_3"
+						<!-- TextBox Filled With PlaceholderText and header disabled -->
+						<TextBlock Text="MaterialFilledTextBoxStyle - Header + Placeholder Disabled" />
+						<smtx:XamlDisplay UniqueKey="M3Material_TextBoxSamplePage_27"
 										  Style="{StaticResource XamlDisplayBelowStyle}">
 							<TextBox PlaceholderText="Placeholder"
-									 Text="Filled Disabled"
+									 Header="Header"
 									 Style="{StaticResource MaterialFilledTextBoxStyle}"
 									 IsEnabled="False" />
 						</smtx:XamlDisplay>
@@ -157,6 +186,15 @@
 							<TextBox Style="{StaticResource MaterialOutlinedTextBoxStyle}" />
 						</smtx:XamlDisplay>
 
+						<!-- TextBox Outlined Disabled -->
+						<TextBlock Text="MaterialOutlinedTextBoxStyle Disabled" />
+						<smtx:XamlDisplay UniqueKey="M3Material_TextBoxSamplePage_30"
+										  Style="{StaticResource XamlDisplayBelowStyle}">
+							<TextBox Style="{StaticResource MaterialOutlinedTextBoxStyle}"
+									 Text="Disabled"
+									 IsEnabled="False" />
+						</smtx:XamlDisplay>
+
 						<!-- TextBox Outlined with PlaceholderText -->
 						<TextBlock Text="MaterialOutlinedTextBoxStyle - Placeholder only (No header)" />
 						<smtx:XamlDisplay UniqueKey="M3Material_TextBoxSamplePage_5"
@@ -165,6 +203,15 @@
 									 Style="{StaticResource MaterialOutlinedTextBoxStyle}" />
 						</smtx:XamlDisplay>
 
+						<!-- TextBox Outlined with PlaceholderText Disabled -->
+						<TextBlock Text="MaterialOutlinedTextBoxStyle - Placeholder only (No header) Disabled" />
+						<smtx:XamlDisplay UniqueKey="M3Material_TextBoxSamplePage_31"
+										  Style="{StaticResource XamlDisplayBelowStyle}">
+							<TextBox PlaceholderText="Placeholder"
+									 Style="{StaticResource MaterialOutlinedTextBoxStyle}"
+									 IsEnabled="False" />
+						</smtx:XamlDisplay>
+
 						<!-- TextBox Outlined with header -->
 						<TextBlock Text="MaterialOutlinedTextBoxStyle - Header only (No Placeholder)" />
 						<smtx:XamlDisplay UniqueKey="M3Material_TextBoxSamplePage_23"
@@ -173,6 +220,16 @@
 									 Header="Header" />
 						</smtx:XamlDisplay>
 
+						<!-- TextBox Outlined with header Disabled -->
+						<TextBlock Text="MaterialOutlinedTextBoxStyle - Header only (No Placeholder) Disabled" />
+						<smtx:XamlDisplay UniqueKey="M3Material_TextBoxSamplePage_32"
+										  Style="{StaticResource XamlDisplayBelowStyle}">
+							<TextBox Style="{StaticResource MaterialOutlinedTextBoxStyle}"
+									 Header="Header"
+									 Text="Disabled"
+									 IsEnabled="False" />
+						</smtx:XamlDisplay>
+
 						<!-- TextBox Outlined With PlaceholderText and header -->
 						<TextBlock Text="MaterialOutlinedTextBoxStyle - Header + Placeholder" />
 						<smtx:XamlDisplay UniqueKey="M3Material_TextBoxSamplePage_24"
@@ -182,15 +239,141 @@
 									 Style="{StaticResource MaterialOutlinedTextBoxStyle}" />
 						</smtx:XamlDisplay>
 
-						<!-- TextBox Outlined Disabled with PlaceholderText -->
-						<smtx:XamlDisplay UniqueKey="M3Material_TextBoxSamplePage_6"
+						<!-- TextBox Outlined With PlaceholderText and header Disabled -->
+						<TextBlock Text="MaterialOutlinedTextBoxStyle - Header + Placeholder Disabled" />
+						<smtx:XamlDisplay UniqueKey="M3Material_TextBoxSamplePage_33"
 										  Style="{StaticResource XamlDisplayBelowStyle}">
 							<TextBox PlaceholderText="Placeholder"
-									 Text="Outlined Disabled"
+									 Header="Header"
 									 Style="{StaticResource MaterialOutlinedTextBoxStyle}"
 									 IsEnabled="False" />
 						</smtx:XamlDisplay>
 
+						<!-- TextBox Filled Icon -->
+						<TextBlock Text="MaterialFilledTextBoxStyle + Icon" />
+						<smtx:XamlDisplay UniqueKey="M3Material_TextBoxSamplePage_11"
+										  Style="{StaticResource XamlDisplayBelowStyle}">
+							<TextBox Style="{StaticResource MaterialFilledTextBoxStyle}">
+								<ut:ControlExtensions.Icon>
+									<SymbolIcon Symbol="Favorite" />
+								</ut:ControlExtensions.Icon>
+							</TextBox>
+						</smtx:XamlDisplay>
+
+						<!-- TextBox Filled Icon Placeholder -->
+						<TextBlock Text="MaterialFilledTextBoxStyle + Icon + PlaceholderText" />
+						<smtx:XamlDisplay UniqueKey="M3Material_TextBoxSamplePage_34"
+										  Style="{StaticResource XamlDisplayBelowStyle}">
+							<TextBox PlaceholderText="Filled with Icon"
+									 Style="{StaticResource MaterialFilledTextBoxStyle}">
+								<ut:ControlExtensions.Icon>
+									<SymbolIcon Symbol="Favorite" />
+								</ut:ControlExtensions.Icon>
+							</TextBox>
+						</smtx:XamlDisplay>
+
+						<!-- TextBox Filled Icon Header -->
+						<TextBlock Text="MaterialFilledTextBoxStyle + Icon + Header" />
+						<smtx:XamlDisplay UniqueKey="M3Material_TextBoxSamplePage_35"
+										  Style="{StaticResource XamlDisplayBelowStyle}">
+							<TextBox Header="Filled with Icon"
+									 Style="{StaticResource MaterialFilledTextBoxStyle}">
+								<ut:ControlExtensions.Icon>
+									<SymbolIcon Symbol="Favorite" />
+								</ut:ControlExtensions.Icon>
+							</TextBox>
+						</smtx:XamlDisplay>
+
+						<!-- TextBox Filled Icon Header Placeholder -->
+						<TextBlock Text="MaterialFilledTextBoxStyle + Icon + Header + PlaceholderText" />
+						<smtx:XamlDisplay UniqueKey="M3Material_TextBoxSamplePage_36"
+										  Style="{StaticResource XamlDisplayBelowStyle}">
+							<TextBox Header="Header"
+									 PlaceholderText="Placeholder"
+									 Style="{StaticResource MaterialFilledTextBoxStyle}">
+								<ut:ControlExtensions.Icon>
+									<SymbolIcon Symbol="Favorite" />
+								</ut:ControlExtensions.Icon>
+							</TextBox>
+						</smtx:XamlDisplay>
+
+						<!-- TextBox Filled Icon Header Placeholder Disabled -->
+						<TextBlock Text="MaterialFilledTextBoxStyle + Icon + Header + PlaceholderText + Disabled" />
+						<smtx:XamlDisplay UniqueKey="M3Material_TextBoxSamplePage_37"
+										  Style="{StaticResource XamlDisplayBelowStyle}">
+							<TextBox Header="Header"
+									 PlaceholderText="Placeholder"
+									 Style="{StaticResource MaterialFilledTextBoxStyle}"
+									 IsEnabled="False">
+								<ut:ControlExtensions.Icon>
+									<SymbolIcon Symbol="Favorite" />
+								</ut:ControlExtensions.Icon>
+							</TextBox>
+						</smtx:XamlDisplay>
+
+						<!-- TextBox Outlined Icon -->
+						<TextBlock Text="MaterialOutlinedTextBoxStyle + Icon" />
+						<smtx:XamlDisplay UniqueKey="M3Material_TextBoxSamplePage_38"
+										  Style="{StaticResource XamlDisplayBelowStyle}">
+							<TextBox Style="{StaticResource MaterialOutlinedTextBoxStyle}">
+								<ut:ControlExtensions.Icon>
+									<SymbolIcon Symbol="Favorite" />
+								</ut:ControlExtensions.Icon>
+							</TextBox>
+						</smtx:XamlDisplay>
+
+						<!-- TextBox Outlined Icon with PlaceholderText -->
+						<TextBlock Text="MaterialOutlinedTextBoxStyle + Icon + PlaceholderText" />
+						<smtx:XamlDisplay UniqueKey="M3Material_TextBoxSamplePage_12"
+										  Style="{StaticResource XamlDisplayBelowStyle}">
+							<TextBox PlaceholderText="Outlined with Icon"
+									 Style="{StaticResource MaterialOutlinedTextBoxStyle}">
+								<ut:ControlExtensions.Icon>
+									<SymbolIcon Symbol="Favorite" />
+								</ut:ControlExtensions.Icon>
+							</TextBox>
+						</smtx:XamlDisplay>
+
+						<!-- TextBox Outlined Icon with Header -->
+						<TextBlock Text="MaterialOutlinedTextBoxStyle + Icon + Header" />
+						<smtx:XamlDisplay UniqueKey="M3Material_TextBoxSamplePage_41"
+										  Style="{StaticResource XamlDisplayBelowStyle}">
+							<TextBox Style="{StaticResource MaterialOutlinedTextBoxStyle}"
+									 Header="Outlined with Icon">
+								<ut:ControlExtensions.Icon>
+									<SymbolIcon Symbol="Favorite" />
+								</ut:ControlExtensions.Icon>
+							</TextBox>
+						</smtx:XamlDisplay>
+
+						<!-- TextBox Outlined Icon with Header and Placeholder -->
+						<TextBlock Text="MaterialOutlinedTextBoxStyle + Icon + Header + Placeholder" />
+						<smtx:XamlDisplay UniqueKey="M3Material_TextBoxSamplePage_39"
+										  Style="{StaticResource XamlDisplayBelowStyle}">
+							<TextBox Style="{StaticResource MaterialOutlinedTextBoxStyle}"
+									 Header="Header"
+									 PlaceholderText="Placeholder">
+								<ut:ControlExtensions.Icon>
+									<SymbolIcon Symbol="Favorite" />
+								</ut:ControlExtensions.Icon>
+							</TextBox>
+						</smtx:XamlDisplay>
+
+
+						<!-- TextBox Outlined Icon with Header and Placeholder disabled -->
+						<TextBlock Text="MaterialOutlinedTextBoxStyle + Icon + Header + Placeholder + Disabled" />
+						<smtx:XamlDisplay UniqueKey="M3Material_TextBoxSamplePage_40"
+										  Style="{StaticResource XamlDisplayBelowStyle}">
+							<TextBox Style="{StaticResource MaterialOutlinedTextBoxStyle}"
+									 Header="Header"
+									 PlaceholderText="Placeholder"
+									 IsEnabled="False">
+								<ut:ControlExtensions.Icon>
+									<SymbolIcon Symbol="Favorite" />
+								</ut:ControlExtensions.Icon>
+							</TextBox>
+						</smtx:XamlDisplay>
+
 						<!-- TextBox Filled MultiLine -->
 						<smtx:XamlDisplay UniqueKey="M3Material_TextBoxSamplePage_7"
 										  Style="{StaticResource XamlDisplayBelowStyle}">
@@ -201,6 +384,17 @@
 									 AcceptsReturn="True" />
 						</smtx:XamlDisplay>
 
+						<!-- TextBox Filled MultiLine Disabled -->
+						<smtx:XamlDisplay UniqueKey="M3Material_TextBoxSamplePage_42"
+										  Style="{StaticResource XamlDisplayBelowStyle}">
+							<TextBox Text="Lorem ipsum dolor sit amet consectetur adipiscing, elit aliquam ullamcorper commodo primis ornare himenaeos, inceptos tellus accumsan praesent laoreet. Pharetra semper ullamcorper neque mollis vestibulum luctus gravida facilisi rhoncus, rutrum massa bibendum vitae imperdiet quisque fames dignissim, varius curae erat risus platea orci quis scelerisque. Auctor erat vestibulum enim sodales sapien nam litora rhoncus condimentum praesent, platea dui odio eros integer id gravida turpis semper nisi maecenas, nascetur dictumst sed arcu aenean varius dis leo habitant."
+									 Header="Disabled"
+									 Style="{StaticResource MaterialFilledTextBoxStyle}"
+									 TextWrapping="Wrap"
+									 AcceptsReturn="True"
+									 IsEnabled="False" />
+						</smtx:XamlDisplay>
+
 						<!-- TextBox Outlined MultiLine -->
 						<smtx:XamlDisplay UniqueKey="M3Material_TextBoxSamplePage_8"
 										  Style="{StaticResource XamlDisplayBelowStyle}">
@@ -211,6 +405,17 @@
 									 AcceptsReturn="True" />
 						</smtx:XamlDisplay>
 
+						<!-- TextBox Outlined MultiLine Disabled -->
+						<smtx:XamlDisplay UniqueKey="M3Material_TextBoxSamplePage_43"
+										  Style="{StaticResource XamlDisplayBelowStyle}">
+							<TextBox Text="Lorem ipsum dolor sit amet consectetur adipiscing, elit aliquam ullamcorper commodo primis ornare himenaeos, inceptos tellus accumsan praesent laoreet. Pharetra semper ullamcorper neque mollis vestibulum luctus gravida facilisi rhoncus, rutrum massa bibendum vitae imperdiet quisque fames dignissim, varius curae erat risus platea orci quis scelerisque. Auctor erat vestibulum enim sodales sapien nam litora rhoncus condimentum praesent, platea dui odio eros integer id gravida turpis semper nisi maecenas, nascetur dictumst sed arcu aenean varius dis leo habitant."
+									 Header="Disabled"
+									 Style="{StaticResource MaterialOutlinedTextBoxStyle}"
+									 TextWrapping="Wrap"
+									 AcceptsReturn="True"
+									 IsEnabled="False" />
+						</smtx:XamlDisplay>
+
 						<!-- TextBox Filled MultiLine with Icon -->
 						<smtx:XamlDisplay UniqueKey="M3Material_TextBoxSamplePage_9"
 										  Style="{StaticResource XamlDisplayBelowStyle}">
@@ -238,28 +443,6 @@
 								</ut:ControlExtensions.Icon>
 							</TextBox>
 						</smtx:XamlDisplay>
-
-						<!-- TextBox Filled Icon with PlaceholderText -->
-						<smtx:XamlDisplay UniqueKey="M3Material_TextBoxSamplePage_11"
-										  Style="{StaticResource XamlDisplayBelowStyle}">
-							<TextBox PlaceholderText="Filled with Icon"
-									 Style="{StaticResource MaterialFilledTextBoxStyle}">
-								<ut:ControlExtensions.Icon>
-									<SymbolIcon Symbol="Favorite" />
-								</ut:ControlExtensions.Icon>
-							</TextBox>
-						</smtx:XamlDisplay>
-
-						<!-- TextBox Outlined Icon with PlaceholderText -->
-						<smtx:XamlDisplay UniqueKey="M3Material_TextBoxSamplePage_12"
-										  Style="{StaticResource XamlDisplayBelowStyle}">
-							<TextBox PlaceholderText="Outlined with Icon"
-									 Style="{StaticResource MaterialOutlinedTextBoxStyle}">
-								<ut:ControlExtensions.Icon>
-									<SymbolIcon Symbol="Favorite" />
-								</ut:ControlExtensions.Icon>
-							</TextBox>
-						</smtx:XamlDisplay>
 					</StackPanel>
 				</DataTemplate>
 			</sample:SamplePageLayout.M3MaterialTemplate>

From 771692f65457c302aaffaf1adb67c23772110ebc Mon Sep 17 00:00:00 2001
From: eriklimakc <erik.lima@knowcode.app>
Date: Thu, 1 Aug 2024 19:10:02 +0100
Subject: [PATCH 2/6] fix: Add HeaderStates to animate when changes made via
 code

---
 .../Styles/Controls/v2/TextBox.xaml           | 86 +++++++++++++++++++
 1 file changed, 86 insertions(+)

diff --git a/src/library/Uno.Material/Styles/Controls/v2/TextBox.xaml b/src/library/Uno.Material/Styles/Controls/v2/TextBox.xaml
index 68b04a4ea..a4cf3e177 100644
--- a/src/library/Uno.Material/Styles/Controls/v2/TextBox.xaml
+++ b/src/library/Uno.Material/Styles/Controls/v2/TextBox.xaml
@@ -466,6 +466,49 @@
 								<VisualState x:Name="ButtonCollapsed" />
 							</VisualStateGroup>
 
+							<!-- HeaderStates in place to manage animations when the TextBox is manipulated via code -->
+							<VisualStateGroup x:Name="HeaderStates">
+								<VisualState x:Name="NotEmpty">
+									<Storyboard>
+										<DoubleAnimation Storyboard.TargetName="HeaderElement_CompositeTransform"
+														 Storyboard.TargetProperty="TranslateY"
+														 Duration="{StaticResource MaterialTextBoxAnimationDuration}"
+														 EasingFunction="{StaticResource MaterialEaseInOutFunction}"
+														 To="-11" />
+										<DoubleAnimation Storyboard.TargetName="ContentElement_CompositeTransform"
+														 Storyboard.TargetProperty="TranslateY"
+														 Duration="{StaticResource MaterialAnimationDuration}"
+														 EasingFunction="{StaticResource MaterialEaseInOutFunction}"
+														 To="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource FocusedPlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<DoubleAnimation Storyboard.TargetName="HeaderElement_CompositeTransform"
+														 Storyboard.TargetProperty="ScaleX"
+														 Duration="{StaticResource MaterialTextBoxAnimationDuration}"
+														 EasingFunction="{StaticResource MaterialEaseInOutFunction}"
+														 To="0.7" />
+										<DoubleAnimation Storyboard.TargetName="PlaceholderElement_CompositeTransform"
+														 Storyboard.TargetProperty="TranslateY"
+														 Duration="{StaticResource MaterialAnimationDuration}"
+														 EasingFunction="{StaticResource MaterialEaseInOutFunction}"
+														 To="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource FocusedPlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<DoubleAnimation Storyboard.TargetName="HeaderElement_CompositeTransform"
+														 Storyboard.TargetProperty="ScaleY"
+														 Duration="{StaticResource MaterialTextBoxAnimationDuration}"
+														 EasingFunction="{StaticResource MaterialEaseInOutFunction}"
+														 To="0.7" />
+									</Storyboard>
+									<VisualState.StateTriggers>
+										<StateTrigger IsActive="{Binding Text, Converter={StaticResource EmptyToFalseConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
+										<StateTrigger IsActive="{Binding PlaceholderText, Converter={StaticResource EmptyToFalseConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
+									</VisualState.StateTriggers>
+								</VisualState>
+								<VisualState x:Name="Empty">
+									<VisualState.StateTriggers>
+										<StateTrigger IsActive="{Binding Text, Converter={StaticResource EmptyToTrueConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
+										<StateTrigger IsActive="{Binding PlaceholderText, Converter={StaticResource EmptyToTrueConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
+									</VisualState.StateTriggers>
+								</VisualState>
+							</VisualStateGroup>
+
 						</VisualStateManager.VisualStateGroups>
 
 						<Grid Padding="{TemplateBinding Padding}">
@@ -722,6 +765,49 @@
 								<VisualState x:Name="ButtonCollapsed" />
 							</VisualStateGroup>
 
+							<!-- HeaderStates in place to manage animations when the TextBox is manipulated via code -->
+							<VisualStateGroup x:Name="HeaderStates">
+								<VisualState x:Name="NotEmpty">
+									<Storyboard>
+										<DoubleAnimation Storyboard.TargetName="HeaderElement_CompositeTransform"
+														 Storyboard.TargetProperty="TranslateY"
+														 Duration="{StaticResource MaterialTextBoxAnimationDuration}"
+														 EasingFunction="{StaticResource MaterialEaseInOutFunction}"
+														 To="-11" />
+										<DoubleAnimation Storyboard.TargetName="ContentElement_CompositeTransform"
+														 Storyboard.TargetProperty="TranslateY"
+														 Duration="{StaticResource MaterialAnimationDuration}"
+														 EasingFunction="{StaticResource MaterialEaseInOutFunction}"
+														 To="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource FocusedPlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<DoubleAnimation Storyboard.TargetName="HeaderElement_CompositeTransform"
+														 Storyboard.TargetProperty="ScaleX"
+														 Duration="{StaticResource MaterialTextBoxAnimationDuration}"
+														 EasingFunction="{StaticResource MaterialEaseInOutFunction}"
+														 To="0.7" />
+										<DoubleAnimation Storyboard.TargetName="PlaceholderElement_CompositeTransform"
+														 Storyboard.TargetProperty="TranslateY"
+														 Duration="{StaticResource MaterialAnimationDuration}"
+														 EasingFunction="{StaticResource MaterialEaseInOutFunction}"
+														 To="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource FocusedPlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<DoubleAnimation Storyboard.TargetName="HeaderElement_CompositeTransform"
+														 Storyboard.TargetProperty="ScaleY"
+														 Duration="{StaticResource MaterialTextBoxAnimationDuration}"
+														 EasingFunction="{StaticResource MaterialEaseInOutFunction}"
+														 To="0.7" />
+									</Storyboard>
+									<VisualState.StateTriggers>
+										<StateTrigger IsActive="{Binding Text, Converter={StaticResource EmptyToFalseConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
+										<StateTrigger IsActive="{Binding PlaceholderText, Converter={StaticResource EmptyToFalseConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
+									</VisualState.StateTriggers>
+								</VisualState>
+								<VisualState x:Name="Empty">
+									<VisualState.StateTriggers>
+										<StateTrigger IsActive="{Binding Text, Converter={StaticResource EmptyToTrueConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
+										<StateTrigger IsActive="{Binding PlaceholderText, Converter={StaticResource EmptyToTrueConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
+									</VisualState.StateTriggers>
+								</VisualState>
+							</VisualStateGroup>
+
 						</VisualStateManager.VisualStateGroups>
 
 						<Grid x:Name="Root"

From 3639ddbf9a7bc478a0f8421c8502c6c7afb33626 Mon Sep 17 00:00:00 2001
From: eriklimakc <erik.lima@knowcode.app>
Date: Fri, 2 Aug 2024 16:59:46 +0100
Subject: [PATCH 3/6] chore: Using special VisualStateGroups to manage
 animations

---
 .../Styles/Controls/v2/TextBox.xaml           | 314 ++++++++++--------
 .../Content/Controls/TextBoxSamplePage.xaml   |  38 ++-
 .../Controls/TextBoxSamplePage.xaml.cs        |  38 ++-
 3 files changed, 245 insertions(+), 145 deletions(-)

diff --git a/src/library/Uno.Material/Styles/Controls/v2/TextBox.xaml b/src/library/Uno.Material/Styles/Controls/v2/TextBox.xaml
index a4cf3e177..d990be12c 100644
--- a/src/library/Uno.Material/Styles/Controls/v2/TextBox.xaml
+++ b/src/library/Uno.Material/Styles/Controls/v2/TextBox.xaml
@@ -356,16 +356,8 @@
 
 						<VisualStateManager.VisualStateGroups>
 							<VisualStateGroup x:Name="CommonStates">
-								<VisualState x:Name="Normal">
-									<VisualState.Setters>
-										<!-- Header and Placeholder animations -->
-										<Setter Target="HeaderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
-										<Setter Target="ContentElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
-										<Setter Target="PlaceholderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
-										<Setter Target="HeaderElement_CompositeTransform.ScaleX" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
-										<Setter Target="HeaderElement_CompositeTransform.ScaleY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
-									</VisualState.Setters>
-								</VisualState>
+								<VisualState x:Name="Normal" />
+
 
 								<VisualState x:Name="PointerOver">
 									<VisualState.Setters>
@@ -376,13 +368,6 @@
 										<Setter Target="ContentElement.Foreground" Value="{ThemeResource FilledTextBoxForegroundPointerOver}" />
 										<Setter Target="DeleteButton.Foreground" Value="{ThemeResource FilledTextBoxDeleteButtonForegroundPointerOver}" />
 										<Setter Target="NormalBorder.Height" Value="2" />
-
-										<!-- Header and Placeholder animations -->
-										<Setter Target="HeaderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
-										<Setter Target="ContentElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
-										<Setter Target="PlaceholderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
-										<Setter Target="HeaderElement_CompositeTransform.ScaleX" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
-										<Setter Target="HeaderElement_CompositeTransform.ScaleY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
 									</VisualState.Setters>
 								</VisualState>
 
@@ -400,12 +385,6 @@
 										<Setter Target="DeleteButton.Foreground" Value="{ThemeResource FilledTextBoxDeleteButtonForegroundDisabled}" />
 										<Setter Target="IconPresenter.Foreground" Value="{ThemeResource TextBoxLeadingIconForegroundDisabled}" />
 
-										<!-- Header and Placeholder animations -->
-										<Setter Target="HeaderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
-										<Setter Target="ContentElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
-										<Setter Target="PlaceholderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
-										<Setter Target="HeaderElement_CompositeTransform.ScaleX" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
-										<Setter Target="HeaderElement_CompositeTransform.ScaleY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
 									</VisualState.Setters>
 								</VisualState>
 
@@ -420,38 +399,11 @@
 										<Setter Target="DeleteButton.Foreground" Value="{ThemeResource FilledTextBoxDeleteButtonForegroundFocused}" />
 									</VisualState.Setters>
 									<Storyboard>
-										<!-- Animate Header Upwards -->
 										<DoubleAnimation Storyboard.TargetName="FocusedBorder_ScaleTransform"
 														 Storyboard.TargetProperty="ScaleX"
 														 Duration="{StaticResource MaterialAnimationDuration}"
 														 EasingFunction="{StaticResource MaterialEaseInOutFunction}"
 														 To="1" />
-
-										<DoubleAnimation Storyboard.TargetName="HeaderElement_CompositeTransform"
-														 Storyboard.TargetProperty="TranslateY"
-														 Duration="{StaticResource MaterialTextBoxAnimationDuration}"
-														 EasingFunction="{StaticResource MaterialEaseInOutFunction}"
-														 To="-11" />
-										<DoubleAnimation Storyboard.TargetName="ContentElement_CompositeTransform"
-														 Storyboard.TargetProperty="TranslateY"
-														 Duration="{StaticResource MaterialAnimationDuration}"
-														 EasingFunction="{StaticResource MaterialEaseInOutFunction}"
-														 To="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource FocusedPlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
-										<DoubleAnimation Storyboard.TargetName="PlaceholderElement_CompositeTransform"
-														 Storyboard.TargetProperty="TranslateY"
-														 Duration="{StaticResource MaterialAnimationDuration}"
-														 EasingFunction="{StaticResource MaterialEaseInOutFunction}"
-														 To="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource FocusedPlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
-										<DoubleAnimation Storyboard.TargetName="HeaderElement_CompositeTransform"
-														 Storyboard.TargetProperty="ScaleX"
-														 Duration="{StaticResource MaterialTextBoxAnimationDuration}"
-														 EasingFunction="{StaticResource MaterialEaseInOutFunction}"
-														 To="0.7" />
-										<DoubleAnimation Storyboard.TargetName="HeaderElement_CompositeTransform"
-														 Storyboard.TargetProperty="ScaleY"
-														 Duration="{StaticResource MaterialTextBoxAnimationDuration}"
-														 EasingFunction="{StaticResource MaterialEaseInOutFunction}"
-														 To="0.7" />
 									</Storyboard>
 								</VisualState>
 							</VisualStateGroup>
@@ -466,45 +418,109 @@
 								<VisualState x:Name="ButtonCollapsed" />
 							</VisualStateGroup>
 
-							<!-- HeaderStates in place to manage animations when the TextBox is manipulated via code -->
+							<!-- We need to use VisualStateGroups in order to capture when any of those properties are changed via code -->
+
+							<!-- HeaderStates -->
 							<VisualStateGroup x:Name="HeaderStates">
-								<VisualState x:Name="NotEmpty">
-									<Storyboard>
+								<VisualState x:Name="HeaderNotEmpty">
+									<VisualState.Setters>
+										<Setter Target="HeaderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<Setter Target="ContentElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource FocusedPlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<Setter Target="PlaceholderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource FocusedPlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<Setter Target="HeaderElement_CompositeTransform.ScaleX" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
+										<Setter Target="HeaderElement_CompositeTransform.ScaleY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
+									</VisualState.Setters>
+									<VisualState.StateTriggers>
+										<StateTrigger IsActive="{Binding Header, Converter={StaticResource EmptyToFalseConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
+									</VisualState.StateTriggers>
+								</VisualState>
+								<VisualState x:Name="HeaderEmpty">
+									<VisualState.Setters>
+										<Setter Target="HeaderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<Setter Target="ContentElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<Setter Target="PlaceholderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<Setter Target="HeaderElement_CompositeTransform.ScaleX" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
+										<Setter Target="HeaderElement_CompositeTransform.ScaleY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
+									</VisualState.Setters>
+									<VisualState.StateTriggers>
+										<StateTrigger IsActive="{Binding Header, Converter={StaticResource EmptyToTrueConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
+									</VisualState.StateTriggers>
+								</VisualState>
+							</VisualStateGroup>
+
+							<!-- PlaceholderStates -->
+							<VisualStateGroup x:Name="PlaceholderStates">
+								<VisualState x:Name="PlaceholderNotEmpty">
+									<VisualState.Setters>
+										<Setter Target="HeaderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<Setter Target="ContentElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<Setter Target="PlaceholderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<Setter Target="HeaderElement_CompositeTransform.ScaleX" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
+										<Setter Target="HeaderElement_CompositeTransform.ScaleY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
+									</VisualState.Setters>
+									<VisualState.StateTriggers>
+										<StateTrigger IsActive="{Binding PlaceholderText, Converter={StaticResource EmptyToFalseConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
+									</VisualState.StateTriggers>
+								</VisualState>
+								<VisualState x:Name="PlaceholderEmpty">
+									<VisualState.Setters>
+										<Setter Target="HeaderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<Setter Target="ContentElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<Setter Target="PlaceholderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<Setter Target="HeaderElement_CompositeTransform.ScaleX" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
+										<Setter Target="HeaderElement_CompositeTransform.ScaleY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
+									</VisualState.Setters>
+									<VisualState.StateTriggers>
+										<StateTrigger IsActive="{Binding PlaceholderText, Converter={StaticResource EmptyToTrueConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
+									</VisualState.StateTriggers>
+								</VisualState>
+							</VisualStateGroup>
+
+							<!-- TextStates -->
+							<VisualStateGroup x:Name="TextStates">
+								<VisualState x:Name="TextNotEmpty">
+									<VisualState.Setters>
+										<Setter Target="ContentElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource FocusedPlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<Setter Target="PlaceholderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource FocusedPlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+
+										<!-- Setters instead of animations on WASM work -->
+										<Setter Target="HeaderElement_CompositeTransform.ScaleX" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
+										<Setter Target="HeaderElement_CompositeTransform.ScaleY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
+										<Setter Target="HeaderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+									</VisualState.Setters>
+
+									<!-- Animations not working properly on WASM -->
+									<!--<Storyboard>
 										<DoubleAnimation Storyboard.TargetName="HeaderElement_CompositeTransform"
 														 Storyboard.TargetProperty="TranslateY"
 														 Duration="{StaticResource MaterialTextBoxAnimationDuration}"
 														 EasingFunction="{StaticResource MaterialEaseInOutFunction}"
-														 To="-11" />
-										<DoubleAnimation Storyboard.TargetName="ContentElement_CompositeTransform"
-														 Storyboard.TargetProperty="TranslateY"
-														 Duration="{StaticResource MaterialAnimationDuration}"
-														 EasingFunction="{StaticResource MaterialEaseInOutFunction}"
-														 To="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource FocusedPlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+														 To="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
 										<DoubleAnimation Storyboard.TargetName="HeaderElement_CompositeTransform"
 														 Storyboard.TargetProperty="ScaleX"
 														 Duration="{StaticResource MaterialTextBoxAnimationDuration}"
 														 EasingFunction="{StaticResource MaterialEaseInOutFunction}"
-														 To="0.7" />
-										<DoubleAnimation Storyboard.TargetName="PlaceholderElement_CompositeTransform"
-														 Storyboard.TargetProperty="TranslateY"
-														 Duration="{StaticResource MaterialAnimationDuration}"
-														 EasingFunction="{StaticResource MaterialEaseInOutFunction}"
-														 To="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource FocusedPlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+														 To="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
 										<DoubleAnimation Storyboard.TargetName="HeaderElement_CompositeTransform"
 														 Storyboard.TargetProperty="ScaleY"
 														 Duration="{StaticResource MaterialTextBoxAnimationDuration}"
 														 EasingFunction="{StaticResource MaterialEaseInOutFunction}"
-														 To="0.7" />
-									</Storyboard>
+														 To="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
+									</Storyboard>-->
 									<VisualState.StateTriggers>
 										<StateTrigger IsActive="{Binding Text, Converter={StaticResource EmptyToFalseConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
-										<StateTrigger IsActive="{Binding PlaceholderText, Converter={StaticResource EmptyToFalseConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
 									</VisualState.StateTriggers>
 								</VisualState>
-								<VisualState x:Name="Empty">
+								<VisualState x:Name="TextEmpty">
+									<VisualState.Setters>
+										<Setter Target="HeaderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<Setter Target="ContentElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<Setter Target="PlaceholderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<Setter Target="HeaderElement_CompositeTransform.ScaleX" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
+										<Setter Target="HeaderElement_CompositeTransform.ScaleY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
+									</VisualState.Setters>
 									<VisualState.StateTriggers>
 										<StateTrigger IsActive="{Binding Text, Converter={StaticResource EmptyToTrueConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
-										<StateTrigger IsActive="{Binding PlaceholderText, Converter={StaticResource EmptyToTrueConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
 									</VisualState.StateTriggers>
 								</VisualState>
 							</VisualStateGroup>
@@ -666,16 +682,7 @@
 
 						<VisualStateManager.VisualStateGroups>
 							<VisualStateGroup x:Name="CommonStates">
-								<VisualState x:Name="Normal">
-									<VisualState.Setters>
-										<!-- Header and Placeholder animations -->
-										<Setter Target="HeaderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
-										<Setter Target="ContentElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
-										<Setter Target="PlaceholderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
-										<Setter Target="HeaderElement_CompositeTransform.ScaleX" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
-										<Setter Target="HeaderElement_CompositeTransform.ScaleY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
-									</VisualState.Setters>
-								</VisualState>
+								<VisualState x:Name="Normal" />
 								<VisualState x:Name="PointerOver">
 									<VisualState.Setters>
 										<Setter Target="RootBorder.BorderBrush" Value="{ThemeResource OutlinedTextBoxBorderBrushPointerOver}" />
@@ -684,13 +691,6 @@
 										<Setter Target="HeaderElement.Foreground" Value="{ThemeResource OutlinedTextBoxHeaderForegroundPointerOver}" />
 										<Setter Target="RootBorder.BorderThickness" Value="2" />
 										<Setter Target="RootBorder.Padding" Value="0" />
-
-										<!-- Header and Placeholder animations -->
-										<Setter Target="HeaderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
-										<Setter Target="ContentElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
-										<Setter Target="PlaceholderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
-										<Setter Target="HeaderElement_CompositeTransform.ScaleX" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
-										<Setter Target="HeaderElement_CompositeTransform.ScaleY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
 									</VisualState.Setters>
 								</VisualState>
 								<VisualState x:Name="Pressed" />
@@ -704,13 +704,6 @@
 										<Setter Target="PlaceholderElement.Foreground" Value="{ThemeResource OutlinedTextBoxPlaceholderForegroundDisabled}" />
 										<Setter Target="HeaderElement.Foreground" Value="{ThemeResource OutlinedTextBoxHeaderForegroundDisabled}" />
 										<Setter Target="IconPresenter.Foreground" Value="{ThemeResource TextBoxLeadingIconForegroundDisabled}" />
-
-										<!-- Header and Placeholder animations -->
-										<Setter Target="HeaderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
-										<Setter Target="ContentElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
-										<Setter Target="PlaceholderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
-										<Setter Target="HeaderElement_CompositeTransform.ScaleX" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
-										<Setter Target="HeaderElement_CompositeTransform.ScaleY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
 									</VisualState.Setters>
 								</VisualState>
 
@@ -724,35 +717,6 @@
 										<Setter Target="RootBorder.BorderThickness" Value="{ThemeResource MaterialOutlinedTextBoxBorderThicknessFocused}" />
 										<Setter Target="RootBorder.Padding" Value="0" />
 									</VisualState.Setters>
-
-									<Storyboard>
-										<!-- Animate Header Upwards -->
-										<DoubleAnimation Storyboard.TargetName="HeaderElement_CompositeTransform"
-														 Storyboard.TargetProperty="TranslateY"
-														 Duration="{StaticResource MaterialTextBoxAnimationDuration}"
-														 EasingFunction="{StaticResource MaterialEaseInOutFunction}"
-														 To="-11" />
-										<DoubleAnimation Storyboard.TargetName="ContentElement_CompositeTransform"
-														 Storyboard.TargetProperty="TranslateY"
-														 Duration="{StaticResource MaterialAnimationDuration}"
-														 EasingFunction="{StaticResource MaterialEaseInOutFunction}"
-														 To="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource FocusedPlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
-										<DoubleAnimation Storyboard.TargetName="PlaceholderElement_CompositeTransform"
-														 Storyboard.TargetProperty="TranslateY"
-														 Duration="{StaticResource MaterialAnimationDuration}"
-														 EasingFunction="{StaticResource MaterialEaseInOutFunction}"
-														 To="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource FocusedPlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
-										<DoubleAnimation Storyboard.TargetName="HeaderElement_CompositeTransform"
-														 Storyboard.TargetProperty="ScaleX"
-														 Duration="{StaticResource MaterialTextBoxAnimationDuration}"
-														 EasingFunction="{StaticResource MaterialEaseInOutFunction}"
-														 To="0.7" />
-										<DoubleAnimation Storyboard.TargetName="HeaderElement_CompositeTransform"
-														 Storyboard.TargetProperty="ScaleY"
-														 Duration="{StaticResource MaterialTextBoxAnimationDuration}"
-														 EasingFunction="{StaticResource MaterialEaseInOutFunction}"
-														 To="0.7" />
-									</Storyboard>
 								</VisualState>
 							</VisualStateGroup>
 
@@ -765,45 +729,109 @@
 								<VisualState x:Name="ButtonCollapsed" />
 							</VisualStateGroup>
 
-							<!-- HeaderStates in place to manage animations when the TextBox is manipulated via code -->
+							<!-- We need to use VisualStateGroups in order to capture when any of those properties are changed via code -->
+
+							<!-- HeaderStates -->
 							<VisualStateGroup x:Name="HeaderStates">
-								<VisualState x:Name="NotEmpty">
-									<Storyboard>
+								<VisualState x:Name="HeaderNotEmpty">
+									<VisualState.Setters>
+										<Setter Target="HeaderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<Setter Target="ContentElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource FocusedPlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<Setter Target="PlaceholderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource FocusedPlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<Setter Target="HeaderElement_CompositeTransform.ScaleX" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
+										<Setter Target="HeaderElement_CompositeTransform.ScaleY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
+									</VisualState.Setters>
+									<VisualState.StateTriggers>
+										<StateTrigger IsActive="{Binding Header, Converter={StaticResource EmptyToFalseConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
+									</VisualState.StateTriggers>
+								</VisualState>
+								<VisualState x:Name="HeaderEmpty">
+									<VisualState.Setters>
+										<Setter Target="HeaderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<Setter Target="ContentElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<Setter Target="PlaceholderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<Setter Target="HeaderElement_CompositeTransform.ScaleX" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
+										<Setter Target="HeaderElement_CompositeTransform.ScaleY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
+									</VisualState.Setters>
+									<VisualState.StateTriggers>
+										<StateTrigger IsActive="{Binding Header, Converter={StaticResource EmptyToTrueConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
+									</VisualState.StateTriggers>
+								</VisualState>
+							</VisualStateGroup>
+
+							<!-- PlaceholderStates -->
+							<VisualStateGroup x:Name="PlaceholderStates">
+								<VisualState x:Name="PlaceholderNotEmpty">
+									<VisualState.Setters>
+										<Setter Target="HeaderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<Setter Target="ContentElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<Setter Target="PlaceholderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<Setter Target="HeaderElement_CompositeTransform.ScaleX" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
+										<Setter Target="HeaderElement_CompositeTransform.ScaleY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
+									</VisualState.Setters>
+									<VisualState.StateTriggers>
+										<StateTrigger IsActive="{Binding PlaceholderText, Converter={StaticResource EmptyToFalseConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
+									</VisualState.StateTriggers>
+								</VisualState>
+								<VisualState x:Name="PlaceholderEmpty">
+									<VisualState.Setters>
+										<Setter Target="HeaderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<Setter Target="ContentElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<Setter Target="PlaceholderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<Setter Target="HeaderElement_CompositeTransform.ScaleX" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
+										<Setter Target="HeaderElement_CompositeTransform.ScaleY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
+									</VisualState.Setters>
+									<VisualState.StateTriggers>
+										<StateTrigger IsActive="{Binding PlaceholderText, Converter={StaticResource EmptyToTrueConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
+									</VisualState.StateTriggers>
+								</VisualState>
+							</VisualStateGroup>
+
+							<!-- TextStates -->
+							<VisualStateGroup x:Name="TextStates">
+								<VisualState x:Name="TextNotEmpty">
+									<VisualState.Setters>
+										<Setter Target="ContentElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource FocusedPlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<Setter Target="PlaceholderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource FocusedPlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+
+										<!-- Setters instead of animations on WASM work -->
+										<Setter Target="HeaderElement_CompositeTransform.ScaleX" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
+										<Setter Target="HeaderElement_CompositeTransform.ScaleY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
+										<Setter Target="HeaderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+									</VisualState.Setters>
+
+									<!-- Animations not working properly on WASM -->
+									<!-- <Storyboard>
 										<DoubleAnimation Storyboard.TargetName="HeaderElement_CompositeTransform"
 														 Storyboard.TargetProperty="TranslateY"
 														 Duration="{StaticResource MaterialTextBoxAnimationDuration}"
 														 EasingFunction="{StaticResource MaterialEaseInOutFunction}"
-														 To="-11" />
-										<DoubleAnimation Storyboard.TargetName="ContentElement_CompositeTransform"
-														 Storyboard.TargetProperty="TranslateY"
-														 Duration="{StaticResource MaterialAnimationDuration}"
-														 EasingFunction="{StaticResource MaterialEaseInOutFunction}"
-														 To="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource FocusedPlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+														 To="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
 										<DoubleAnimation Storyboard.TargetName="HeaderElement_CompositeTransform"
 														 Storyboard.TargetProperty="ScaleX"
 														 Duration="{StaticResource MaterialTextBoxAnimationDuration}"
 														 EasingFunction="{StaticResource MaterialEaseInOutFunction}"
-														 To="0.7" />
-										<DoubleAnimation Storyboard.TargetName="PlaceholderElement_CompositeTransform"
-														 Storyboard.TargetProperty="TranslateY"
-														 Duration="{StaticResource MaterialAnimationDuration}"
-														 EasingFunction="{StaticResource MaterialEaseInOutFunction}"
-														 To="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource FocusedPlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+														 To="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
 										<DoubleAnimation Storyboard.TargetName="HeaderElement_CompositeTransform"
 														 Storyboard.TargetProperty="ScaleY"
 														 Duration="{StaticResource MaterialTextBoxAnimationDuration}"
 														 EasingFunction="{StaticResource MaterialEaseInOutFunction}"
-														 To="0.7" />
-									</Storyboard>
+														 To="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
+									</Storyboard> -->
 									<VisualState.StateTriggers>
 										<StateTrigger IsActive="{Binding Text, Converter={StaticResource EmptyToFalseConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
-										<StateTrigger IsActive="{Binding PlaceholderText, Converter={StaticResource EmptyToFalseConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
 									</VisualState.StateTriggers>
 								</VisualState>
-								<VisualState x:Name="Empty">
+								<VisualState x:Name="TextEmpty">
+									<VisualState.Setters>
+										<Setter Target="HeaderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<Setter Target="ContentElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<Setter Target="PlaceholderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<Setter Target="HeaderElement_CompositeTransform.ScaleX" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
+										<Setter Target="HeaderElement_CompositeTransform.ScaleY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
+									</VisualState.Setters>
 									<VisualState.StateTriggers>
 										<StateTrigger IsActive="{Binding Text, Converter={StaticResource EmptyToTrueConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
-										<StateTrigger IsActive="{Binding PlaceholderText, Converter={StaticResource EmptyToTrueConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
 									</VisualState.StateTriggers>
 								</VisualState>
 							</VisualStateGroup>
diff --git a/src/samples/UWP/Uno.Themes.Samples.Shared/Content/Controls/TextBoxSamplePage.xaml b/src/samples/UWP/Uno.Themes.Samples.Shared/Content/Controls/TextBoxSamplePage.xaml
index 169d23c68..b329275f2 100644
--- a/src/samples/UWP/Uno.Themes.Samples.Shared/Content/Controls/TextBoxSamplePage.xaml
+++ b/src/samples/UWP/Uno.Themes.Samples.Shared/Content/Controls/TextBoxSamplePage.xaml
@@ -10,7 +10,43 @@
 	  mc:Ignorable="d">
 
 	<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
-		<sample:SamplePageLayout>
+		<Grid.RowDefinitions>
+			<RowDefinition Height="Auto" />
+			<RowDefinition Height="*" />
+		</Grid.RowDefinitions>
+
+		<StackPanel Spacing="10"
+					HorizontalAlignment="Center"
+					Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
+					Orientation="Vertical">
+			<TextBox Style="{StaticResource MaterialFilledTextBoxStyle}"
+					 x:Name="txtMyTb"
+					 Width="270" />
+			<TextBox Style="{StaticResource MaterialOutlinedTextBoxStyle}"
+					 x:Name="txtMyTb1"
+					 Width="270" />
+			<StackPanel HorizontalAlignment="Center"
+						Orientation="Horizontal">
+				<Button Content="Add Header"
+						Click="AddHeader" />
+				<Button Content="Add Placeholder"
+						Click="AddPlaceholder" />
+				<Button Content="Add Text"
+						Click="AddText" />
+			</StackPanel>
+
+			<StackPanel VerticalAlignment="Center"
+						Orientation="Horizontal">
+				<Button Content="Remove Header"
+						Click="RemoveHeader" />
+				<Button Content="Remove Placeholder"
+						Click="RemovePlaceholder" />
+				<Button Content="Remove Text"
+						Click="RemoveText" />
+			</StackPanel>
+
+		</StackPanel>
+		<sample:SamplePageLayout Grid.Row="1">
 			<sample:SamplePageLayout.MaterialTemplate>
 				<DataTemplate>
 					<StackPanel>
diff --git a/src/samples/UWP/Uno.Themes.Samples.Shared/Content/Controls/TextBoxSamplePage.xaml.cs b/src/samples/UWP/Uno.Themes.Samples.Shared/Content/Controls/TextBoxSamplePage.xaml.cs
index 5edca7fae..eadd7d21e 100644
--- a/src/samples/UWP/Uno.Themes.Samples.Shared/Content/Controls/TextBoxSamplePage.xaml.cs
+++ b/src/samples/UWP/Uno.Themes.Samples.Shared/Content/Controls/TextBoxSamplePage.xaml.cs
@@ -1,4 +1,4 @@
-namespace Uno.Themes.Samples.Content.Controls;
+namespace Uno.Themes.Samples.Content.Controls;
 
 [SamplePage(SampleCategory.Controls, "TextBox", Description = "This control allows users to input a textual value.", DocumentationLink = "https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.textbox")]
 public sealed partial class TextBoxSamplePage : Page
@@ -7,4 +7,40 @@ public TextBoxSamplePage()
 	{
 		this.InitializeComponent();
 	}
+
+	private void AddHeader(object sender, RoutedEventArgs e)
+	{
+		txtMyTb.Header = "Header";
+		txtMyTb1.Header = "Header";
+	}
+
+	private void RemoveHeader(object sender, RoutedEventArgs e)
+	{
+		txtMyTb.Header = null;
+		txtMyTb1.Header = null;
+	}
+
+	private void AddPlaceholder(object sender, RoutedEventArgs e)
+	{
+		txtMyTb.PlaceholderText = "Placeholder";
+		txtMyTb1.PlaceholderText = "Placeholder";
+	}
+
+	private void RemovePlaceholder(object sender, RoutedEventArgs e)
+	{
+		txtMyTb.PlaceholderText = null;
+		txtMyTb1.PlaceholderText = null;
+	}
+
+	private void AddText(object sender, RoutedEventArgs e)
+	{
+		txtMyTb.Text = "Text";
+		txtMyTb1.Text = "Text";
+	}
+
+	private void RemoveText(object sender, RoutedEventArgs e)
+	{
+		txtMyTb.Text = null;
+		txtMyTb1.Text = null;
+	}
 }

From 4394c7745f649388fcc6939e1f4dc5f717356e85 Mon Sep 17 00:00:00 2001
From: eriklimakc <erik.lima@knowcode.app>
Date: Wed, 7 Aug 2024 13:11:26 +0100
Subject: [PATCH 4/6] chore: Fixing animation for wasm

---
 .../Styles/Controls/v2/TextBox.xaml           | 39 +++++++------------
 1 file changed, 13 insertions(+), 26 deletions(-)

diff --git a/src/library/Uno.Material/Styles/Controls/v2/TextBox.xaml b/src/library/Uno.Material/Styles/Controls/v2/TextBox.xaml
index d990be12c..d5fc0938d 100644
--- a/src/library/Uno.Material/Styles/Controls/v2/TextBox.xaml
+++ b/src/library/Uno.Material/Styles/Controls/v2/TextBox.xaml
@@ -18,7 +18,7 @@
 
 		- With placeholder but no header: The placeholder will be displayed where the text is supposed to be until text is inputed
 
-		- With header but no placeholder: The header will be displayed where the text is supposed to be and will move up when focused
+		- With header but no placeholder: The header will be displayed where the text is supposed to be and will move up when text is inputed
 
 		- Whith header and placeholder: The header will be displayed at the top and the placeholder will be displayed where the text is supposed to be until text is inputed
 	-->
@@ -358,7 +358,6 @@
 							<VisualStateGroup x:Name="CommonStates">
 								<VisualState x:Name="Normal" />
 
-
 								<VisualState x:Name="PointerOver">
 									<VisualState.Setters>
 										<Setter Target="NormalBorder.Fill" Value="{ThemeResource FilledTextBoxBorderBrushPointerOver}" />
@@ -425,7 +424,7 @@
 								<VisualState x:Name="HeaderNotEmpty">
 									<VisualState.Setters>
 										<Setter Target="HeaderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
-										<Setter Target="ContentElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource FocusedPlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<Setter Target="ContentElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
 										<Setter Target="PlaceholderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource FocusedPlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
 										<Setter Target="HeaderElement_CompositeTransform.ScaleX" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
 										<Setter Target="HeaderElement_CompositeTransform.ScaleY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
@@ -482,31 +481,25 @@
 									<VisualState.Setters>
 										<Setter Target="ContentElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource FocusedPlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
 										<Setter Target="PlaceholderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource FocusedPlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
-
-										<!-- Setters instead of animations on WASM work -->
-										<Setter Target="HeaderElement_CompositeTransform.ScaleX" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
-										<Setter Target="HeaderElement_CompositeTransform.ScaleY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
-										<Setter Target="HeaderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
 									</VisualState.Setters>
 
-									<!-- Animations not working properly on WASM -->
-									<!--<Storyboard>
+									<Storyboard>
 										<DoubleAnimation Storyboard.TargetName="HeaderElement_CompositeTransform"
 														 Storyboard.TargetProperty="TranslateY"
 														 Duration="{StaticResource MaterialTextBoxAnimationDuration}"
 														 EasingFunction="{StaticResource MaterialEaseInOutFunction}"
-														 To="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+														 To="-11" />
 										<DoubleAnimation Storyboard.TargetName="HeaderElement_CompositeTransform"
 														 Storyboard.TargetProperty="ScaleX"
 														 Duration="{StaticResource MaterialTextBoxAnimationDuration}"
 														 EasingFunction="{StaticResource MaterialEaseInOutFunction}"
-														 To="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
+														 To="0.7" />
 										<DoubleAnimation Storyboard.TargetName="HeaderElement_CompositeTransform"
 														 Storyboard.TargetProperty="ScaleY"
 														 Duration="{StaticResource MaterialTextBoxAnimationDuration}"
 														 EasingFunction="{StaticResource MaterialEaseInOutFunction}"
-														 To="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
-									</Storyboard>-->
+														 To="0.7" />
+									</Storyboard>
 									<VisualState.StateTriggers>
 										<StateTrigger IsActive="{Binding Text, Converter={StaticResource EmptyToFalseConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
 									</VisualState.StateTriggers>
@@ -736,7 +729,7 @@
 								<VisualState x:Name="HeaderNotEmpty">
 									<VisualState.Setters>
 										<Setter Target="HeaderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
-										<Setter Target="ContentElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource FocusedPlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+										<Setter Target="ContentElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
 										<Setter Target="PlaceholderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource FocusedPlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
 										<Setter Target="HeaderElement_CompositeTransform.ScaleX" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
 										<Setter Target="HeaderElement_CompositeTransform.ScaleY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
@@ -793,31 +786,25 @@
 									<VisualState.Setters>
 										<Setter Target="ContentElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource FocusedPlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
 										<Setter Target="PlaceholderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource FocusedPlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
-
-										<!-- Setters instead of animations on WASM work -->
-										<Setter Target="HeaderElement_CompositeTransform.ScaleX" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
-										<Setter Target="HeaderElement_CompositeTransform.ScaleY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
-										<Setter Target="HeaderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
 									</VisualState.Setters>
 
-									<!-- Animations not working properly on WASM -->
-									<!-- <Storyboard>
+									<Storyboard>
 										<DoubleAnimation Storyboard.TargetName="HeaderElement_CompositeTransform"
 														 Storyboard.TargetProperty="TranslateY"
 														 Duration="{StaticResource MaterialTextBoxAnimationDuration}"
 														 EasingFunction="{StaticResource MaterialEaseInOutFunction}"
-														 To="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
+														 To="-11" />
 										<DoubleAnimation Storyboard.TargetName="HeaderElement_CompositeTransform"
 														 Storyboard.TargetProperty="ScaleX"
 														 Duration="{StaticResource MaterialTextBoxAnimationDuration}"
 														 EasingFunction="{StaticResource MaterialEaseInOutFunction}"
-														 To="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
+														 To="0.7" />
 										<DoubleAnimation Storyboard.TargetName="HeaderElement_CompositeTransform"
 														 Storyboard.TargetProperty="ScaleY"
 														 Duration="{StaticResource MaterialTextBoxAnimationDuration}"
 														 EasingFunction="{StaticResource MaterialEaseInOutFunction}"
-														 To="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" />
-									</Storyboard> -->
+														 To="0.7" />
+									</Storyboard>
 									<VisualState.StateTriggers>
 										<StateTrigger IsActive="{Binding Text, Converter={StaticResource EmptyToFalseConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
 									</VisualState.StateTriggers>

From f71d18abd584760db00d2e4bd831e5f43a85d5c7 Mon Sep 17 00:00:00 2001
From: eriklimakc <erik.lima@knowcode.app>
Date: Thu, 8 Aug 2024 14:13:12 +0100
Subject: [PATCH 5/6] chore: Adjust docs and remove test code

---
 doc/material-migration.md                     |  2 +-
 .../Content/Controls/TextBoxSamplePage.xaml   | 38 +------------------
 .../Controls/TextBoxSamplePage.xaml.cs        | 36 ------------------
 3 files changed, 2 insertions(+), 74 deletions(-)

diff --git a/doc/material-migration.md b/doc/material-migration.md
index c5abfcc22..63285b5a2 100644
--- a/doc/material-migration.md
+++ b/doc/material-migration.md
@@ -17,7 +17,7 @@ Previously, the `PlaceholderText` property acted as a header, displaying in the
 ##### New Behavior
 
 - **PlaceholderText**: Displays inside the TextBox when it's empty. Disappears when text is entered.
-- **Header**: Acts as a label. Animates upwards when the TextBox is focused.
+- **Header**: Acts as a label. Animates upwards when text is entered.
 
 ##### Example
 
diff --git a/src/samples/UWP/Uno.Themes.Samples.Shared/Content/Controls/TextBoxSamplePage.xaml b/src/samples/UWP/Uno.Themes.Samples.Shared/Content/Controls/TextBoxSamplePage.xaml
index b329275f2..169d23c68 100644
--- a/src/samples/UWP/Uno.Themes.Samples.Shared/Content/Controls/TextBoxSamplePage.xaml
+++ b/src/samples/UWP/Uno.Themes.Samples.Shared/Content/Controls/TextBoxSamplePage.xaml
@@ -10,43 +10,7 @@
 	  mc:Ignorable="d">
 
 	<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
-		<Grid.RowDefinitions>
-			<RowDefinition Height="Auto" />
-			<RowDefinition Height="*" />
-		</Grid.RowDefinitions>
-
-		<StackPanel Spacing="10"
-					HorizontalAlignment="Center"
-					Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
-					Orientation="Vertical">
-			<TextBox Style="{StaticResource MaterialFilledTextBoxStyle}"
-					 x:Name="txtMyTb"
-					 Width="270" />
-			<TextBox Style="{StaticResource MaterialOutlinedTextBoxStyle}"
-					 x:Name="txtMyTb1"
-					 Width="270" />
-			<StackPanel HorizontalAlignment="Center"
-						Orientation="Horizontal">
-				<Button Content="Add Header"
-						Click="AddHeader" />
-				<Button Content="Add Placeholder"
-						Click="AddPlaceholder" />
-				<Button Content="Add Text"
-						Click="AddText" />
-			</StackPanel>
-
-			<StackPanel VerticalAlignment="Center"
-						Orientation="Horizontal">
-				<Button Content="Remove Header"
-						Click="RemoveHeader" />
-				<Button Content="Remove Placeholder"
-						Click="RemovePlaceholder" />
-				<Button Content="Remove Text"
-						Click="RemoveText" />
-			</StackPanel>
-
-		</StackPanel>
-		<sample:SamplePageLayout Grid.Row="1">
+		<sample:SamplePageLayout>
 			<sample:SamplePageLayout.MaterialTemplate>
 				<DataTemplate>
 					<StackPanel>
diff --git a/src/samples/UWP/Uno.Themes.Samples.Shared/Content/Controls/TextBoxSamplePage.xaml.cs b/src/samples/UWP/Uno.Themes.Samples.Shared/Content/Controls/TextBoxSamplePage.xaml.cs
index eadd7d21e..7558616e5 100644
--- a/src/samples/UWP/Uno.Themes.Samples.Shared/Content/Controls/TextBoxSamplePage.xaml.cs
+++ b/src/samples/UWP/Uno.Themes.Samples.Shared/Content/Controls/TextBoxSamplePage.xaml.cs
@@ -7,40 +7,4 @@ public TextBoxSamplePage()
 	{
 		this.InitializeComponent();
 	}
-
-	private void AddHeader(object sender, RoutedEventArgs e)
-	{
-		txtMyTb.Header = "Header";
-		txtMyTb1.Header = "Header";
-	}
-
-	private void RemoveHeader(object sender, RoutedEventArgs e)
-	{
-		txtMyTb.Header = null;
-		txtMyTb1.Header = null;
-	}
-
-	private void AddPlaceholder(object sender, RoutedEventArgs e)
-	{
-		txtMyTb.PlaceholderText = "Placeholder";
-		txtMyTb1.PlaceholderText = "Placeholder";
-	}
-
-	private void RemovePlaceholder(object sender, RoutedEventArgs e)
-	{
-		txtMyTb.PlaceholderText = null;
-		txtMyTb1.PlaceholderText = null;
-	}
-
-	private void AddText(object sender, RoutedEventArgs e)
-	{
-		txtMyTb.Text = "Text";
-		txtMyTb1.Text = "Text";
-	}
-
-	private void RemoveText(object sender, RoutedEventArgs e)
-	{
-		txtMyTb.Text = null;
-		txtMyTb1.Text = null;
-	}
 }

From 0d6e80f97f0c42fd7a84ebc4523d1548712ece18 Mon Sep 17 00:00:00 2001
From: eriklimakc <erik.lima@knowcode.app>
Date: Fri, 9 Aug 2024 12:01:45 +0100
Subject: [PATCH 6/6] chore: Fix typos

---
 src/library/Uno.Material/Styles/Controls/v2/TextBox.xaml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/library/Uno.Material/Styles/Controls/v2/TextBox.xaml b/src/library/Uno.Material/Styles/Controls/v2/TextBox.xaml
index d5fc0938d..7ac1c84bb 100644
--- a/src/library/Uno.Material/Styles/Controls/v2/TextBox.xaml
+++ b/src/library/Uno.Material/Styles/Controls/v2/TextBox.xaml
@@ -16,11 +16,11 @@
 
 		- Without Header/Placeholder: Simple TextBox
 
-		- With placeholder but no header: The placeholder will be displayed where the text is supposed to be until text is inputed
+		- With placeholder but no header: The placeholder will be displayed where the text is supposed to be until the text is inputted
 
-		- With header but no placeholder: The header will be displayed where the text is supposed to be and will move up when text is inputed
+		- With header but no placeholder: The header will be displayed where the text is supposed to be and will move up when text is inputted
 
-		- Whith header and placeholder: The header will be displayed at the top and the placeholder will be displayed where the text is supposed to be until text is inputed
+		- With header and placeholder: The header will be displayed at the top, and the placeholder will be displayed where the text is supposed to be until the text is inputted
 	-->
 
 	<!-- Converters -->