In WPF ogni UIElement espone una proprietà RenderTranform alla quale possiamo associare un oggetto Tranform o che eredita da esso che ci consente di modificare la modalità di rappresentazione dell'elemento una volta renderizzato, ad esempio applicando un RotateTranform possiamo ruotare un elemento o tutti quelli contenuti nel proprio logical tree.
<StackPanel Orientation="Horizontal" orizontalAlignment="Center">
<Button Height="100" Width="80" Content="Hello" />
<Button Height="100" Width="80" Content="World">
<Button.RenderTransform>
<ScaleTransform ScaleX="1.5" ScaleY="1.5" CenterX="50" CenterY="40" />
< span>Button.RenderTransform>
< span>Button>
< span>StackPanel>
Il risultato è l'immagine che qui sotto:
Il pulsante "World" è più grande del rispetto a quello sulla sinistra grazie alla presenza di uno ScaleTranform.
Questo però potrebbe non essere quello che in realtà volevamo ottenere in quanto, essendo i due pulsanti contenuti in uno StackPanel ci piacerebbe avere i due pulsanti centrati sebbene quello sulla destra sia più grande.
La soluzione è utilizzare LayoutTranform anzichè RenderTranform.
<StackPanel Orientation="Horizontal" orizontalAlignment="Center">
<Button Height="100" Width="80" Content="Hello" />
<Button Height="100" Width="80" Content="World">
<Button.LayoutTransform>
<ScaleTransform ScaleX="1.5" ScaleY="1.5" CenterX="50" CenterY="40" />
< span>Button.LayoutTransform>
< span>Button>
< span>StackPanel>
In questo caso i due pulsanti sono correttamente allineati in quanto LayoutTranform informa il sistema di layouting che le dimensioni del pulsante sono cambiate e che quindi il contenuto dello StackPanel va riallineato.
A causa di questo LayoutTranform è "più lento" rispetto a RenderTranform che quindi meglio si presta ad utilizzo delle trasformazioni come "animazioni", ad esempio un pulsante che diventa più grande durante l'evento MouseOver.
LayoutTranform e RenderTranform accettano un solo oggetto Tranform, nel caso si vogliano applicae più traformazioni le stesse devono essere inserite in un TranformGroup.
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Button Height="100" Width="80" Content="Hello" />
<Button Height="100" Width="80" Content="World">
<Button.LayoutTransform>
<TransformGroup>
<ScaleTransform ScaleX="1.5" ScaleY="1.5" CenterX="50" CenterY="40" />
<RotateTransform Angle="45" CenterX="50" CenterY="40" />
< span>TransformGroup>
< span>Button.LayoutTransform>
< span>Button>
< span>StackPanel>
Il risultato è quello che vedete qui a sinistra.