title: How To Rotate an Image using a StoryBoard
body: <p>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.</p>
  <p>my code is inside a click event of a button as follows:</p>
  <pre><code>//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(&quot;(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)&quot;)); 
  
              storyboard.Children.Add(animationRotation);
  
              // Add the storyboard to the tracking collection.      
              //this.Stostoryboards.Add(bomb, storyboard);
              
              // Configure and start the storyboard.
              this.BeginStoryboard(storyboard);
  </code></pre>
  <p>the code compiles without warning yet the click event does not start the animation,</p>
  <p><strong>EDIT</strong>
  One of the proposed answers asked me to check the XAML included a definition for rotatetransform ... the XAML below is what I am using</p>
  <pre><code>&lt;UserControl.Resources&gt;
      &lt;ResourceDictionary&gt;
          &lt;ResourceDictionary.MergedDictionaries&gt;
              &lt;ResourceDictionary Source=&quot;ResourceDictionary.xaml&quot;/&gt;
          &lt;/ResourceDictionary.MergedDictionaries&gt;
          &lt;ImageBrush x:Key=&quot;ImageBrush_Decrement&quot; ImageSource=&quot;Images/pad-metronome-decrement-button.png&quot; Stretch=&quot;Fill&quot;/&gt;
          &lt;ImageBrush x:Key=&quot;ImageBrush_Increment&quot; ImageSource=&quot;Images/pad-metronome-increment-button.png&quot; Stretch=&quot;Fill&quot;/&gt;
          
      &lt;/ResourceDictionary&gt;
  &lt;/UserControl.Resources&gt;
  &lt;UserControl.Triggers&gt;
      &lt;EventTrigger RoutedEvent=&quot;FrameworkElement.Loaded&quot;&gt;
          
      &lt;/EventTrigger&gt;
  &lt;/UserControl.Triggers&gt;
  
  &lt;Grid x:Name=&quot;LayoutRoot&quot; Height=&quot;412&quot;&gt;
      &lt;Image x:Name=&quot;MetronomeWindowBackground&quot; Height=&quot;140&quot; Margin=&quot;237,1.5,231,0&quot; Source=&quot;Images\pad-metronome-top-under-bg.png&quot; Stretch=&quot;Fill&quot; VerticalAlignment=&quot;Top&quot;/&gt;
      &lt;Image x:Name=&quot;Arm&quot; Margin=&quot;506,17,493,0&quot; Source=&quot;Images\pad-metronome-arm.png&quot; Stretch=&quot;Fill&quot; Height=&quot;326&quot; VerticalAlignment=&quot;Top&quot; RenderTransformOrigin=&quot;0.5,0.5&quot;&gt;
          &lt;Image.RenderTransform&gt;
              &lt;TransformGroup&gt;
                  &lt;RotateTransform/&gt;
                  
              &lt;/TransformGroup&gt;
          &lt;/Image.RenderTransform&gt;
      &lt;/Image&gt;
      &lt;Image x:Name=&quot;MetronomeFlash&quot; Height=&quot;209&quot; Margin=&quot;104,0,96,0&quot; Source=&quot;Images\pad-metronome-flash-top-landscape.png&quot; Stretch=&quot;Fill&quot; VerticalAlignment=&quot;Top&quot; d:IsHidden=&quot;True&quot; /&gt;
      &lt;Image x:Name=&quot;MetronomeBackground&quot; Height=&quot;209&quot; Source=&quot;Images\pad-metronome-top-bg-landscape.png&quot; Stretch=&quot;Fill&quot; VerticalAlignment=&quot;Top&quot; Margin=&quot;3,0,-3,0&quot;/&gt;
      &lt;Image x:Name=&quot;MetronomeStartButton&quot; Margin=&quot;379.5,100.5,373.5,0&quot; Source=&quot;Images\pad-metronome-start-button-base.png&quot; Stretch=&quot;Fill&quot; Height=&quot;110&quot; VerticalAlignment=&quot;Top&quot;/&gt;
      &lt;Image x:Name=&quot;MetronomeTapPadLeft&quot; HorizontalAlignment=&quot;Left&quot; Height=&quot;209&quot; Margin=&quot;5,1.5,0,0&quot; Source=&quot;Images\pad-metronome-tap-pad-left.png&quot; Stretch=&quot;Fill&quot; VerticalAlignment=&quot;Top&quot; Width=&quot;136&quot;/&gt;
      &lt;Image x:Name=&quot;MetronomeTapPadRight&quot; HorizontalAlignment=&quot;Right&quot; Source=&quot;Images\pad-metronome-tap-pad-right.png&quot; Stretch=&quot;Fill&quot; Width=&quot;136&quot; Height=&quot;209&quot; VerticalAlignment=&quot;Top&quot;/&gt;
      &lt;Image x:Name=&quot;MetronomeWindowHighlight&quot; Height=&quot;105&quot; Margin=&quot;238.5,18,231.5,0&quot; Source=&quot;Images\pad-metronome-window-overlay.png&quot; Stretch=&quot;Fill&quot; VerticalAlignment=&quot;Top&quot;/&gt;
      &lt;Image x:Name=&quot;MetronomeBottomBackground&quot; Margin=&quot;3,208,-3,362&quot; Source=&quot;Images\pad-metronome-section-bottom-bg.png&quot; Stretch=&quot;Fill&quot;/&gt;
      &lt;my:MetronomeLargeNumericDisplay HorizontalAlignment=&quot;Left&quot; Margin=&quot;459,120,0,0&quot; x:Name=&quot;NumericDisplay&quot; VerticalAlignment=&quot;Top&quot; Value=&quot;999&quot; Width=&quot;122.25&quot; /&gt;
      &lt;Image Height=&quot;78&quot; Margin=&quot;448,110.5,436,0&quot; Source=&quot;Images\pad-metronome-start-button-overlay.png&quot; Stretch=&quot;Fill&quot; VerticalAlignment=&quot;Top&quot;
             x:Name=&quot;DisplayOverlay&quot; MouseDown=&quot;DisplayOverlay_MouseDown&quot; /&gt;
      &lt;RepeatButton x:Name=&quot;ButtonDecrement&quot; Content=&quot;&quot; BorderThickness=&quot;7&quot; HorizontalAlignment=&quot;Left&quot; Margin=&quot;252,110.5,0,0&quot; VerticalAlignment=&quot;Top&quot; Width=&quot;149&quot; Height=&quot;100&quot; Background=&quot;{DynamicResource ImageBrush_Decrement}&quot; Style=&quot;{DynamicResource RepeatButtonStyle_noflash}&quot; BorderBrush=&quot;{DynamicResource ImageBrush_Decrement}&quot; d:LayoutOverrides=&quot;HorizontalAlignment&quot; Click=&quot;ButtonDecrement_Click&quot;&gt;&lt;/RepeatButton&gt;
      &lt;RepeatButton Content=&quot;&quot; BorderThickness=&quot;7&quot; HorizontalAlignment=&quot;Left&quot; Margin=&quot;631,110.5,0,0&quot; VerticalAlignment=&quot;Top&quot; Width=&quot;149&quot; Height=&quot;100&quot; Background=&quot;{DynamicResource ImageBrush_Increment}&quot; Style=&quot;{DynamicResource RepeatButtonStyle_noflash}&quot; BorderBrush=&quot;{DynamicResource ImageBrush_Decrement}&quot; Name=&quot;ButtonIncrement&quot; Click=&quot;ButtonIncrement_Click&quot; /&gt;
  &lt;/Grid&gt;
  </code></pre>
  <p>what am I doing wrong?</p>