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>
Windows Presentation Foundation provee una serie de clases que derivan de System.Windows.Media.Transform
Podrias pasarnos el codigo fuente de estos ejemplos?
Muchas gracias Oscar, muy interesante
Si yo hago una aplicacion Browser (web) de wpf ¿puedo realizar estas animaciones?
¿necesitaría tener instalado algo concreto en la maquina cliente (silveligth etc…)?
Hola Julio en realidad no son animaciones, no vas a ver ninguna animación, de eso trata el siguiente post. Pero en una aplicación XBAP las puedes ver sin problemas
«¿necesitaría tener instalado algo concreto en la maquina cliente (silveligth etc…)?»
Julio, para navegar por una aplicación WPF en browser( XBAP ) necesitas tener instalado WPF( Windows y framework completo o Client Profile ).
Con silverlight el cliente necesitaría solamente instalar el plugin se Silverlight( Windows y Mac y 4 mbs de descarga ).
En efecto se me habia olvidado comentar que si haces tu aplicacion XBAP el cliente debe de ser Widows y el framework instalado. Por cierto a mi no me gusta mucho la practica del XBAP