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.
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.
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
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.
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.
Leave a Reply