Layout Transform

During my last few posts, I’ve made heavy use of Viewbox in order to scale content; today I’ll introduce the TransformDecorator, which provides a slightly different approach to scaling.

The contents of a Viewbox do not re-layout due to changes in window size; they’re essentially frozen to a particuar layout, then scaled as a whole by the Viewbox. In contrast, the contents of a TransformDecorator will re-layout given changes in window size, just like other layouts such as Border. TransformDecorator is special because it can manipulate how its content lays out through scaling and rotation.

Let’s start with some text and an Ellipse within a TextFlow, which I’ve placed inside a Border contained within a TransformDecorator. Here’s the markup:

<TransformDecorator xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
                    xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"
                    VerticalAlignment="Center" HorizontalAlignment="Center"
                    Transform="scale 1.0">
  <Border Background="RadialGradient #eef #aaf">
    <TextFlow FontFamily="Segoe Print, Comic Sans MS" FontSize="15" Margin="10">
      <Paragraph>
        Duis effet finis suspicit quast. Quisque vitae sem. In magna felis,
        fermentum ut, interdum nec, venenatis et, leo.
      </Paragraph>
      <Paragraph TextAlignment="Center">
        <Ellipse Fill="HorizontalGradient #0fff #c00" Width="300" Height="150" />
      </Paragraph>
    </TextFlow>
  </Border>
</TransformDecorator>

A screenshot of Avalon showing filler text with a red ellipse

TransformDecorator has a Transform property; currently, it’s set to scale 1, which scales the content by a factor of 1 (boring). If we change the value to scale .6, we see the following:

A screenshot of Avalon showing filler text with a red ellipse, zoomed to a smaller size through a layout transform

Notice that all the content has been scaled and the text has reflowed to fit the window’s width. Let’s make our content bigger by changing the value to scale 1.5:

A screenshot of Avalon showing filler text with a red ellipse, zoomed to a larger size through a layout transform

If you resize the window, you’ll notice that, unlike Viewbox, the content inside the TransformDecorator isn’t frozen and reflows when resizing. This makes TransformDecorator a good choice if you want to scale your content and still resize.

This type of transform is related to RenderTransform, but differs because the RenderTransform is applied after layout occurs. I’ll cover this in more detail in a future post.

Aside I’ve used Segoe Print, another new Microsoft font in the same family as Segoe Script

Viewing 4 Comments

Drew Marsh 3 years ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

Unless of course you explicitly set AffectsLayout="False". Maybe you could detail the differences between that being True/False since this is one that confuses a couple people? I'm just being lazy and not writing something up myself since people would prefer hear it from the mouths of Microsofties anyway. ;)

Keep up the great work!

Cheers,
Drew

Fortes 3 years ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

Drew: I'll cover the difference between layout affecting and render transforms in my next post. Thanks.

2 /people/fortes/ /people/fortes/following/ http://fortes.com/ 4807956 in/fortes fortes fortes fortes fortes