Transformaciones en WPF

Windows Presentation Foundation provee una serie de clases que derivan de
System.Windows.Media.Transform  y que nos permitirán mover  o  transladar,
rotar, escalar e inclinar elementos en un mundo 2D.
¿Cómo podríamos definir  lo que es una  transformación? Una  transformación
sería el proceso mediante el cual se mapean o transforman unas coordenadas
en el espacio con otras coordenadas en el espacio.
En  WPF  disponemos  de  las  siguientes  transformaciones  básicas:
TranslateTransform,  RotateTransform,  ScaleTransform,  SkewTransform  y  las
transformaciones más complejas: MatrixTransform y TransformGroup.

 

TranslateTransform

Desplaza un elemento de un punto a otro, es decir,  lo mueve con  respecto a
dos valores:  X e Y.

•   X – Cantidad a mover horizontalmente. 
•   Y – Cantidad a mover verticalmente.

En el  siguiente ejemplo podremos ver como  se aplica una  transformación de
tipo translación a un botón desde las coordenadas (0,0) a (+10, +10):

 

<Button RenderTransformOrigin="0.5,0.5" Background="White" Width="100" Height="100"> 
   X = 0, Y = 0 
</Button> 
<Button RenderTransformOrigin="0.5,0.5" Background="Yellow" Width="100" Height="100"> 
   <Button.RenderTransform> 
      <TranslateTransform X="10" Y="10"></TranslateTransform> 
   </Button.RenderTransform> 
   X = 10, Y = 10 
</Button> 

 

 

RotateTransform

Rota  un  elemento  de  acuerdo  a  los  valores  de  las  siguientes  propiedades
Angle, CenterX, CenterY. El elemento es  rotado normalmente con respecto a
un punto de libre elección.

•   Angle – Angulo de rotación expresado en grados
•   CenterX – Coordenada horizontal del punto de rotación
•   CenterY – Coordenada vertical del punto de rotación
  En el  siguiente ejemplo podremos ver como  se aplica una  transformación de
  rotación aun botón:

 

<Button RenderTransformOrigin="0.5,0.5" Background="Yellow" Width="100" 
Height="100"> 
   <Button.RenderTransform> 
      <RotateTransform Angle="45"></RotateTransform> 
   </Button.RenderTransform> 
   Rotado 45° 
</Button> 

 

 

ScaleTransform

Escala un elemento creciendo o decreción en horizontal, vertical o en ambas
direcciones  de  acuerdo  a  los  valores  de  las  siguientes  propiedades:  ScaleX,
ScaleY, CenterX, CenterY.

•   ScaleX – Multiplicador aplicado al ancho del elemento
•   ScaleY – Multiplicador aplicado al alto del elemento
•   CenterX – Origen horizontal del escalado
•   CenterY – Origen vertical del escalado

En el siguiente ejemplo se transforma un elemento aplicano un multiplicador
de 5 al ancho del botón:

<Button RenderTransformOrigin="0.5,0.5" Background="Yellow" Width="75" Height="50"> 
   <Button.RenderTransform> 
      <ScaleTransform ScaleX="5"></ScaleTransform> 
   </Button.RenderTransform> 
   ScaleX = 5 
</Button> 

 

SkewTransform

Deforma  un  elemento  inclinándolo  una  serie  de  grados,  de  acuerdo  a  los
valores de la siguientes propiedades: AngleX, AngleY, CenterX, CenterY

•   AngleX – Grados de inclinación horizontal
•   AngleY –  Grados de inclinación vertical
•   CenterX – Origen horizontal de la inclinación
•   CenterY –  Origen vertical de la inclinación

En el siguiente ejemplo se aplica una transformación de tipo SkewTransform a
un botón:

 

 

<Button RenderTransformOrigin="0.5,0.5" Background="Yellow" Width="75" Height="50"> 
   <Button.RenderTransform> 
      <SkewTransform AngleX="10" AngleY="5"></SkewTransform> 
   </Button.RenderTransform> 
   10, 5 
</Button> 

MatrixTransform

MatrixTransform  es  un  mecanismo  de  bajo  nivel  usado  para  crear
transformaciones 2D personalizadas. La matriz de 3×3 usada en su sistema de
coordenadas  es multiplicada  por  la matriz  aportada mediante  la  propiedad
Matrix.

•    Matrix – Matriz que deriva de System.Windows.Media.Matrix

En  el  siguiente  fragmento de  código XAML  se  aplica una  transformación de
tipo MatrixTransform:

 

<Button Height="70" Width="120"> 
   <Button.RenderTransform> 
      <MatrixTransform Matrix="1, 0.5, 0, -1, 0, 1"/> 
   </Button.RenderTransform> 
   OK 
</Button> 

 

TransformGroup

Es  otra  de  las  transformaciones  complejas  ya  que  permite  combinar  varias
transformaciones  simples  como  si  fuera  un  todo,  de  una  vez.  Siendo
importante  en  todo  momento  el  orden  real  el  que  se  van  a  aplicar  las
transformacions ya que afectará al resultado final.

<Button Height="70" Width="120"> 
   <Button.RenderTransform> 
      <TransformGroup> 
         <RotateTransform Angle="45"/> 
         <ScaleTransform ScaleX="5" ScaleY="1"/> 
         <SkewTransform AngleX="30"/> 
      </TransformGroup> 
  </Button.RenderTransform> 
  OK 
</Button>