Impact of WPF (Silverlight) layout (Render)Transform on app performance

Question

When designing UI part of WPF or Silverlight application we can apply some display transformations (LayoutTransform or RenderTransform) to visual elements. Some of these transformation are:

• RotateTransform
• ScaleTransform
• SkewTransform
• TranslateTransform

I wonder to what extent using such transformations slow down rendering a page?

To be more specific. For example I have a thousand simple elements, say rectangles, on a page, which are put in rows, using a Grid and some StackPanels. If I apply a RotateTransform on all or some of them, will it have the noticeable impact on performance of my application?

I can, of course, try and see what will happen, but maybe there are obvious things which I am simply not aware of.

Answer 1

Here's a prototype you can use to experiment with various options:

<Grid>
    <Grid.Resources>
        <local:Range x:Key="sampleData" Minimum="1" Maximum="900"/>
    </Grid.Resources>
    <ItemsControl ItemsSource="{StaticResource sampleData}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Rows="30" Columns="30"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding}" FontSize="8">
                    <TextBlock.LayoutTransform>
                        <RotateTransform Angle="30"/>
                    </TextBlock.LayoutTransform>
                </TextBlock>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

and a data generator:

class Range : List<int>, ISupportInitialize
{
    public int Minimum { get; set; }
    public int Maximum { get; set; }

    public void BeginInit() { }

    public void EndInit()
    {
        for (int i = Minimum; i <= Maximum; i++) Add(i);
    }
}

and the upper-left hand corner looks like this:

You can trigger a layout by resizing the window and on my machine it is a bit sluggish but usable. Then you can test other containers, other transforms, layout vs. render transform, etc to see what differences they make.

Answer 2

A LayoutTranform will cause a full pass on the layout system. This will cause all on-screen objects to be remeasured and rearranged. This is a mathematically intensive operation that is proportional to the number of on screen objects.

If this is not what you need then using RenderTransform would be faster as it doesn't cause a full layout pass. The impact of using one over the other will depend on the situation regarding what other objects are displayed on screen and which ones the transform needs to apply to.