LayoutTransform vs. RenderTransform - What's the Difference?

I have answered a few forum posts about the WPF transforms recently, mostly regarding confusion between RenderTransform and LayoutTransform. This brief blog post illustrates the difference between the two. The WPF layout system comprises, of two steps, followed by the rendering of the user interface (UI):

  • Measure
  • Arrange
  • Render

In the Measure step, the DesiredSize of each element is computed; in the Arrange step the position of child elements within their parents is determined; finally, in the Render step, the result user interface is rendered to the screen. Layout transforms and Render transforms are computed at different stages of the layout/render process:

  • LayoutTransform
  • Measure
  • Arrange
  • RenderTransform
  • Render

As a result, any transformations associated with an elements LayoutTransform property will have an impact on the subsequent Measure and Arrange steps. Whereas a RenderTransform will not have any impact on the layout process and will only effect rendering. The difference is probably best illustrated by an example:

transforms

In the above examples, it can be seen that when a LayoutTransform is applied, neighbouring elements are re-positioned to accommodate the transformed elements, whereas with the RenderTransform they are not. One common use of WPF transforms is to rotate ListView column headings. With the above examples it should be obvious that a LayoutTransform is required to achieve this effect.

You can download the demo project, wpfrenderandlayouttransforms, changing the file extension from .doc to .zip.

Regards, Colin E.

blog comments powered by Disqus