Home
Search
RenderTransform Example: TransformGroupUse the RenderTransform and TransformGroup elements. Scale, skew and rotate a Button control.
WPF
This page was last reviewed on Sep 27, 2022.
RenderTransform. Controls in WPF support graphical transformations. We can scale, skew, rotate and translate controls. We use the RenderTransform element.
Some details. For a Button, we specify a Button.RenderTransform and a TransformGroup. This allows us to resize and change the rendering of the button.
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 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).
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 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.
A summary. 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.
Dot Net Perls is a collection of tested code examples. Pages are continually updated to stay current, with code correctness a top priority.
Sam Allen is passionate about computer languages. In the past, his work has been recommended by Apple and Microsoft and he has studied computers at a selective university in the United States.
This page was last updated on Sep 27, 2022 (edit link).
Home
© 2007-2022 sam allen.
see site info on the changelog.