Convert XAML Storyboard to C#?

Question

I was wondering after some Googling if there is a tool roaming around to maybe convert Storyboard XAML code to C#, or if there is another way to reach my goal:

I need the code behind, because I need to have control over which value the "Wheel Of Fortune" will land on, but creating an animation with a timer and a spin event is too jittery and jerky.

Any advice on how to get the buttery smooth animation from XAML Blend Storyboards, but control of C# in one for this type of thing?

<Storyboard x:Key="OnMouseLeftButtonDown1">
        <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)" Storyboard.TargetName="DailySpinColoursText_png">
            <EasingPointKeyFrame KeyTime="0" Value="0.5,0.5"/>
            <EasingPointKeyFrame KeyTime="0:0:0.3" Value="0.5,0.5"/>
            <EasingPointKeyFrame KeyTime="0:0:0.6" Value="0.5,0.5"/>
            <EasingPointKeyFrame KeyTime="0:0:1" Value="0.5,0.5"/>
            <EasingPointKeyFrame KeyTime="0:0:1.4" Value="0.5,0.5"/>
            <EasingPointKeyFrame KeyTime="0:0:1.8" Value="0.5,0.5"/>
            <EasingPointKeyFrame KeyTime="0:0:2.2" Value="0.5,0.5"/>
            <EasingPointKeyFrame KeyTime="0:0:2.6" Value="0.5,0.5"/>
            <EasingPointKeyFrame KeyTime="0:0:3" Value="0.5,0.5"/>
            <EasingPointKeyFrame KeyTime="0:0:3.4" Value="0.5,0.5"/>
            <EasingPointKeyFrame KeyTime="0:0:3.8" Value="0.5,0.5"/>
            <EasingPointKeyFrame KeyTime="0:0:4.2" Value="0.5,0.5"/>
            <EasingPointKeyFrame KeyTime="0:0:4.6" Value="0.5,0.5"/>
            <EasingPointKeyFrame KeyTime="0:0:5" Value="0.5,0.5"/>
        </PointAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="DailySpinColoursText_png">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="100"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="400"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1100"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1.4" Value="2600"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1.8" Value="4600"/>
            <EasingDoubleKeyFrame KeyTime="0:0:2.2" Value="6100"/>
            <EasingDoubleKeyFrame KeyTime="0:0:2.6" Value="7300"/>
            <EasingDoubleKeyFrame KeyTime="0:0:3" Value="8300"/>
            <EasingDoubleKeyFrame KeyTime="0:0:3.4" Value="8800"/>
            <EasingDoubleKeyFrame KeyTime="0:0:3.8" Value="9000"/>
            <EasingDoubleKeyFrame KeyTime="0:0:4.2" Value="9100"/>
            <EasingDoubleKeyFrame KeyTime="0:0:4.6" Value="9150"/>
            <EasingDoubleKeyFrame KeyTime="0:0:5" Value="9200"/>
            <EasingDoubleKeyFrame KeyTime="0:0:5.4" Value="9220"/>
            <EasingDoubleKeyFrame KeyTime="0:0:5.8" Value="9225"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>

Thank you in advance!

PS. I found a few examples online of rotation animation in C#, but I need it to spin up slowly, then in the middle of the animation start spinning really fast and then at the end come down to a slow and suspenseful end. With the things I have seen on the internet I would have no clue on how to do that.

Answer 1

You could animate the RotateTransform's Angle property in code behind like shown below. Instead of having a lot of EasingDoubleKeyFrames, you may probably also use a single EasingFunction:

element.RenderTransformOrigin = new Point(0.5, 0.5);
element.RenderTransform = new RotateTransform();

var animation = new DoubleAnimation
{
    To = 9225,
    Duration = TimeSpan.FromSeconds(5.8),
    EasingFunction = new CubicEase { EasingMode = EasingMode.EaseInOut }
};

element.RenderTransform.BeginAnimation(RotateTransform.AngleProperty, animation);