[BUG] Transform doesn't work after animation

[limeniye]

Preview repository

After animation my render transform doesn't work.

    public static class TestFrameworkElementExstansions
    {
        public static TranslateTransform GetTransformInitialize(this FrameworkElement element)
        {
            if (element is null)
                return null;

            var renderTransform = element.RenderTransform as TranslateTransform;

            if (renderTransform is null)
            {
                renderTransform = new TranslateTransform();
                element.RenderTransform = renderTransform;
            }
            return renderTransform;
        }
    }
    public sealed partial class MainPage : Page
    {
        private Storyboard stroyboard = new Storyboard();

        public MainPage() => this.InitializeComponent();

        private void OnClicked(object sender, RoutedEventArgs e)
        {
            stroyboard?.Pause();
            stroyboard = new Storyboard();

            var renderTransform = blue.GetTransformInitialize();

            ((TranslateTransform)blue.RenderTransform).X = 400;

            #region xAnimation
            DoubleAnimationUsingKeyFrames xAnimationSecondElement = new DoubleAnimationUsingKeyFrames() { EnableDependentAnimation = true };
            xAnimationSecondElement.KeyFrames.Add(new LinearDoubleKeyFrame() { Value = 0, KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(2_000)) });
            Storyboard.SetTarget(xAnimationSecondElement, renderTransform);
            Storyboard.SetTargetProperty(xAnimationSecondElement, "X");
            #endregion

            stroyboard.Children.Add(xAnimationSecondElement);

            stroyboard.Begin();
        }
    }

<Page x:Class="PosistionWithAnimationDemonstrate.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Grid>
        <Border x:Name="red" Background="Red" HorizontalAlignment="Left" Width="300">
            <Border.RenderTransform>
                <TranslateTransform X="0"/>
            </Border.RenderTransform>
        </Border>

        <Border x:Name="blue" Background="Blue" HorizontalAlignment="Left" Width="300">
            <Border.RenderTransform>
                <TranslateTransform X="0"/>
            </Border.RenderTransform>
        </Border>

        <Button Click="OnClicked" Height="30" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Background="Pink"/>
    </Grid>
    
</Page>

And now I want to show how its should be work:

UWP.mp4

But it works only in the UWP platform. In another platforms i have next result:

WPF.mp4

• UWP
• WPF
• Mobile
• WASM

[dr1rrb]

I would assume it's somehow linked to #631 ... the final value set by the animation has a greater precedence so when you try to reset the X on the transform in ((TranslateTransform)blue.RenderTransform).X = 400; it has no effect :(

A possible workaround is to let the animation set the initial value, either by using a plain DoubleAnimation instead of a key framed animation and making sure to set the From property, either by adding a frame at KeyTime=0:0:0 which sets the value to 400.

[limeniye]

@dr1rrb thank you for your answer.
Yes, you're right. I forgot about this type.
I didn't test it but I'm assure that its will work well.