Understanding Tranformation(LayoutTransform and RenderTranformation)

Transformation helps us to map points of a particular shape or element from one coordinate space to another coordinate space. There can be many cases where we want to incorporate some animations in the WPF application. These animations can be incorporated with the help of transformations.

A transformation can be used on an element to

• Rotate it
• Scale it
• Skew it
• Translate it

And to achieve all these functionalities WPF class system provided the following classes –

• RotateTransform – Rotates an element
• ScaleTransform – Scales an element
• SkewTransform – SkewTranform
• TranslateTransform – Move an element
• TransformGroup – Can Contain multiple tranforms

As we can see from the above figure that all the transforms inherit from the Transform Class of WPF system. I will discuss all these transforms individually in the next article. But in this article I want to discuss the LayoutTransform and RenderTransform Classes of the WPF.

Both the LayoutTransform and RenderTransform are of type Transform.All the different type of transforms which we have discussed earlier can be applied to both of these transforms

• LayoutTransform

  –This is the transform in which, one of the transforms can be assigned to the LayoutTransform property of an element. As seen in the below code snippet , I have applied the RotateTransform to a TextBlock.

      <TextBlock Text="Vikram" Width="100" Background="LightGray">
              <TextBlock.LayoutTransform>
                  <RotateTransform Angle="20"></RotateTransform>
              </TextBlock.LayoutTransform>
     </TextBlock>
  

  LayoutTransform is applied before the layout process is done on a control. You must be wondering what does it mean that it is applied before the layout process. I would like demonstrate this with an example.

  As we can see from the code snippet provided below. I have taken three textblocks and applied Layout transform to the middle one.

           <StackPanel>
              <TextBlock Width="100" Background="Red"></TextBlock>
              <TextBlock Width="100" Background="Gray" Text="LayoutTransform">
                  <TextBlock.LayoutTransform>
                      <RotateTransform Angle="20"></RotateTransform>
                  </TextBlock.LayoutTransform>
              </TextBlock>
              <TextBlock Width="100" Background="Blue"></TextBlock>
           </StackPanel>
  

  The UI output of the above code snippet is as shown below.

  As we can see from the above figure, after applying the layout transform the third element has also moved from its position. This happens because the second element gets its desired size property in the Arrange() method itself, which makes the third element to move from its position.

  This can be expensive process to alter the desired size of the element before every layout, when we have complex UI. Therefore it is not at all advised to used layout transform instead we can use render transform which I will discuss now.

• RenderTransform –

  Render transform is applied after  the layout process is done and before rendering the control to the UI.  It means that, while calculating the desired size of the control the layout process doesn’t take the rendering transform’s inputs in consideration.Please have a look at the code snippet for the render transform below

          <StackPanel>
              <TextBlock Width="200" Background="Red"></TextBlock>
              <TextBlock Width="200" Background="Gray" Text="RenderTransform">
                  <TextBlock.RenderTransform>
                      <RotateTransform Angle="20"></RotateTransform>
                  </TextBlock.RenderTransform>
              </TextBlock>
              <TextBlock Width="200" Background="Blue"></TextBlock>
            </StackPanel>
  

  And the output of the above code is shown in the below figure.

  As we can see from the above figure that only the rendering of the second element has changed, all other elements are unaffected by the change due to the reason which I have discussed above.

  Whenever we are planning to change transform at the run time at an extensive rate, it is always advisable to use the RenderTransform and not the LayoutTransform.

Origin of Render Transform 

As the render transform occurs after the layout process, that is why it needs origin for the element to take place. It happens with the help of the RenderTransformOrigin property whose default property is (0,0) and it is relative to the size of the element as shown in the figure below

As seen from the above figure if I want to rotate my element with relative to its centre I have to assign the values 0.5,0.5 to its render transform origin property.

<TextBlock Width="200" Background="Gray" Text="LayoutTransform" RenderTransformOrigin=".5,.5">
                <TextBlock.RenderTransform>
                    <RotateTransform Angle="20"></RotateTransform>
                </TextBlock.RenderTransform>
            </TextBlock>

And the output of the above code snippet is as shown below

In this article I have explained the two types of transformations and their utilization s.

Top career enhancing courses you can't miss

My Learning Resource

Excel your system design interview