WPF: how to make an editable path

Question

I was wondering if anyone could help me in solving this problem:

I need to create a path by clicking a few points on the canvas, and these points will be added to the geometry of the path. After completing the path, the user can "Slide" or "Move control vertices" (anchors) of the path to adjust the shape of the path.

I figured out how to draw a lasso-style path, but how can I let the user select and move one point on the path?

Answer 1

You will need to develop a data structure for storing point data so that it can be easily requested and processed. The Path object may be sufficient for this, but consider moving it to another object to present a more domain-specific interface.

You will need to detect mouse events in Canvas and click the test for all the vertices in the path.

A hit test is a function that gives you a link to one point in the path closest to the mouse coordinate, or null if the click is too far from any point that is considered a “hit.” The result check function becomes a low-level construct from which you can Create more interesting editing operations.

For example, you can save a bool for each waypoint indicating whether a point is selected. When you drag the mouse with the button down, you can drag all the selected points by moving their data in the data structure mentioned earlier.

Answer 2

I would try the following:

• In C #, specify an ObservableCollection<Point> or, possibly.
• From this collection, through data binding, I would draw Path and get its geometry from the collection, somehow;
• At the top of the path layer, I would add an itemContainer of some kind, setting the ItemTemplate as System.Windows.Controls.Primitives.Thumb (a control that handles drag and drop), using a ControlTemplate with an Ellipse and DataTrigger form, changing their appearance based on that that they were highlighted or not. ItemsSource will also be bound to the collection.

Performing this, for example, you will conduct a test to highlight its points, which will switch to the visibility of the ItemsContainer (and, thus, to testing).

With them, you can use regular events such as Drag and Drop, MouseMove, etc. directly using hit-test.