how to create a storyboard and rotating an image i

Question

I am getting started with WPF (when was used to using winforms).

I am trying to rotate an image and want to use a storyboard as in the next phases i need to add multiple animations running to time.

my code is inside a click event of a button as follows:

//start the animation
            DoubleAnimation animationRotation = new DoubleAnimation();

            animationRotation.From = -17;
            animationRotation.To = 17;
            animationRotation.Duration = new Duration(TimeSpan.FromMilliseconds(NumericDisplay.Milliseconds));
            animationRotation.RepeatBehavior = RepeatBehavior.Forever;
            animationRotation.AccelerationRatio = 0.3;
            animationRotation.DecelerationRatio = 0.3;
            animationRotation.AutoReverse = true;

            Storyboard storyboard = new Storyboard();

            Storyboard.SetTarget(animationRotation, Arm);
            Storyboard.SetTargetProperty(animationRotation,
              new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)")); 

            storyboard.Children.Add(animationRotation);

            // Add the storyboard to the tracking collection.      
            //this.Stostoryboards.Add(bomb, storyboard);

            // Configure and start the storyboard.
            this.BeginStoryboard(storyboard);

the code compiles without warning yet the click event does not start the animation,

EDIT One of the proposed answers asked me to check the XAML included a definition for rotatetransform ... the XAML below is what I am using

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:my="clr-namespace:MetronomeLibrary" xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
mc:Ignorable="d"
x:Class="MetronomeLibrary.MetronomeLarge"
x:Name="UserControl" Height="386" Width="1024" SizeChanged="UserControl_SizeChanged">
<UserControl.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="ResourceDictionary.xaml"/>
        </ResourceDictionary.MergedDictionaries>
        <ImageBrush x:Key="ImageBrush_Decrement" ImageSource="Images/pad-metronome-decrement-button.png" Stretch="Fill"/>
        <ImageBrush x:Key="ImageBrush_Increment" ImageSource="Images/pad-metronome-increment-button.png" Stretch="Fill"/>

    </ResourceDictionary>
</UserControl.Resources>
<UserControl.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">

    </EventTrigger>
</UserControl.Triggers>

<Grid x:Name="LayoutRoot" Height="412">
    <Image x:Name="MetronomeWindowBackground" Height="140" Margin="237,1.5,231,0" Source="Images\pad-metronome-top-under-bg.png" Stretch="Fill" VerticalAlignment="Top"/>
    <Image x:Name="Arm" Margin="506,17,493,0" Source="Images\pad-metronome-arm.png" Stretch="Fill" Height="326" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5">
        <Image.RenderTransform>
            <TransformGroup>
                <RotateTransform/>

            </TransformGroup>
        </Image.RenderTransform>
    </Image>
    <Image x:Name="MetronomeFlash" Height="209" Margin="104,0,96,0" Source="Images\pad-metronome-flash-top-landscape.png" Stretch="Fill" VerticalAlignment="Top" d:IsHidden="True" />
    <Image x:Name="MetronomeBackground" Height="209" Source="Images\pad-metronome-top-bg-landscape.png" Stretch="Fill" VerticalAlignment="Top" Margin="3,0,-3,0"/>
    <Image x:Name="MetronomeStartButton" Margin="379.5,100.5,373.5,0" Source="Images\pad-metronome-start-button-base.png" Stretch="Fill" Height="110" VerticalAlignment="Top"/>
    <Image x:Name="MetronomeTapPadLeft" HorizontalAlignment="Left" Height="209" Margin="5,1.5,0,0" Source="Images\pad-metronome-tap-pad-left.png" Stretch="Fill" VerticalAlignment="Top" Width="136"/>
    <Image x:Name="MetronomeTapPadRight" HorizontalAlignment="Right" Source="Images\pad-metronome-tap-pad-right.png" Stretch="Fill" Width="136" Height="209" VerticalAlignment="Top"/>
    <Image x:Name="MetronomeWindowHighlight" Height="105" Margin="238.5,18,231.5,0" Source="Images\pad-metronome-window-overlay.png" Stretch="Fill" VerticalAlignment="Top"/>
    <Image x:Name="MetronomeBottomBackground" Margin="3,208,-3,362" Source="Images\pad-metronome-section-bottom-bg.png" Stretch="Fill"/>
    <my:MetronomeLargeNumericDisplay HorizontalAlignment="Left" Margin="459,120,0,0" x:Name="NumericDisplay" VerticalAlignment="Top" Value="999" Width="122.25" />
    <Image Height="78" Margin="448,110.5,436,0" Source="Images\pad-metronome-start-button-overlay.png" Stretch="Fill" VerticalAlignment="Top"
           x:Name="DisplayOverlay" MouseDown="DisplayOverlay_MouseDown" />
    <RepeatButton x:Name="ButtonDecrement" Content="" BorderThickness="7" HorizontalAlignment="Left" Margin="252,110.5,0,0" VerticalAlignment="Top" Width="149" Height="100" Background="{DynamicResource ImageBrush_Decrement}" Style="{DynamicResource RepeatButtonStyle_noflash}" BorderBrush="{DynamicResource ImageBrush_Decrement}" d:LayoutOverrides="HorizontalAlignment" Click="ButtonDecrement_Click"></RepeatButton>
    <RepeatButton Content="" BorderThickness="7" HorizontalAlignment="Left" Margin="631,110.5,0,0" VerticalAlignment="Top" Width="149" Height="100" Background="{DynamicResource ImageBrush_Increment}" Style="{DynamicResource RepeatButtonStyle_noflash}" BorderBrush="{DynamicResource ImageBrush_Decrement}" Name="ButtonIncrement" Click="ButtonIncrement_Click" />
</Grid>

what am I doing wrong?

Answer 1

The code you've posted seems to be ok, however, the path refers to an existing element, so make sure you've included appropriate nodes in xaml, where Arm control is defined.

Let's say Arm is a Rectangle control. Your xaml should then look more or less like this:

...
<Rectangle x:Name="Arm" Fill="Aqua" Width="100" Height="100" Canvas.Left="100" Canvas.Top="100">
    <Rectangle.RenderTransform>
        <TransformGroup>
            <RotateTransform />
        </TransformGroup>
    </Rectangle.RenderTransform>
</Rectangle>
...

Arm can be another type of control, but the important thing is that RenderTransform, TransformGroup and RotateTransform nodes are defined, so animation has some existing elements to change as specified in the PropertyPath in your code.

Answer 2

after much messing around with new projects and much simplified code I asked the question slightly differently in another thread and someone posted working code.

on investigation that reason my animation was not working was that I had provided a duration to the animation but not the storyboard itself !! doh.

full answer here (which is one of the fullest answers I have received on this topic)

How do I create a rotate animation on an image object using c# code only (inside a WPF window)

Lucas, thanks to you for your patience and assistance on this question.

Dan