Silverlight TransformGroup Example

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

 

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

 

Namespace: System.Windows.Media

 

Assembly: System.Windows

 

TransformGroup:

 

It is used when you want to apply multiple Transforms to a single object. The order of individual transformations is important, it may lead to a different result.

 

Rotate Transform:

 

 

<TransformGroup>

      <RotateTransform x:Name="rotateTransform" Angle="90"></RotateTransform>

</TransformGroup>

 

Scale Transform:

                            

 

<TransformGroup> 

   <RotateTransform x:Name="rotateTransform" Angle="90"></RotateTransform>

    <ScaleTransform x:Name="scaleTransform" ScaleX="2" ></ScaleTransform>

</TransformGroup>

 

Translate Transform:

 

<TransformGroup>

    <RotateTransform x:Name="rotateTransform" Angle="90"></RotateTransform>

    <ScaleTransform x:Name="scaleTransform" ScaleX="2" ></ScaleTransform>

    <TranslateTransform x:Name="translateTransform" X="-15"></TranslateTransform>

</TransformGroup>

 

Skew Transform:

 

 

<TransformGroup>

       <RotateTransform x:Name="rotateTransform" Angle="90"></RotateTransform> 

       <ScaleTransform x:Name="scaleTransform" ScaleX="2" ></ScaleTransform>

       <TranslateTransform x:Name="translateTransform" X="-15"></TranslateTransform>

       <SkewTransform x:Name="skewTransform" AngleX="30"></SkewTransform>

</TransformGroup>

 

Changing the order of individual Transform:

 

 

<TransformGroup>

       <ScaleTransform x:Name="scaleTransform" ScaleX="2" ></ScaleTransform>

       <RotateTransform x:Name="rotateTransform" Angle="90"></RotateTransform> 

       <SkewTransform x:Name="skewTransform" AngleX="30"></SkewTransform>

       <TranslateTransform x:Name="translateTransform" X="-15"></TranslateTransform>

</TransformGroup>

 

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="SilverlightTransformGroup.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">        <TextBlock Canvas.Left="75" Canvas.Top="75" Text="Transforms" FontFamily="Arial" FontSize="18" FontWeight="Bold"
Foreground="Black" Opacity="0.3"></TextBlock>

        <TextBlock Canvas.Left="75" Canvas.Top="75" Text="Transforms" FontFamily="Arial" FontSize="18" FontWeight="Bold"
Foreground="Black">

                <TextBlock.RenderTransform>

                <TransformGroup>

                <RotateTransform x:Name="rotateTransform" Angle="90"></RotateTransform> 

                 <ScaleTransform x:Name="scaleTransform" ScaleX="2" ></ScaleTransform>

                 <TranslateTransform x:Name="translateTransform" X="-15"></TranslateTransform>

                    <SkewTransform x:Name="skewTransform" AngleX="30"></SkewTransform>

                </TransformGroup>

            </TextBlock.RenderTransform>

        </TextBlock>

    </Canvas>

</UserControl>

 

Testing the solution:

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