WPF RenderTransform Example: TransformGroup

RenderTransform. Controls in WPF support graphical transformations. We can scale, skew, rotate and translate controls. We use the RenderTransform element. For a Button, we specify a Button.RenderTransform and a TransformGroup.


Example. To begin, please drag a Button control to the WPF window. Now, attempt to rotate the Button in Visual Studio: click on a corner and drag it in the direction you want to rotate. Visual Studio will insert a Button.RenderTransform element.

Visual Studio

ScaleTransform: This is the first element within the TransformGroup element. It scales (makes bigger or smaller) the X and Y dimensions.

SkewTransform: Skewing an element causes it to lose its original shape. It distorts the element. We set AngleX to 30.

RotateTransform: This rotates the element. We specify a 35-degree rotation of the Button control.

TranslateTransform: This changes the location of the control. We move it 50 pixels to the right (X) and 80 pixels downward (Y).

Based on:

.NET 4.5

Example markup: XAML

<Window x:Class="WpfApplication24.MainWindow"
	Title="MainWindow" Height="350" Width="525">
	<Button Content="Example"
		    <ScaleTransform ScaleX="2" ScaleY="2"/>
		    <SkewTransform AngleX="30" AngleY="0"/>
		    <RotateTransform Angle="35"/>
		    <TranslateTransform X="50" Y="80"/>

The screenshot at the top shows the output of this XAML. The button, salmon-colored with white text, is rotated and skewed and scaled. This makes it almost unusable in a real program.

Summary. Any WPF control can be transformed in this way. But in many programs, these transformations are not helpful. No one wants to read a DataGrid that is rotated or skewed. It is best to be careful and apply transformations only as needed.