Compartir a través de


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

Actualización: noviembre 2007

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
Botón transformado mediante 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 utiliza también un objeto RotateTransform para girar 45 grados un control Button en el sentido de las agujas del reloj; sin embargo, en este ejemplo se establece la propiedad RenderTransformOrigin del botón en (0,5, 0,5).

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)
Botón transformado alrededor de su 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>

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

Vea también

Conceptos

Información general sobre transformaciones

Referencia

Transform

Otros recursos

Temas "Cómo..." de transformaciones