Impact of WPF (Silverlight) (Render) Transformation Layout Transformation on Application Performance

When developing part of the WPF user interface or Silverlight application, we can apply some visual elements ( LayoutTransformor RenderTransform) to the visual elements. Some of these conversions:

  • RotateTransform
  • ScaleTransform
  • SkewTransform
  • TranslateTransform

I wonder to what extent the use of such transformations slows down page rendering?

To be more specific. For example, I have a thousand simple elements, such as rectangles, on a page that fit in rows using Grid and some StackPanels. If I applied RotateTransformto all or some of them, will this have a noticeable effect on the performance of my application?

Of course, I can try and see what happens, but maybe there are obvious things that I just don’t know about.

+5
source share
2 answers

Here is a prototype that 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 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 corner is as follows:

transform performance

You can call up the layout by resizing the window, and on my machine it is a little sluggish, but applicable. Then you can test other containers, other transformations, layout and rendering conversions, etc., to find out what they are doing.

+1
source

A LayoutTranform . , . , .

, , RenderTransform , . , , , .

+1

All Articles