0

I need to rotate children elements with respect to the center of the parent element in WPF. Imagine you have a map and are looking at Chicago and it is in the center of your screen. You want to be able to rotate the map around the center of your screen.

The user can pan anywhere on the map, but the rotation is always with respect to the center of the parent element.

Originally I did a RotateTransform on the parent element and it worked great, but after rotation the panning feature of the parent didn't work right. (If you rotated 180 degrees then panned right the children elements would move left instead of right.) So the only way I could think of to rotate the map was to rotate the children elements with respect to the center of the parent.

To set the center of rotation on the RotateTransform I found the center of the parent and used TranslatePoint:

var p = new Point(ContainerWidth / 2, ContainerHeight / 2);
var container = VisualTreeHelper.GetParent(_visualContainer) as UIElement;
var p2 = _visualContainer.TranslatePoint(p, container);
CenterOfRotation = new Point(p2.X / 2, p2.Y / 2);

I somewhat new to WPF and am at a loss as to what to do to get this map rotating correctly.

Fred
  • 1,054
  • 1
  • 12
  • 32
  • You should try to solve the original problem and just perform the translation (panning) and rotation of the parent in proper order. First translate, then rotate. – Clemens May 29 '14 at 06:53
  • Yes, I am already translating then rotating – Fred May 30 '14 at 03:30

1 Answers1

0

So after many hours of searching and working I figured out that the source of the problem was panning of the map and not the rotation of the map.

Because the map was rotated and then the user pans the panning points needed to be rotated when doing the panning calculations. I realize as I am writing this that perhaps this is what Clemens was talking about, to do the panning first and then rotate the map back to the desired angle.

Fred
  • 1,054
  • 1
  • 12
  • 32