RenderTransform vs. ScaleTransform

What's the difference between RenderTransform and ScaleTransform (no, this isn't a joke setup)?  It all starts with layout.

Layout is a feature in Avalon for negotiating how UI elements share space on the screen.  After layout is performed and the "final sizes" of the UI elements have been determined, the elements are drawn, or rendered, on the screen.  A variety of different transforms, such as rotation, scaling and skewing, can be applied to elements and will affect how they look on the screen, including their physical dimensions.  If the transform is applied after layout is performed, the relative sizes and positions of elements based on layout results will not be affected.  This is RenderTransform.  If the transform is applied before layout, the relative sizes and positions of elements will be affected.  This is LayoutTransform.

Below, I demonstrate this through an example using scaling.

No Transform

<StackPanel xmlns="https://schemas.microsoft.com/winfx/avalon/2005" Background="orange" Width="250" Margin="20">
<TextBlock TextWrap="Wrap" Margin="10" Background="chartreuse">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus tempor elit ut metus. Morbi massa. Nunc in urna.
</TextBlock>

 <Button>Hello world!</Button>
<Button>Hello again!</Button>
</StackPanel>

 

LayoutTransform

In this markup, the LayoutTransform property has been set on the TextBlock.  I used scaling causing everything to be magnified, including the layout.  Note that the Buttons are "pushed" down making room for the TextBlock.

<StackPanel xmlns="https://schemas.microsoft.com/winfx/avalon/2005" Background="orange" Width="250" Margin="20">
<TextBlock TextWrap="Wrap" Margin="10" LayoutTransform="scale 2" Background="chartreuse">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus tempor elit ut metus. Morbi massa. Nunc in urna.
</TextBlock>

 <Button>Hello world!</Button>
<Button>Hello again!</Button>
</StackPanel>

 

RenderTransform

Note that the RenderTransform property has been added to the TextBlock.  The Buttons are not pushed out of the way; this is because their position was determined during layout and RenderTransform applies after layout.

<StackPanel xmlns="https://schemas.microsoft.com/winfx/avalon/2005" Background="orange" Width="250" Margin="20">
<TextBlock TextWrap="Wrap" Margin="10" RenderTransform="scale 2" Background="chartreuse">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus tempor elit ut metus. Morbi massa. Nunc in urna.
</TextBlock>

 <Button>Hello world!</Button>
<Button>Hello again!</Button>
</StackPanel>