search

unoplatform / Uno.Playground

Source code for the Uno Gallery apps and Uno Playground (made in Wasm)
https://playground.platform.uno/
Other
214 stars 34 forks source link

VisualStateTrigger are not working properly in the Playground #100

Open agneszitte opened 4 years ago

agneszitte commented 4 years ago

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):

Anything else we need to know?

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

agneszitte commented 4 years ago

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

agneszitte commented 3 years ago

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 commented 3 years ago

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

dr1rrb commented 3 years ago

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 commented 1 year ago

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

agneszitte commented 1 year ago

Issue still happening with latest