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

En este ejemplo se muestra cómo usar valores relativos para especificar el origen de un RenderTransform, que se aplica a un FrameworkElement.

Al girar, escalar o sesgar un FrameworkElement mediante la RenderTransform propiedad , el valor predeterminado aplica la transformación a la esquina superior izquierda del elemento. Si desea girar, escalar o sesgar desde el centro del elemento, puede compensar estableciendo el centro de la transformación en el centro del elemento. Sin embargo, esa solución requiere que sepa el tamaño del elemento. Una manera más sencilla de aplicar una transformación al centro de un elemento es establecer su RenderTransformOrigin propiedad en (0,5, 0,5), en lugar de establecer un valor central en la propia transformación.

Ejemplo

En el ejemplo siguiente, se utiliza un RotateTransform para girar un Button 45 grados en sentido horario. Dado que el ejemplo no especifica un centro, el botón gira sobre el punto (0, 0), que es su esquina superior izquierda. RotateTransform se aplica a la RenderTransform propiedad .

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

Una rotación en sentido de las agujas del reloj de 45 grados mediante 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 también se usa un RotateTransform para girar un Button 45 grados en sentido horario; sin embargo, en este ejemplo se establece el RenderTransformOrigin del botón en (0.5, 0.5). Como resultado, la rotación se aplica al centro del botón en lugar de a la esquina superior izquierda.

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

Rotación de 45 grados mediante la propiedad RenderTransform con 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 FrameworkElement de objetos, consulte La introducción a las transformaciones.

Consulte también

• Transform
• información general sobre transformaciones de
• Temas de procedimiento