LayoutTransform vs. RenderTransform in WPF

Every FrameworkElement in WPF, in other words every visual element that we deal with in WPF, has two properties to support display transformations, LayoutTransform and RenderTransform. RenderTransform is actually inherited from FrameworkElement’s base class, UIElement. Both LayoutTransform and RenderTransform are of type Transform.

Transform is an abstract class, and WPF provides several concrete implementations that can be applied to the two aforementioned properties in XAML and code. Some of them are:

• RotateTransform
• ScaleTransform
• SkewTransform
• TranslateTransform

So, what is the difference between LayoutTransform and RenderTransform? The two property names reveal much in this case. Any Transform assigned to LayoutTransform is applied when layout is performed. RenderTransform is applied after layout when rendering is performed. A quick XAML example will demonstrate this. Copy/paste the XAML below into XAMLPad, Kaxaml, or your favorite XAML editor. You’ll have to supply your own images or download them from the link at the bottom of this post as I haven’t uploaded them yet. Just change the path where you see <Image Source="c:/code/mywpf/anim/.../>.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Page.Resources>
    <!-- Style for border around each image -->
    <Style x:Key="imageBorder" TargetType="{x:Type Border}">
      <Setter Property="Width" Value="100"/>
      <Setter Property="Height" Value="130"/>
      <Setter Property="Margin" Value="4,0,0,0"/>
      <Setter Property="BorderThickness" Value="3"/>
      <Setter Property="BorderBrush" Value="Khaki"/>
      <Setter Property="Background" Value="Beige"/>
      <Setter Property="CornerRadius" Value="6"/>
      <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
    </Style>
  </Page.Resources>

  <StackPanel>
    <Label>LayoutTransform:</Label>
    <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Background="#aaa" Height="140">
      <Border Style="{StaticResource imageBorder}">
        <Border.LayoutTransform>
          <RotateTransform Angle="10"/>
        </Border.LayoutTransform>
        <Image Source="c:/code/mywpf/anim/alert.png">
        </Image>
      </Border>
    
      <Border Style="{StaticResource imageBorder}">
        <Border.LayoutTransform>
          <RotateTransform Angle="-12"/>
        </Border.LayoutTransform>
        <Image Source="c:/code/mywpf/anim/config-tools.png">
        </Image>
      </Border>
    </StackPanel>

    <Label>RenderTransform:</Label>
    <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Background="#aaa" Height="140">
      <Border Style="{StaticResource imageBorder}">
        <Border.RenderTransform>
          <RotateTransform Angle="10"/>
        </Border.RenderTransform>
        <Image Source="c:/code/mywpf/anim/alert.png">
        </Image>
      </Border>
    
      <Border Style="{StaticResource imageBorder}">
        <Border.RenderTransform>
          <RotateTransform Angle="-12"/>
        </Border.RenderTransform>
        <Image Source="c:/code/mywpf/anim/config-tools.png">
        </Image>
      </Border>
    </StackPanel>
  </StackPanel>
</Page>

The result should look like this.

A pair of Borders is created, each containing a single image. A RotateTransform is assigned to the LayoutTransform property of each border. This causes each Border and its contents to be rotated slightly, the first by positive 10 degrees and the second by negative 12 degrees. Margins, as defined in the imageBorder Style, between the Borders is maintained since the transform is applied at layout time. The Borders are fully contained within the containing StackPanel, being clipped to within the panel’s dimensions.

The Borders are repeated on the second row. This time RenderTransfom is used instead of LayoutTransform. Notice that the two Borders now overlap and are not clipped to the containing StackPanel. In this case the Borders were positioned and clipped in an untransformed state, i.e. unrotated. Then the RotateTransform was applied to each Border with the results shown here.

The images used in this example were provided by the kind folks at VistaICO.com