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