:::: MENU ::::

Layout transform in Windows 8 WinRT XAML

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! :)

Share the knowledge

8 Comments

  • Reply products for weight loss |

    1- Brown seaweed extract: It’s this pure ingredient that helps to scale back your appetite and therefore limits your general calorie consumption every day. Meratol weight loss capsule is medically confirmed to burn up your calories as well as in addition, it manages meals and snacks craving so there won’t be the sensation of
    consuming unnecessarily. It is known to effectively increase size of breast
    in most women.

  • Reply dqtuan9x |

    Hi igrali ….
    I have a problem when user common:LayoutTransformer and ScaleTransform

    ScaleTransform can’t work with CenterX and CenterY. Can you fix it ?

  • Reply Darius |

    Hi igrali,
    is there a way to use bindings in your layout transformer? I tried this

    but it didn’t work out the way I need it. If the value of AngleObject changes the RotateTransform should be reapplied (in my case to an Image).

So, what do you think ?