A Tale of Two Transforms

In my last post, I briefly mentioned the difference between a layout-affecting transform and a render-only transform. Here’s a screenshot and markup for a quick sample which illustrates the difference between the two:

A diagram illustrating the different between layout and render transforms in Avalon

The screenshot shows a two by three Grid, with a Button and a Rectangle within each cell. The first row is used as a control, the Buttons in the second row have a layout-affecting transform, and those in the third have a render-only transform. Here’s the markup:

<Grid xmlns="http://schemas.microsoft.com/winfx/avalon/2005" xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">
  <Grid.RowDefinitions>
    <RowDefinition Height="150" />
    <RowDefinition Height="150" />
    <RowDefinition Height="150" />
  </Grid.RowDefinitions>

  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="150" />
    <ColumnDefinition Width="150" />
  </Grid.ColumnDefinitions>

  <Rectangle Margin="5" Fill="VerticalGradient #99f #66c" />
  <Rectangle Margin="5" Fill="VerticalGradient #f9f #c6c" Grid.Column="1"/>
  <Rectangle Margin="5" Fill="VerticalGradient #9f9 #6c6" Grid.Row="1"/>
  <Rectangle Margin="5" Fill="VerticalGradient #f99 #c66" Grid.Row="1" Grid.Column="1"/>
  <Rectangle Margin="5" Fill="VerticalGradient #ff9 #cc6" Grid.Row="2" />
  <Rectangle Margin="5" Fill="VerticalGradient #9ff #6cc" Grid.Row="2" Grid.Column="1"/>

  <Button Margin="10">
    None
  </Button>
  <Button Grid.Column="1" Margin="10">
    None
  </Button>

  <TransformDecorator Transform="rotate 45" Grid.Row="1" Margin="10">
    <Button>Layout</Button>
  </TransformDecorator>
  <TransformDecorator Transform="scale 1.5" Grid.Column="1" Grid.Row="1" Margin="10">
    <Button>Layout</Button>
  </TransformDecorator>

  <Button RenderTransform="rotate 45" Grid.Row="2" Margin="10">
    Render
  </Button>
  <Button RenderTransform="scale 1.5" Grid.Row="2" Grid.Column="1" Margin="10">
    Render
  </Button>
</Grid>

As you can see, the cells with render-only transforms end up drawing outside of their cells. Unlike layout-affecting transforms, the render-only transforms do not factor into layout; the content’s layout is performed as usual, with a transformation applied to the final result.

Viewing 4 Comments

jonahb 3 years ago 1 point
Please login to rate.

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

Why is the layout-affecting transform a container (TransformDecorator) while the render-only transform is an attribute?

Why the different naming convention, i.e., why is TransformDecorator not LayoutTransform? Is there a decorator pattern in Avalon?

Fortes 3 years ago 1 point
Please login to rate.

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

Jonah: We've changed that in the next CTP to be more consistent.

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