Recently I started exploring Silverlight and it has some cool features that i would like to share. In this article i will demonstrate how to specify transformations in Silverlight with TranslateTransform, ScaleTransform, RotateTransform, SkewTransform and MatrixTransform.

1. TranslateTransform: Moves an object by a specified X and Y positions where X represents horizontal position and Y represents vertical position. Here is a sample that will render Ellipse and TextBlock using TranslateTransform.

   <Canvas xmlns="http://schemas.microsoft.com/client/2007"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
               <Ellipse Width="200" Height="200"
                 Canvas.Left="100" Canvas.Top="10"
                 Fill="Silver" Stroke="Black" 
                 StrokeThickness="4">
               </Ellipse>
               <Ellipse Width="200" Height="200"
                Canvas.Left="100" Canvas.Top="10"
                Fill="Beige" Stroke="Black"
                StrokeThickness="4">
                   <Ellipse.RenderTransform>
                       <TranslateTransform X="50" Y="50" />
                   </Ellipse.RenderTransform>
               </Ellipse>    
               <TextBlock 
                 Text="This is Translate text"
                 FontSize="26" Foreground="Black">
        <TextBlock.RenderTransform>
            <TranslateTransform X="200"  Y="170"></TranslateTransform>
        </TextBlock.RenderTransform>
               </TextBlock>
           </Canvas>

   The above code will render the following output.

   

2. ScaleTransform: Scales (stretch or shrink) an object by a given X and Y positions.

   <Canvas xmlns="http://schemas.microsoft.com/client/2007"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Ellipse Width="100" Height="100"
                 Canvas.Left="150" Canvas.Top="25"
                 Fill="Silver" Stroke="Black" 
                 StrokeThickness="4">
               <Ellipse.RenderTransform>
                   <ScaleTransform ScaleX="2.5" ScaleY="2.5"/>
               </Ellipse.RenderTransform>
           </Ellipse>
               
               <TextBlock
     Canvas.Top="40"
     FontFamily="Verdana"
     FontSize="32"
     FontWeight="Bold" 
     Foreground="SteelBlue"
     Text="Scaled Text">
     <TextBlock.RenderTransform>
       <ScaleTransform ScaleX="1.5" ScaleY="1.0" />
     </TextBlock.RenderTransform>
           </TextBlock>
      </Canvas>

   The above code will render the following output.
   
   
   
3. RotateTransform: Rotates (Clockwise) an object by a given angle.

   <Canvas xmlns="http://schemas.microsoft.com/client/2007"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
      <TextBlock Text="Rotated Text" FontSize="32" Foreground="Teal">
     <TextBlock.RenderTransform>
       <RotateTransform Angle="120" CenterX="100" CenterY="100" />
     </TextBlock.RenderTransform>
           </TextBlock>
           <TextBlock Text="Rotated Text" FontSize="32" Foreground="Teal">
     <TextBlock.RenderTransform>
       <RotateTransform Angle="335" CenterX="250" CenterY="50" />
     </TextBlock.RenderTransform>
           </TextBlock>
       </Canvas>

   The above code will render the following output.  
   
   
4. SkewTransform:  Skews an object by a given X and Y angle.

   <Canvas xmlns="http://schemas.microsoft.com/client/2007"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
           <TextBlock Canvas.Left="100" 
     FontSize="32"
     FontWeight="Bold" 
     Foreground="Maroon"
     Text="Skewed Text">
     <TextBlock.RenderTransform>
       <SkewTransform AngleX="-45" AngleY="0" />
     </TextBlock.RenderTransform>
           </TextBlock>
           <TextBlock
     Canvas.Top="100"
     FontSize="32"
     FontWeight="Bold" 
     Foreground="Maroon"
     Text="Skewed Text">
     <TextBlock.RenderTransform>
       <SkewTransform AngleX="45" AngleY="0" />
     </TextBlock.RenderTransform>
           </TextBlock></Canvas>

   The above code will render the following output.

    

5. MatrixTransform: Creates custom transformations that are not provided by the other Transform classes.

<Rectangle Width="100" Height="100" Fill="Brown">
        <Rectangle.RenderTransform>
            <MatrixTransform>
                <MatrixTransform.Matrix >
                    <!-- This matrix transforms the x,y position of
             the rectangle and skews it. -->
                    <Matrix OffsetX="30" OffsetY="50" M12="0.5" />
                </MatrixTransform.Matrix>
            </MatrixTransform>
        </Rectangle.RenderTransform>
    </Rectangle>

The above code will render the following output.

Groups multiple TransformGroup objects into a single Transform that you can then apply to transform properties. The following example shows the markup for using a TransformGroup.

<Grid x:Name="LayoutRoot" ShowGridLines="True">     
        <Image Source="Beach.jpg"
       Height="265" Width="397"
       RenderTransformOrigin="0.66,0.66"
       Opacity="0.45"
       Margin="0,70,-20,30">
            <Image.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleY="-0.7"/>
                    <SkewTransform AngleX="45" AngleY="-10"/>
                </TransformGroup>
            </Image.RenderTransform>
        </Image>
        <Image Source="Beach.jpg"
       Height="265" Width="397"
       VerticalAlignment="Top"
       Margin="100,55,240,0"
       RenderTransformOrigin="0.72,0.2" >
            <Image.RenderTransform>
                <TransformGroup>
                    <SkewTransform AngleX="5" AngleY="-10"/>
                </TransformGroup>
            </Image.RenderTransform>
        </Image>
</Grid>

The above code will render the following output.

Summary

In this article, we examined how to use Silverlight Transformations.