WPF Performance: Canvas.SetLeft vs Translate Transform

A quick update on this blog, I will be traveling for my job in the coming week for a few weeks and will most likely not have time to post anything. I will try to keep this blog updated as best I can in the next few weeks, but no promises. Once I get back I will continue on with my postings. Now on with this post ...

In many WPF applications one will come across animations in some sort of fashion. This post is geared towards moving an object on the screen; particularly moving it along the x-axis. I will cover 2 ways of achieving this and both are very rudimentary. The first, setting the Canvas.SetLeft attached property and the second sets the TranslateTransform.X property.

The application that I wrote compares 2 different objects being moved by the 2 above mentioned properties. The first object is a simple Rectangle from the System.Windows.Shapes namespace. The other object is just a Button from the System.Windows.Controls namespace. The button is our semi-complex object for 2 main reasons. One, it derives from UIElement and the other is that our button has its template overridden to provide a better looking button. Besides the properties that we are comparing under this performance test (Canvas.SetLeft and TranslateTransform.X), the rectangle has a couple of properties set on it; Canvas.SetTop, width, height and fill. The Button also has some properties set on it; Canvas.SetTop, width, height and style.

The performance tool that I have used is called WPFPerf which comes with the Windows SDK, but you can download this tool and the whole WPF performance suite here: http://wpf.netfx3.com/files/folders/developer/entry10880.aspx The only real measurement that I was looking for was the frame rate. The higher the number of frames the smoother the animation.

Below are what my 2 objects look like and their performance tables as well. The tables display the number of objects that were created, the frame rate for setting the Canvas.SetLeft property and the frame rate for setting the TranslateTransform.X property. The program simply loops a number of times to create a different number of objects (as stated in the tables below). A DispatcherTimer is used to increment the objects' Canvas.SetLeft / TranslateTransform.X property. This provides our relative smooth animation for the object. One point of note here, I increment the Canvas.SetTop property by only 1 each time (even though the height of my objects are 25 so overlapping occurs). This is to force WPF to draw all of the objects that are on the screen since my resolution is 1920x1200; 1000 objects shifted by 1 will allow me to see all of them.

Simple object (System.Windows.Shapes), Rectangle:

Semi-complex object (System.Windows.Controls), Button:

As you can see from the 2 tables, the clear winner is moving a simple object around. I won't go into the details on why this is, but the majority of it has to do with the Button deriving from UIElement. There is a lot of overhead that the object automatically receives which one may or may not want.  But the real focus of this test was to compare the Canvas.SetLeft property vs. the TranslateTransform.X property. Starting with the simple object, the 2 properties start to diverge around 3000 objects. With the semi-complex object the 2 properties really never differ. This is good news, all though this test may not be the best one for all applications, it certainly suites mine! And yes, the duck graphic is form duck hunt (that I have vectorized) and if you have been following along with my other posts you surely can put 2 and 2 together to see where this is going, hopefully soon.

In conclusion, Canvas.SetLeft vs. TranslateTransform.X properties perform very similar and is personal preference for choosing. Of course, if your application is using an absolute positioning system the Canvas.SetLeft property will be more suitable for you.