Using TransformToVisual for Custom XAML Animation

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]

more here

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • MisterWong
  • Y!GG
  • Webnews
  • Digg
  • del.icio.us
  • StumbleUpon
  • Reddit
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • XING
This entry was posted in Animation, tutorial and tagged , , . Bookmark the permalink.

Leave a Reply