UIElement.RenderTransformOrigin Property
Definition
Important
Some information relates to prerelease product that may be substantially modified before it’s released. Microsoft makes no warranties, express or implied, with respect to the information provided here.
Gets or sets the origin point of any possible render transform declared by RenderTransform, relative to the bounds of the UIElement.
public:
property Point RenderTransformOrigin { Point get(); void set(Point value); };Point RenderTransformOrigin();
void RenderTransformOrigin(Point value);public Point RenderTransformOrigin { get; set; }var point = uIElement.renderTransformOrigin;
uIElement.renderTransformOrigin = point;Public Property RenderTransformOrigin As Point<uiElement RenderTransformOrigin="x,y"/>
Property Value
The origin point of the render transform. The default value is a Point with value 0,0.
Examples
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.
Note
To start the animation you'd need to retrieve it from Resources and call Begin; that code is not shown.
<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>
Remarks
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.
For some transforms, the origin doesn't matter. For example the RenderTransformOrigin won't change the behavior of a TranslateTransform applied to the RenderTransform property.
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.
Changing FlowDirection to RightToLeft changes the meaning of the X coordinate of a RenderTransformOrigin for a UIElement; 0 will be the right edge.
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.