Layout transform is an interesting concept in XAML development. This of course includes WPF, Silverlight, Silverlight for Windows Phone, WinRT XAML. It is often a nice feature (let’s call it a design feature) to have your text rotated 90 degrees to save vertical space. This is especially true on Windows 8 devices where the standard layout includes more horizontal than vertical space. Usually, one would try to use render transform and rotation, but that doesn’t work as expected.

And it shouldn’t really, because there’s a huge difference between rotating using render and layout transform. Not to reinvent the wheel, here is a great blog post that explains it:

http://www.scottlogic.co.uk/blog/colin/2008/12/layouttransform-vs-rendertransform-whats-the-difference/

Please notice that this is the article from 2008, and it still works so well because it’s written for WPF. Here’s the essential difference:

… 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…

And it’s best explained with two screenshots.

Render transform

image

Code:

I added 6 buttons, and rotated one for –75 degrees. And what I got on the screen was not what I would expect. I would expect my button to rotate but not render over the other elements to look so ugly. I would want my button to have it’s own space. For that I need LayoutTransform.

Layout transform

image

Code:

I added the whole XAML this time to make you notice that I added common in my list of namespaces in order to include the classes from the Common folder, where LayoutTransformer lives. And what is LayoutTransformer? It’s a class published by Microsoft under Microsoft Public License (Ms-PL) as a part of Silverlight Toolkit. Considering that it’s really easy to switch between Silverlight XAML and WinRT XAML, I modified the LayoutTransformer class to work with WinRT and copied the basic defining style to StandardStyles.xaml, which is a resource dictionary that’s part of the standard WinRT project. Here’s the LayoutTransformer class:

Download Layout Transformer class here

The style part:

Here’s the original code from Silverlight toolkit:

http://silverlight.codeplex.com/SourceControl/changeset/view/74775?ProjectName=silverlight#779405

Enjoy layout transforming in WinRT! :)