I recently had the need to dynamically draw a shape in XAML from a specific X,Y offset within another control. This is straightforward... unless the control is Rotated, Scaled, or otherwise transformed. Since the original X,Y position is no longer in the same spot after a transform, we need to use some method to calculate the new X,Y position within the control.

Luckily, all UIElement's contain a TransformToVisual method, which can calculate a point's location within a control after all transforms (such as Scale, Rotate, etc) are applied.

Consider the following sample: we have two separate Canvas elements (the wheels) which are Rotating as part of an animation. And we want to draw a line from an offset point within each Wheel Canvas, and update that line as the wheels rotate:

[VIEW DEMO] | [DOWNLOAD SOURCE]

In order to pull this effect off, we can use TransformToVisual on each Wheel Canvas to calculate the new X,Y offset relative to the Parent Canvas (LayoutRoot) like so:

Point pt1 = new Point(50, 25);

GeneralTransform genTransform1 = cnvWheel1.TransformToVisual(LayoutRoot);

Point pt1Transformed = genTransform1.Transform(pt1);

Point pt2 = new Point(50, 25);

GeneralTransform genTransform2 = cnvWheel2.TransformToVisual(LayoutRoot);

Point pt2Transformed = genTransform2.Transform(pt2);

lineJoin.X1 = pt1Transformed.X;

lineJoin.Y1 = pt1Transformed.Y;

lineJoin.X2 = pt2Transformed.X;

lineJoin.Y2 = pt2Transformed.Y;

That's it! TransformToVisual is a handy method which I'll be keeping in my little bag of XAML tricks.