How to fix DoubleAnimation for rotation of an image?

Question

I am trying to rotate an image on an EventHandler, for an Event that i created. The Event Handler works perfectly fine. Yet the image does not rotate and I do not know what I am missing.

This UserControl is not displayed like this, but in a Grid of another UserControl.

    <UserControl x:Class="Mabri.Module.P83.View.SchematicSystemView"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:Mabri.Module.P83.View"
         mc:Ignorable="d" 
         d:DesignHeight="450" d:DesignWidth="800">
        <Image x:Name="drehteller" HorizontalAlignment="Center" VerticalAlignment="Center"/>


    </UserControl>

This is the code behind the XAML, at first I tried having this in a separat class, if this is possible it would be even better, but at the moment I am just trying to get this running.

  {

    private System.Windows.Controls.Image drehteller_image;
    private int currentAngle = 0;
    public SchematicSystemView()
    {
      EventAggregator.SubscribeEvent(this);
      InitializeComponent();
      drehteller_image = new System.Windows.Controls.Image()
      {
        Stretch = Stretch.Uniform,
        Source = new BitmapImage(new Uri("pack://application:,,,/Mabri.Module.P83;Component/Images/drehteller_unbestueckt.png")),
        RenderTransform = new RotateTransform()
      };
      drehteller.Source = drehteller_image.Source;

    }

    public void OnEventHandler(DrehtellerMoved e)
    {
      EventAggregator.PublishEvent(new LogInfo
      {
        Title = "Should rotate",
        Summary = "The drehteller should rotate now",
        Detail = "The drehteller should rotate " + currentAngle + " is the current angle",
        LogLevel = LogLevel.Information
      });

      int steps = e.steps;
      double timeforonestep = e.speed / e.steps;
      int angle = steps * 72;
      int angle_to_reach = currentAngle + angle;
      Storyboard storyboard = new Storyboard();
      storyboard.Duration = new Duration(TimeSpan.FromSeconds(timeforonestep * steps));
      DoubleAnimation rotateAnimation = new DoubleAnimation()
      {
        From = currentAngle,
        To = currentAngle + angle,
        Duration = storyboard.Duration
      };
      Storyboard.SetTarget(rotateAnimation, drehteller);
      Storyboard.SetTargetProperty(rotateAnimation, new PropertyPath("(UIElement.RenderTransform).(RotateTransform.Angle)"));
      storyboard.Children.Add(rotateAnimation);
      storyboard.Begin();
      currentAngle = angle_to_reach;
    }
  }

In the testing case e.steps equals 1 and e.speed equals 10.0.

I expected the image to turn for 72 degrees, but for some reasons nothing happens, except for the LogMessage at the beginning of the handler.

Answer 1

First, assign a RotateTransform to the RenderTransform property of the Image. Otherwise it can't be animated.

<Image x:Name="drehteller" HorizontalAlignment="Center" VerticalAlignment="Center"
       RenderTransformOrigin="0.5,0.5">
    <Image.RenderTransform>
        <RotateTransform/>
    </Image.RenderTransform>
</Image>

Then instead of setting From and To just set By . And drop the Storyboard and start the animation directly on the control's RenderTransform

var animation = new DoubleAnimation
{
    By = angle,
    Duration = TimeSpan.FromSeconds(...)
};

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

Finally, do not create the intermediate Image element. That is redundant.

drehteller.Source = new BitmapImage(new Uri("..."));