Question

I am using Silverlight 3.0 + C# + VSTS 2008 + .Net 3.5. I am learning from the following tutorial about TranslateTransform.

http://vbcity.com/blogs/canoz/archive/2010/05/02/beginning-silverlight-translatetransform.aspx

My question is how RenderTransformOrigin works together with TranslateTransform to achieve visual effect? My question is from the following section — section “3. Resizable element and RenderTransformOrigin.”

Answer 1

The result of a translate transform are unaffected by the RenderTransformOrigin.

If you specify that an element should be translated right by 200 px it really doesn’t matter where the origin is currently located.

Example

If you have a rectangle of width 100 and you were to specify the x portion of RenderTransformOrigin` to be 0.5. The origin in x will be 50 pixels into the rectangle (the center) and the location of the left edge relative to the origin will be -50.

If you Translate that in X by 100 the left edge will now be at 50 relative to the origin. Since the origin itself was already at 50 the total distance the left edge will have moved from its original position would be (50 + 50) 100 as you’d expect.

Now change only the RenderTransformOrigin from 0.5 to -0.5. Now the origin will be 50 pixels to the left of the left edge of the rectangle (that is it will be -at 50). The location of left edge of the rectangle relative to the origin will be 50. When translated to its new position it will be at 150 relative to the origin. The total distance the rectangle would have moved from its original position would be (-50 + 150) 100 again as you’d expect.