How do I position an ellipse on a Silverlight Grid?

Question

I am creating a silverlight application which will allow you to click at two places on the screen and will draw an ellipse whose major axis starts and ends at the click locations. The clickable area is a Silverlight Grid control. Currently:

When you first click, I am:

1. Dropping a marker at the click point.
2. Creating an ellipse and parenting it to the Grid.
3. Creating and setting an AngleTransform on the ellipse.

As you move the mouse, I am:

1. Calculating the distance to the first click point.
2. Setting the Width of the ellipse to this length.
3. Calculating the angle of a line to the click point and the Grid's X-Axis.
4. Setting the Ellipse's AngleTransform Angle to this angle.

So far, so good. The ellipse is displayed, and its length and angle of rotation follow the mouse as it moves.

However, the major axis of the ellipse is offset from the click point. How do I position the Ellipse so its major axis starts at the click point and ends at the current mouse position?

Answer 1

The answer turned out to be:

• Don't use System.Windows.Shapes.Ellipse. Instead use System.Windows.Shapes.Path and embed an EllipseGeometry in it.

• Also set the Path.RenderTransform to a RotateTransform.

• Don't set Width or Height or Stretch on the Path. Instead set the Center, RadiusX, and RadiusY of the EllipseGeometry.

• Finally, set the RotateTransform.Angle to the angle of intersection of the Ellipse major-axis and the X-axis (the ArcTan of the major-axis slope). Also set RotateTransform.CenterX and CenterY to the EllipseGeometry Center.

Answer 2

May be it's a good idea to use Canvas instead of grid for your application, than you will be able to set up shapes coordianates directly.

Answer 3

If I had to guess (code would help), I would think that you could add padding from the difference of the beginning click point to the left side of the grid, which should help move it over by the offset.