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
. This allows us to resize and change the rendering of the button.
First, we 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.
ScaleTransform
is the first element within the TransformGroup
element. It scales (makes bigger or smaller) the X and Y dimensions.AngleX
to 30.RotateTransform
rotates the element. We specify a 35-degree rotation of the Button
control.TranslateTransform
changes the location of the control. We move it 50 pixels to the right (X) and 80 pixels downward (Y).<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 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.
Any WPF control can be transformed in this way. But in many programs, these transformations are not helpful. It is best to be careful and apply transformations only as needed.