running multiple xaml animations on an image

Question

I'm trying to animate an <img/> by throwing 3 animations at it at the same time: Opacity, Rotate and Scale. First I got it to FadeIn just like I wanted. Then I managed to make it rotate too. But when I got into Scaling it that's when everything started to get messed up. It's no throwing any exceptions, and it's kind of "working".... but no. Now it does the fadeIn, but it doesn't do the rotation at all. The scaling is doing "something", but definetely not what it was supposed to. It's doing a super slow scaling when, or at least that's what a thought, 0:0:0:5 isn't precisely much time...

So summarizing, it's not throwing any exceptions, it does animate opacity, it doesnt animate rotation, and animates scaling in a wrong way.

I'm pretty new to xaml/wpf, and after hours seeing examples and threads i Realize i'm stuck. I'm missing something, but can't figure it out. Thanks in advance.

<Window x:Class="TestWPF.MainWindow"
        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:local="clr-namespace:TestWPF"
        mc:Ignorable="d"
        Title="TBNews" Height="400" Width="400" Background="{x:Null}" WindowStartupLocation="CenterScreen" WindowStyle="None" AllowsTransparency="True" Topmost="True">

    <Canvas>
        <Image Source="logo_planeta.png" Height="400" Width="400" MaxHeight="400" MaxWidth="400" Name="planeta_img" RenderTransformOrigin="0.5, 0.5">
            <Image.RenderTransform>
                <TransformGroup>
                    <RotateTransform CenterX="0.5" CenterY="0.5" />
                    <ScaleTransform x:Name="ImageScale" ScaleX="1" ScaleY="1" />
                </TransformGroup>                
            </Image.RenderTransform>
            <Image.Triggers>
                <EventTrigger RoutedEvent="Image.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetName="planeta_img"
                                Storyboard.TargetProperty="Opacity"
                                From="0.0" To="1.0" Duration="0:0:3" />
                            <DoubleAnimation
                                Storyboard.TargetName="planeta_img"
                                Storyboard.TargetProperty="(Image.RenderTransform).(RotateTransform.Angle)"
                                To="-360" Duration="0:0:3" RepeatBehavior="Forever" />
                            <DoubleAnimation
                                Storyboard.TargetName="ImageScale"
                                Storyboard.TargetProperty="(ScaleTransform.ScaleX)"
                                To="1.5" Duration="0:0:0:5" AutoReverse="True" RepeatBehavior="Forever" />
                            <DoubleAnimation
                                Storyboard.TargetName="ImageScale"
                                Storyboard.TargetProperty="(ScaleTransform.ScaleY)"
                                To="1.5" Duration="0:0:1:0" AutoReverse="True" RepeatBehavior="Forever" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Image.Triggers>
        </Image>
        <Image Source="logo_letras.png" MaxHeight="400" MaxWidth="400" Name="tbnews_img">
            <Image.Triggers>
                <EventTrigger RoutedEvent="Image.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Image.Triggers>
        </Image>        
    </Canvas>
</Window>

Answer 1

There are multiple things wrong.

• CenterX and CenterY are in absolute units, not relative like RenderTransformOrigin. You don't need to set them at all

• A Duration of 0:0:0:5 is not 0.5 seconds, but 5.

• (Image.RenderTransform).(RotateTransform.Angle) is an invalid target property path when there is no RotateTransform (but a TransformGroup) in the RenderTransform property.

• For a repeated rotation better set By instead of To.

Without all the AutoReverse and RepeatBehavior stuff, and all Durations set equally to 1.5 seconds, this should give you a starting point:

<Image ... RenderTransformOrigin="0.5,0.5">
   <Image.RenderTransform>
      <TransformGroup>
         <RotateTransform/>
         <ScaleTransform/>
      </TransformGroup>
   </Image.RenderTransform>
   <Image.Style>
      <Style TargetType="Image">
         <Style.Triggers>
            <EventTrigger RoutedEvent="Loaded">
               <BeginStoryboard>
                  <Storyboard>
                     <DoubleAnimation
                         Storyboard.TargetProperty="Opacity"
                         From="0" To="1" Duration="0:0:1.5"/>
                      <DoubleAnimation
                         Storyboard.TargetProperty="RenderTransform.Children[0].Angle"
                         By="360" Duration="0:0:1.5"/>
                      <DoubleAnimation
                         Storyboard.TargetProperty="RenderTransform.Children[1].ScaleX"
                         To="1.5" Duration="0:0:1.5"/>
                      <DoubleAnimation
                         Storyboard.TargetProperty="RenderTransform.Children[1].ScaleY"
                         To="1.5" Duration="0:0:1.5"/>
                  </Storyboard>
               </BeginStoryboard>
            </EventTrigger>
         </Style.Triggers>
      </Style>
   </Image.Style>
</Image>