Cómo: Especificar el origen de una transformación utilizando valores relativos

En este ejemplo se muestra cómo utilizar valores relativos para especificar el origen de una propiedad RenderTransform que se aplica a un objeto FrameworkElement.

Al girar, escalar o sesgar un objeto FrameworkElement utilizando la propiedad RenderTransform, la configuración predeterminada aplica la transformación a la esquina superior izquierda del elemento. Si desea girar, escala o sesgar desde el centro del elemento, puede compensar estableciendo el centro de la transformación en el centro del elemento. Sin embargo, para esa solución es necesario que conozca el tamaño del elemento. Una manera más fácil de aplicar una transformación al centro de un elemento es establecer su propiedad RenderTransformOrigin en (0.5, 0.5), en lugar de establecer un valor de centro en la propia transformación.

Ejemplo

En el ejemplo siguiente se utiliza un objeto RotateTransform para girar un control 45 grados Button en el sentido de las agujas del reloj. Dado que el ejemplo no especifica un centro, el botón gira sobre el 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 para el ejemplo siguiente.

Una rotación de 45 grados en el sentido de las agujas del reloj utilizando la propiedad RenderTransform

<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 Button 45 grados en el sentido de las agujas del reloj; sin embargo, también se establece en el ejemplo la propiedad RenderTransformOrigin del botón en (0,5, 0,5). Como consecuencia, la rotación se aplica al centro del botón, en lugar de a la esquina superior izquierda.

La ilustración siguiente muestra el resultado de la transformación para el ejemplo siguiente.

Una rotación de 45 grados utilizando la propiedad RenderTransform con un valor de RenderTransformOrigin de (0,5, 0,5)

<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>

Para obtener más información sobre la transformación de objetos, FrameworkElement, vea Información general sobre transformaciones.

Vea también

Referencia

Transform

Conceptos

Información general sobre transformaciones

Otros recursos

Temas "Cómo..." de transformaciones