Información general sobre transformaciones

Actualización: noviembre 2007

En este tema se describe cómo usar las clases Transform2D para girar, escalar, mover (trasladar) y sesgar objetos FrameworkElement.

Este tema contiene las secciones siguientes.

• ¿Qué es una transformación?
• Clases de transformación
• Propiedades comunes de transformación
• Transformaciones y sistemas de coordenadas
• Transformar FrameworkElement
• Ejemplo: Girar FrameworkElement 45 grados
• Animar transformaciones
• Características de elementos Freezable
• Temas relacionados

¿Qué es una transformación?

Un elemento Transform define cómo asignar, o transformar, puntos de un espacio de coordenadas a otro espacio de coordenadas. Esta asignación se describe mediante una Matrix de transformación, que es una colección de tres filas con tres columnas de valores Double.

Nota

Al igual que Microsoft, Windows Presentation Foundation (WPF) utiliza matrices de importancia de filas. Los vectores se expresan como vectores de fila, no como vectores de columna.

En la tabla siguiente se muestra la estructura de una matriz de WPF.

Matriz de transformación 2D

M11 Valor predeterminado: 1.0	M12 Valor predeterminado: 0.0	0.0
M21 Valor predeterminado: 0.0	M22 Valor predeterminado: 1.0	0.0
OffsetX Valor predeterminado: 0.0	OffsetY Valor predeterminado: 0.0	1.0

Manipulando los valores de la matriz, puede girar, escalar, sesgar y mover (trasladar) un objeto. Por ejemplo, si cambia a 100 el valor de la primera columna de la tercera fila (el valor de OffsetX), puede usarlo para mover un objeto 100 unidades a lo largo del eje X. Si cambia a 3 el valor de la segunda columna de la segunda fila, puede usarlo para triplicar el alto actual de un objeto. Si cambia ambos valores, mueve el objeto 100 unidades a lo largo del eje X y aplica un factor de 3 a su alto. Dado que Windows Presentation Foundation (WPF) solo admite transformaciones afines, los valores de la columna derecha siempre son 0, 0, 1.

Aunque Windows Presentation Foundation (WPF) permite manipular directamente los valores de matriz, también proporciona varias clases Transform que permiten transformar un objeto sin conocer cómo se configura la estructura de matriz subyacente. Por ejemplo, la clase ScaleTransform permite escalar un objeto estableciendo sus propiedades ScaleX y ScaleY, en lugar de manipulando una matriz de transformación. Del mismo modo, la clase RotateTransform permite girar un objeto con solo establecer su propiedad Angle.

Clases de transformación

Windows Presentation Foundation (WPF) proporciona las siguientes clases Transform2D para las operaciones comunes de transformación:

Clase	Descripción	Ejemplo	Ilustración
RotateTransform	Gira un elemento el valor de Angleespecificado.	Cómo: Girar un objeto
ScaleTransform	Escala un elemento usando los valores de ScaleX y ScaleY especificados.	Cómo: Ajustar la escala de un elemento
SkewTransform	Sesga un elemento los valores de AngleX y AngleY especificados.	Cómo: Sesgar un elemento
TranslateTransform	Mueve (traslada) un elemento los valores de X y Y especificados.	Cómo: Trasladar un elemento

Para crear transformaciones más complejas, Windows Presentation Foundation (WPF) proporciona las dos clases siguientes:

Clase	Descripción	Ejemplo
TransformGroup	Agrupa varios objetos TransformGroup en un solo objeto Transform que después se puede aplicar a propiedades de transformación.	Cómo: Aplicar varias transformaciones a un objeto
MatrixTransform	Crea transformaciones personalizadas que las otras clases Transform no proporcionan. Cuando se usa una clase MatrixTransform, se manipula una matriz directamente.	Cómo: Utilizar un objeto MatrixTransform para crear transformaciones personalizadas

Windows Presentation Foundation (WPF) también proporciona transformaciones 3D. Para obtener más información, vea la clase Transform3D.

Propiedades comunes de transformación

Una manera de transformar un objeto consiste en declarar el tipo de Transform adecuado y aplicarlo a la propiedad de transformación del objeto. Tipos de objetos diferentes tienen distintos tipos de propiedades de transformación. En la tabla siguiente se enumeran varios tipos comunes de Windows Presentation Foundation (WPF) y sus propiedades de transformación.

