Transforms are a great way to change the appearance of controls in WPF in cases where styles and templates usually fall short. The source code comes from a book published in Czech as “Mistrovstvi ve WPF” ( RIP – this server did not even survive its own hosting.) and in English as Applications = Code + Markup (A Guide to the Microsoft Windows Presentation Foundation) by Charles Petzold ( RIP – this server did not even survive its own hosting.). The source code looks like this and contains all the basic transforms:
XML
<Page x:Class="K1456.Capitol29.TransformedButtons" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300" Title="TransformedButtons">
<Canvas>
<!--Button with the standard look, without any transform-->
<Button Canvas.Left="50" Canvas.Top="100">Untransformed</Button>
<Button Canvas.Left="200" Canvas.Top="100">
Translated
<Button.RenderTransform>
<!--Moves the button 100px to the left and 150px down-->
<TranslateTransform X="-100" Y="150"></TranslateTransform>
</Button.RenderTransform>
</Button>
<Button Canvas.Left="350" Canvas.Top="100">
Scaled
<Button.RenderTransform>
<!--Enlarges the button 1.5x in width and 4x in height while keeping the relative size of the text-->
<ScaleTransform ScaleX="1.5" ScaleY="4"></ScaleTransform>
</Button.RenderTransform>
</Button>
<Button Canvas.Left="500" Canvas.Top="100">
Skewed
<Button.RenderTransform>
<!--Turns the button by an angle of 20° clockwise - not intended for rotating through the full range of degrees-->
<!--It is probably not meant for higher values, because with higher values it behaves rather strangely (full stretching etc.). Probably because Skew means to distort-->
<!--It can take values from 0 to 180 (same as 0) and -1 to -180 (same as 0)-->
<!--Of course you can also set the AngleX parameter at the same time to turn along the horizontal axis-->
<SkewTransform AngleY="20"></SkewTransform>
</Button.RenderTransform>
</Button>
<Button Canvas.Left="650" Canvas.Top="100">
Rotated
<Button.RenderTransform>
<!--Rotates the button around its 0,0 point, which does not change with any rotation.-->
<!--Allowed values are -360-0 (counterclockwise) and 0-360 (clockwise)-->
<RotateTransform Angle="-30"></RotateTransform>
</Button.RenderTransform>
</Button>
</Canvas>
</Page>In this code you can see that the basic transforms are:
TranslateTransform– Moves the element horizontally and vertically according to the X and Y values.ScaleTransform– Visually enlarges or shrinks the element.SkewTransform– Gives the button a shape different from its default one.RotateTransform– Rotates the button around its 0,0 point.
Once launched, the whole program above looks like this:
