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.

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="" xmlns:x="" 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
Dot Net Perls
© 2007-2020 Sam Allen. Every person is special and unique. Send bug reports to