Silverlight Rotate Transform Example

In this article we will be seeing how to create Silverlight Rotate Transform using Visual studio 2010.

Transform classes in Silverlight are used to rotate, scale, skew and translate objects. In this we will be seeing the Rotate Transform and its properties.

Namespace: System.Windows.Media

Assembly: System.Windows

Rotate Transform:

It is defined by the following properties.

• Angle.
• CenterX.
• CenterY.

Angle is used to rotate the object by a specified angle about the point CenterX and CenterY.

 

In the above example the textblock is rotated by an angle "50" about the point (0, 0).

CenterX=0; CenterY=0; Angle=50;

 

<StackPanel Height="200" Width="200">      

        <TextBlock Text="Rotate Transform" FontFamily="Arial" FontSize="18" FontWeight="Bold" Foreground="Red">

            <TextBlock.RenderTransform>

                <RotateTransform Angle="50" ></RotateTransform>

            </TextBlock.RenderTransform>

        </TextBlock>

</StackPanel>

CenterX property:

 

<StackPanel Height="200" Width="200">      

        <TextBlock Text="Rotate Transform" FontFamily="Arial" FontSize="18" FontWeight="Bold" Foreground="Red">

            <TextBlock.RenderTransform>

                <RotateTransform Angle="50" CenterX="50"></RotateTransform>

            </TextBlock.RenderTransform>

        </TextBlock>

</StackPanel>

CenterY property:

 

<StackPanel Height="200" Width="200">      

        <TextBlock Text="Rotate Transform" FontFamily="Arial" FontSize="18" FontWeight="Bold" Foreground="Red">

            <TextBlock.RenderTransform>

                <RotateTransform Angle="50" CenterY="50"></RotateTransform>

            </TextBlock.RenderTransform>

        </TextBlock>

</StackPanel>

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 below one.

<UserControl x:Class="SilverlightRotateTransform.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">

    <StackPanel Height="200" Width="200"> 

        <TextBlock Text="Rotate Transform" FontFamily="Arial" FontSize="18" FontWeight="Bold" Foreground="Red"></TextBlock>   

        <TextBlock Text="Rotate Transform" FontFamily="Arial" FontSize="18" FontWeight="Bold" Foreground="Red">

            <TextBlock.RenderTransform>

                <RotateTransform Angle="50"></RotateTransform>

            </TextBlock.RenderTransform>

        </TextBlock>

    </StackPanel>

</UserControl>

Testing the solution:

1. Build the solution.
2. Hit ctrl+F5.