Charles Petzold

File this one under "One picture is worth a thousand words." Or rather, "One animation is worth a thousand words." Or rather, "Two animations are worth a thousand words." Or rather, "Two animations are worth more than a few cyptic sentences."

Whatever. If you've explore graphics transforms in WPF, you know that UIElement defines a RenderTransform property and FrameworkElement defines a LayoutTransform property, and the documentation dutifully discusses how the latter transform affects layout, but the former transform does not.

The implications for what we blithely call the "real world" are left to our imaginations. Fortunately, computer graphics is one area where we can do something about that by actually creating something to look at.

You can run the standalone RenderTransformVersusLayoutTransform.xaml file in XAML Cruncher or IE (with WPF installed). The program creates two UniformGrid panels containing nine buttons each. In both cases the center button is subjected to an animated RotateTransform. But the rotation for the center button in the first panel is a RenderTransform while the rotation for the button in the second panel is a LayoutTransform. The differences are dramatic and unforgettable. (And it's easy to guess which one gobbles up fewer processor clock cycles.)

Notice that the RenderTransform for the center button in the first panel is accompanied by a RenderTransformOrigin attribute that sets the rotation origin to the center of the button. Without this attribute, the button rotates around its upper-left corner. The button subjected to the LayoutTransform doesn't need any correction like this because the element is always centered within its layout position. A TranslateTransform in a LayoutTransform has no effect.