Silverlight RotateTransform Animation Example

In this article we will be seeing how to create Silverlight RotateTransform Animation using Visual Studio 2010.

In this article we will be applying RotateTransform to an object based on one of the properties of the transform animation. Rotate Transform will be applied to Rectangle object and the Angle property of the rotate transform will be animated. For RotateTransform check http://www.c-sharpcorner.com/UploadFile/anavijai/4476/.

Adding RotateTransform:

<Rectangle x:Name="rectangle" Height="50" Width="50" Canvas.Left="75" Canvas.Top="75" Fill="Blue">
            <Rectangle.RenderTransform>
                <RotateTransform x:Name="rotateTransform"></RotateTransform>
            </Rectangle.RenderTransform>
        </Rectangle>

Adding StoryBoard:

<Storyboard x:Name="storyBoard">
                <DoubleAnimation Storyboard.TargetName="rotateTransform"
                                 Storyboard.TargetProperty="Angle"
                                 From="0"
                                 To="360"                                    
                                 Duration="0:0:3"
                                 RepeatBehavior="Forever"
                                 AutoReverse="False">                   
                </DoubleAnimation>
            </Storyboard>

Begin the Animation:

storyBoard.Begin();

Steps Involved:

Creating a Silverlight Application:

1. Open Visual Studio 2010.
2. Go to File => New => Project.
3. Select Silverlight from the Installed templates and choose the Silverlight Application template.
4. Enter the Name and choose the location.
5. Click OK.
6. In the New Silverlight Application wizard check the "Host the Silverlight Application in a new Web site".
7. Click OK.

Creating the UI:

Open MainPage.xaml file and replace the code with the following.

<UserControl x:Class="SilverlightRotateTransformAnimation.MainPage"
    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"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
<Canvas Height="200" Width="200" Background="White">      
        <Canvas.Resources>
            <Storyboard x:Name="storyBoard">
                <DoubleAnimation Storyboard.TargetName="rotateTransform"
                                 Storyboard.TargetProperty="Angle"
                                 From="0"
                                 To="360"                                     
                                 Duration="0:0:3"
                                 RepeatBehavior="Forever"
                                 AutoReverse="False">                   
                </DoubleAnimation>
            </Storyboard>   
        </Canvas.Resources>
        <Rectangle x:Name="rectangle" Height="50" Width="50" Canvas.Left="75" Canvas.Top="75" Fill="Blue">
            <Rectangle.RenderTransform>
                <RotateTransform x:Name="rotateTransform"></RotateTransform>
            </Rectangle.RenderTransform>
        </Rectangle>
    </Canvas>
</UserControl>

Open MainPage.xaml.cs file and replace the code with the following.

public MainPage()
        {
            InitializeComponent();
            storyBoard.Begin();
        }

Testing the solution:

1. Build the solution.
2. Hit ctrl+F5.
3. The rectangle will be rotating from 0 to 360 degrees.