The X value of the Point that specifies the transform origin. Typically this is between 0 and 1.
The Yvalue of a Point that specifies the transform origin. Typically this is between 0 and 1.
The origin point of the render transform. The default value is a Point with value 0,0.
RenderTransformOrigin enables you to create or change the effect of a transform on a particular element without having to alter the specifics of the RenderTransform transform. The Point value you specify for RenderTransformOrigin is not based on actual pixel measures. Instead, it is a logical point, where a value of 0,0 refers to the top left corner of the overall UIElement render area, and 1,1 refers to the bottom right. The value is then evaluated into an X,Y coordinate by factoring it into the current coordinate space of the UIElement.
Some transform types have their own properties for specifying the origin of the transform. For example, RotateTransform has CenterX and CenterY. When you're working with a UIElement, visual design tools sometimes hide these other properties so that you only use RenderTransformOrigin for all transform origin changes and leave transform-specific origins as the defaults. Tools might also apply all transform effects to a single CompositeTransform value for RenderTransform, rather than defining XAML elements for the specific transforms and making a TransformGroup. If you're writing your own XAML or defining transforms in code, you might consider following these same practices so that you always use RenderTransformOrigin rather than the transform-specific origin values if you're applying transforms for RenderTransform, otherwise the values will offset each other.
A common technique is to set RenderTransformOrigin to 0.5,0.5, which places the origin at the element center. You could then apply a RotateTransform to rotate the element around the center.
Some of the same visual effects that you can produce with RenderTransform and RenderTransformOrigin can also be achieved with Projection and a PlaneProjection. For example, you can rotate a UIElement around its center by changing PlaneProjection.RotationZ.
This XAML example shows how to set RenderTransformOrigin on the element in the initial XAML. An animation that runs on an initially default CompositeTransform can use the RenderTransformOrigin to modify both the scale and rotate transforms to apply to the circles's center rather than the default 0,0 coordinate origin. This makes it appear as if the circle is spinning around its center and shrinking in place.
<Ellipse x:Name="e1" RenderTransformOrigin=".5,.5" Height="100" Width="100" Loaded="e1_Loaded_1"> <Ellipse.Fill> <LinearGradientBrush> <GradientStop Color="Red" Offset="0"/> <GradientStop Color="Green" Offset="1"/> </LinearGradientBrush> </Ellipse.Fill> <Ellipse.RenderTransform> <CompositeTransform /> </Ellipse.RenderTransform> <Ellipse.Resources> <Storyboard x:Name="esb1" > <DoubleAnimation RepeatBehavior="3x" Duration="0:0:3" From="0" To="360" Storyboard.TargetName="e1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" /> <DoubleAnimation RepeatBehavior="1x" Duration="0:0:7" From="1" To="0" Storyboard.TargetName="e1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" /> <DoubleAnimation RepeatBehavior="1x" Duration="0:0:7" From="1" To="0" Storyboard.TargetName="e1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" /> </Storyboard> </Ellipse.Resources> </Ellipse>
Minimum supported client
Minimum supported server
|Windows Server 2012|
- 3-D effects for Windows Store apps using XAML
- XAML two-dimensional transforms sample