Información general sobre transformaciones

En este tema se describe cómo usar las clases Transform 2-D 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 objetos 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 estructura Matrix de transformación, que es una colección de tres filas con tres columnas de valores Double.

Nota
Windows Presentation Foundation (WPF) usa matrices por 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

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 ajusta su alto a un factor de 3. 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 Transform 2-D para las operaciones comunes de transformación:

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

Windows Presentation Foundation (WPF) también proporciona transformaciones 3-D. 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.

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 utiliza RotateTransform para girar un elemento Rectangle (un tipo de FrameworkElement) 45 grados sobre su centro predeterminado (0,0). En la siguiente ilustración se muestra el efecto del giro.

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, SkewTransform y ScaleTransform 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 del giro.

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 se utiliza un objeto 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 RotateTransformgira 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 2-D Transforms Sample. Para obtener más información sobre animaciones, vea Información general sobre animaciones.

Características de objetos 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

Referencia

Transform

Matrix

Otros recursos

Temas "Cómo..." de transformaciones

Ejemplo 2-D Transforms