fix: ensure attribute animations respond to code changes

[eriklimakc]

GitHub Issue: #1451

PR Type

What kind of change does this PR introduce?

• Bugfix

Description

When TextBox was disabled PlaceholderText and Header were not properly placed.

PR Checklist

Please check if your PR fulfills the following requirements:

• Commits must be following the Conventional Commits specification
• Tested the changes where applicable:
  • UWP
  • iOS
  • Android
  • WASM
  • MacOS
• Updated the documentation as needed:
  • General Doc Update
  • material-controls-styles.md
  • cupertino-controls-styles.md
  • lightweight-styling.md (LightWeight Styling Resource Keys)
• Contains No breaking changes

  If the pull request contains breaking changes, commit message must contain a detailed description of the action to take for the consumer of this library. As explained by the Conventional Commits specification

Other information

Internal Issue (If applicable):

[kazo0]

@Mergifyio backport release/stable/5.1

[mergify]

backport release/stable/5.1

✅ Backports have been created

• #1455 fix: ensure attribute animations respond to code changes (backport #1452) has been created for branch release/stable/5.1

[eriklimakc]

To have animations taking action also when Text, PlaceholderText, Header are changed via code, we need to use those VisualStateGroups.

I tried to cleanup and avoid repetition as much as I could. From my tests everything is working everywhere, except the animation of Header upwards when text is entered. On the video below the Filled TextBox is using only Setters while the Outlined is using DoubleAnimation to animate the Header upwards:

wasm.animation.mp4

I left comments on the code:

Uno.Themes/src/library/Uno.Material/Styles/Controls/v2/TextBox.xaml

Lines 486 to 509 in 7c96d93

	<!-- 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 now working properly on WASM -->
	<!--<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}" />
	<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}" />
	<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>-->

cc @kazo0 @Xiaoy312

[Xiaoy312]

while there is the concern of having multiple parallel visual states (from different VSG) competing to modify the same dependency property
but going through the msdn docs on VS,VSG,VSM,Storyboard,Timeline,DoubleAnimation,Storyboarded animations, etc...
microsoft doesnt seem to explicitly forbid this practice
so ill greenlight this, since it seems to work well atm

[Xiaoy312]

@eriklimakc would you be able to create a standalone repro of the wasm textbox problem, or save a snapshot branch in themes
and open an issue on uno, so we could investigate further?

[eriklimakc]

@eriklimakc would you be able to create a standalone repro of the wasm textbox problem, or save a snapshot branch in themes and open an issue on uno, so we could investigate further?

@Xiaoy312 Yes, here is the issue unoplatform/uno#17888

cc @kazo0