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.

Button

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"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	Title="MainWindow" Height="350" Width="525">
    <Grid>
	<Button Content="Example"
		HorizontalAlignment="Left"
		Margin="0"
		VerticalAlignment="Top"
		Width="75"
		Background="Salmon"
		Foreground="White"
		RenderTransformOrigin="0.5,0.5">
	    <Button.RenderTransform>
		<TransformGroup>
		    <ScaleTransform ScaleX="2" ScaleY="2"/>
		    <SkewTransform AngleX="30" AngleY="0"/>
		    <RotateTransform Angle="35"/>
		    <TranslateTransform X="50" Y="80"/>
		</TransformGroup>
	    </Button.RenderTransform>
	</Button>
    </Grid>
</Window>

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.

DataGrid

Related Links