How do I rotate an image and resize it at the same time

Question

I am developing a Windows Phone 8 game application and I want to rotate the image and at the same time I want to re-size the image from 100 to 0 then again from 0 to 100. Till now what I have done is

<Storyboard x:Name="Rotatetransition" >
        <DoubleAnimation Storyboard.TargetName="TransRotate" 
                     Storyboard.TargetProperty="ScaleX"
                     From="1" To="0"
                     BeginTime="0:0:0"
                     Duration="0:0:0.5"  
                     AutoReverse="True"/>
        <DoubleAnimation Storyboard.TargetName="TransRotate" 
                     Storyboard.TargetProperty="ScaleY"
                     From="1" To="0"                                                           
                     BeginTime="0:0:0"
                     Duration="0:0:0.5"
                     AutoReverse="True"/>
    </Storyboard>

So this animation is resizing my image to 0 from 100. Now the same image I want to rotate so that it will look good and I can load new image for a new game.

For rotaing the image I have code

<Storyboard x:Name="Rotatetransition2" >
        <DoubleAnimation Storyboard.TargetName="AnimatedRotateTransform" 
                                             Storyboard.TargetProperty="Angle" 
                                             By="10"        
                                             To="720" 
                                             Duration="0:0:0.2" 
                                             FillBehavior="Stop" />

    </Storyboard>

But the problem is in the Image control I can use only one child <Image.RenderTransform>

<Image x:Name="PreviewImage" Height="480" Width="480" Opacity="1" RenderTransformOrigin="0.5,0.5"   >
                <Image.RenderTransform>
                    <ScaleTransform x:Name="TransRotate" />
                </Image.RenderTransform>
                <!--<Image.RenderTransform>
                    <RotateTransform x:Name="AnimatedRotateTransform" Angle="0" />
                </Image.RenderTransform>-->
            </Image>

In the code behind when the game completes I will call

 Rotatetransition.Begin();
 Circletransition.Begin();
 RotatetransitionRev.Begin(); // Again resize the new Loaded image from 0 to 100
 Circletransitionrev.Begin(); // Roate the image again from 0 to 720
 StartThegame();

Can anyone suggest how do I achieve this?

and the new game will start.

Answer 1

Try using a TransformGroup:

<Image.RenderTransform>
    <TransformGroup>
        <ScaleTransform />
        <RotateTransform />
    </TransformGroup>
</Image.RenderTransform>