Tipo	Propiedades de transformación
Brush	Transform, RelativeTransform
ContainerVisual	Transform
DrawingGroup	Transform
FrameworkElement	RenderTransform, LayoutTransform
Geometry	Transform
TextEffect	Transform
UIElement	RenderTransform

Transformaciones y sistemas de coordenadas

Cuando se transforma un objeto, no solo se transforma el objeto, sino también el espacio de coordenadas en que se encuentra. De forma predeterminada, una transformación se centra en el origen del sistema de coordenadas del objeto de destino: (0,0). La única excepción es TranslateTransform; un elemento TranslateTransform no tiene propiedades de centrado que se puedan establecer porque el efecto de traslación es el mismo con independencia de dónde se centre.

En el ejemplo siguiente se usa RotateTransform para girar un elemento Rectangle, que es un tipo de FrameworkElement, 45 grados sobre su centro predeterminado (0, 0). En la siguiente ilustración se muestra el efecto de la rotación.

Elemento Rectangle girado 45 grados alrededor del punto (0,0)

<Canvas Width="200" Height="200">
  <Rectangle 
    Canvas.Left="100" Canvas.Top="100"
    Width="50" Height="50" 
    Fill="RoyalBlue" Opacity="1.0">
    <Rectangle.RenderTransform>
      <RotateTransform Angle="45" />
    </Rectangle.RenderTransform>
  </Rectangle>
</Canvas>

De manera predeterminada, el elemento gira sobre su esquina superior izquierda, (0, 0). Las clases RotateTransform, ScaleTransform y SkewTransform proporcionan propiedades CenterX y CenterY que permiten especificar el punto en el que se aplica la transformación.

En el ejemplo siguiente se usa también una clase RotateTransform para girar un elemento Rectangle 45 grados; sin embargo, en esta ocasión, las propiedades CenterX y CenterY se establecen de tal forma que RotateTransform tiene un centro de (25, 25). En la siguiente ilustración se muestra el efecto de la rotación.

Elemento Rectangle girado 45 grados alrededor del punto (25, 25)

<Canvas Width="200" Height="200">
  <Rectangle 
    Canvas.Left="100" Canvas.Top="100"
    Width="50" Height="50" 
    Fill="RoyalBlue" Opacity="1.0">
    <Rectangle.RenderTransform>
      <RotateTransform Angle="45" CenterX="25" CenterY="25" />
    </Rectangle.RenderTransform>
  </Rectangle>
</Canvas>

Transformar FrameworkElement

Para aplicar transformaciones a un objeto FrameworkElement, cree un elemento Transform y aplíquelo a una de las dos propiedades que proporciona la clase FrameworkElement:

• LayoutTransform: transformación que se aplica antes del paso de diseño. Una vez aplicada la transformación, el sistema de diseño procesa el tamaño y la posición transformados del elemento.

• RenderTransform: transformación que modifica la apariencia del elemento pero se aplica una vez completado el paso de diseño. El uso de la propiedad RenderTransform en lugar de la propiedad LayoutTransform, permite obtener ventajas de rendimiento.

¿Qué propiedad debo utilizar? Dadas las ventajas de rendimiento que proporciona, utilice la propiedad RenderTransform siempre que sea posible, especialmente cuando use objetos Transform animados. Utilice la propiedad LayoutTransform al escalar, girar o sesgar si necesita que el elemento primario del elemento se ajuste al tamaño transformado del elemento. Tenga en cuenta que, cuando se utilizan con la propiedad LayoutTransform, los objetos TranslateTransform parecen no tener ningún efecto en los elementos. Eso se debe a que el sistema de diseño devuelve el elemento trasladado a su posición original como parte de su procesamiento.

Para obtener más información sobre el diseño en Windows Presentation Foundation (WPF), vea la información general de Sistema de diseño.

Ejemplo: Girar FrameworkElement 45 grados

En el ejemplo siguiente también se usa RotateTransform para girar un botón 45 grados en el sentido de las agujas del reloj. El botón está incluido en un objeto StackPanel que tiene otros dos botones.

De forma predeterminada, un objeto RotateTransform gira alrededor del punto (0, 0). Como en el ejemplo no se especifica un valor central, el botón gira alrededor del punto (0, 0), que es su esquina superior izquierda. El objeto RotateTransform se aplica a la propiedad RenderTransform. La ilustración siguiente muestra el resultado de la transformación.

