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.
transforms
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

About these ads

1 Response to “LayoutTransform vs. RenderTransform in WPF”



  1. 1 Animations in WPF « Discovering .NET Trackback on April 22, 2009 at 8:49 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




March 2009
M T W T F S S
« Feb   Apr »
 1
2345678
9101112131415
16171819202122
23242526272829
3031  
I am a part of all that I have met;
Yet all exprience is an arch whitherthro'
Gleams that untravell'd world, whose margin fades
For ever and for ever when I move.
How dull it is to pause, to make an end,
To rust unburnish'd, not to shine in use!
Alfred, Lord Tennyson

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: