VisualStateTrigger are not working properly in the Playground

[agneszitte]

Current behavior

RenderTansform animations don't work inside the Playground but the same code is working fine in an UNO solution when testing WASM

Expected behavior

RenderTansform animations should work correctly inside the Playground

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

	<Grid>
		<VisualStateManager.VisualStateGroups>
			<VisualStateGroup>
				<VisualState>
					<VisualState.StateTriggers>
						<StateTrigger IsActive="True" />
					</VisualState.StateTriggers>
					<Storyboard>
						<!-- TEST ANIMATION TRANSLATE TRANSFORM-->
						<DoubleAnimationUsingKeyFrames  Duration="0:0:10"
														RepeatBehavior="Forever"
Storyboard.TargetName="TestTranslateTransform"
														Storyboard.TargetProperty="X">
							<LinearDoubleKeyFrame Value="-200"
												  KeyTime="0:0:0" />
							<LinearDoubleKeyFrame Value="0"
												  KeyTime="0:0:5" />
							<LinearDoubleKeyFrame Value="200"
												  KeyTime="0:0:10" />
						</DoubleAnimationUsingKeyFrames>
					</Storyboard>
				</VisualState>
			</VisualStateGroup>
		</VisualStateManager.VisualStateGroups>

		<Rectangle Height="100"
				   Width="200"
				   Fill="Red"
				   VerticalAlignment="Center"
				   HorizontalAlignment="Center">
			<Rectangle.RenderTransform>
				<TranslateTransform x:Name="TestTranslateTransform"
									X="-200" />
			</Rectangle.RenderTransform>
		</Rectangle>
	</Grid>

Environment

Affected platform(s):

• [ ] iOS
• [ ] Android
• [X] WebAssembly (ONLY Playground)
• [ ] Windows
• [ ] Build tasks

Anything else we need to know?

Don't forget to add isAnimating="True" for the DataContext with this come sample.

[agneszitte]

Snippet of code in the playground: https://playground.platform.uno/#edfd17fa

[agneszitte]

The previous snippet of code is still not working inside the Playground (even with the latest canary version):

<Grid>
		<VisualStateManager.VisualStateGroups>
			<VisualStateGroup>
				<VisualState>
					<VisualState.StateTriggers>
						<StateTrigger IsActive="True" />
					</VisualState.StateTriggers>
					<Storyboard>
						<!-- TEST ANIMATION TRANSLATE TRANSFORM-->
						<DoubleAnimationUsingKeyFrames  Duration="0:0:10"
														RepeatBehavior="Forever"
Storyboard.TargetName="TestTranslateTransform"
														Storyboard.TargetProperty="X">
							<LinearDoubleKeyFrame Value="-200"
												  KeyTime="0:0:0" />
							<LinearDoubleKeyFrame Value="0"
												  KeyTime="0:0:5" />
							<LinearDoubleKeyFrame Value="200"
												  KeyTime="0:0:10" />
						</DoubleAnimationUsingKeyFrames>
					</Storyboard>
				</VisualState>
			</VisualStateGroup>
		</VisualStateManager.VisualStateGroups>

		<Rectangle Height="100"
				   Width="200"
				   Fill="Red"
				   VerticalAlignment="Center"
				   HorizontalAlignment="Center">
			<Rectangle.RenderTransform>
				<TranslateTransform x:Name="TestTranslateTransform"
									X="-200" />
			</Rectangle.RenderTransform>
		</Rectangle>
	</Grid>

But this modified version using the behaviors:DynamicAnimation.Storyboard is working correctly for the animation:

<Grid>
        <Rectangle Height="100"
                   Width="200"
                   Fill="Red"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center">
            <Rectangle.RenderTransform>
                <TranslateTransform x:Name="TestTranslateTransform"
                                    X="-400">
                    <behaviors:DynamicAnimation.Storyboard>
                        <Storyboard>
                            <!-- TEST ANIMATION TRANSLATE TRANSFORM-->
                            <DoubleAnimationUsingKeyFrames  Duration="0:0:10"
                                                            RepeatBehavior="Forever"
                                                            Storyboard.TargetName="TestTranslateTransform"
                                                            Storyboard.TargetProperty="X">
                                <LinearDoubleKeyFrame Value="-200"
                                                    KeyTime="0:0:0" />
                                <LinearDoubleKeyFrame Value="0"
                                                    KeyTime="0:0:5" />
                                <LinearDoubleKeyFrame Value="200"
                                                    KeyTime="0:0:10" />
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </behaviors:DynamicAnimation.Storyboard>
                </TranslateTransform>
            </Rectangle.RenderTransform>
        </Rectangle>
</Grid>

In my opinion, we should support animation with <StateTrigger IsActive="True" /> in the Playground since it's already working on a WASM head.

[dr1rrb]

The last snippet https://playground.platform.uno/#6277af50 points to the visual state triggers. I'm updating the title.

[dr1rrb]

FYI, for this bug I would suspect a sequencing issue: We are setting the IsActive="True" during the construction while the element still does not have any visual element, so the GoToState does nothing at this point. Then we don't re-evaluate the VisualStateTrigger this when the control gets loaded.

[dr1rrb]

The original code snippet (https://playground.platform.uno/#edfd17fa) is still not working, so I think that the issue is still present unfortunately :(

[agneszitte]

Issue still happening with latest