Rotación de 45 grados en el sentido de las agujas del reloj desde la esquina superior izquierda

<Border Margin="30" 
  HorizontalAlignment="Left" VerticalAlignment="Top"
  BorderBrush="Black" BorderThickness="1" >
  <StackPanel Orientation="Vertical">
    <Button Content="A Button" Opacity="1" />
    <Button Content="Rotated Button">
      <Button.RenderTransform>
        <RotateTransform Angle="45" />
      </Button.RenderTransform>
    </Button>
    <Button Content="A Button" Opacity="1" />
  </StackPanel>
</Border>

En el ejemplo siguiente se usa también un objeto RotateTransform para girar un botón 45 grados en el sentido de las agujas del reloj, pero también se establece la propiedad RenderTransformOrigin del botón en (0,5, 0,5). El valor de la propiedad RenderTransformOrigin es relativo al tamaño del botón. Como consecuencia, la rotación se aplica al centro del botón, en lugar de a su esquina superior izquierda. La ilustración siguiente muestra el resultado de la transformación.

Rotación de 45 grados en el sentido de las agujas del reloj alrededor del centro

<Border Margin="30"   
  HorizontalAlignment="Left" VerticalAlignment="Top"
  BorderBrush="Black" BorderThickness="1">
  <StackPanel Orientation="Vertical">
    <Button Content="A Button" Opacity="1" />
    <Button Content="Rotated Button"
      RenderTransformOrigin="0.5,0.5">
      <Button.RenderTransform>
        <RotateTransform Angle="45" />
      </Button.RenderTransform>
    </Button>
    <Button Content="A Button" Opacity="1" />
  </StackPanel>
</Border>

En el ejemplo siguiente se utiliza la propiedad LayoutTransform en lugar de la propiedad RenderTransform para girar el botón. Esto hace que la transformación afecte al diseño del botón, con lo que el sistema de diseño realiza un paso completo. Como consecuencia, se gira el botón y, después, cambia de posición porque su tamaño ha cambiado. La ilustración siguiente muestra el resultado de la transformación.

Uso de LayoutTransform para girar el botón

<Border Margin="30"   
 HorizontalAlignment="Left" VerticalAlignment="Top"
 BorderBrush="Black" BorderThickness="1">
  <StackPanel Orientation="Vertical">

    <Button Content="A Button" Opacity="1" />   
    <Button Content="Rotated Button">
      <Button.LayoutTransform>
        <RotateTransform Angle="45"  />
      </Button.LayoutTransform>
    </Button>   
    <Button Content="A Button" Opacity="1" />
  </StackPanel>
</Border>

Animar transformaciones

Dado que heredan de la clase Animatable, las clases Transform se pueden animar. Para animar una clase Transform, aplique una animación de un tipo compatible a la propiedad que desea animar.

En el ejemplo siguiente se usan Storyboard y DoubleAnimation con RotateTransform para hacer que un Button vaya girando hasta alcanzar su posición al hacer clic en él.

<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  Title="Button Animated RotateTransform Example"
  Background="White" Margin="50">
  <StackPanel>



    <Button Content="A Button"
      RenderTransformOrigin="0.5,0.5">
      <Button.RenderTransform>
        <RotateTransform x:Name="AnimatedRotateTransform" Angle="0" />
      </Button.RenderTransform>
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation 
                Storyboard.TargetName="AnimatedRotateTransform"
                Storyboard.TargetProperty="Angle" 
                To="360" Duration="0:0:1" FillBehavior="Stop" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>

  </StackPanel>
</Page>

Para obtener el ejemplo completo, vea Ejemplo 2-D Transforms. Para obtener más información sobre animaciones, vea Información general sobre animaciones.

Características de elementos Freezable

Como hereda de la clase Freezable, la clase Transform proporciona varias características especiales: los objetos Transform pueden declararse como recursos, compartirse entre varios objetos, convertirse en objetos de sólo lectura para mejorar el rendimiento, clonarse y convertirse en seguros para subprocesos. Para obtener más información sobre las diferentes características que proporcionan los objetos Freezable, vea Información general sobre objetos Freezable.

Vea también

Tareas

Ejemplo 2-D Transforms

Referencia

Transform

Matrix

Otros recursos

Temas "Cómo..." de transformaciones