Paths and Relative Positioning

Question

Hello everyone... once again I apologize if this answer has been staring me in the face all this time and I was too silly to see it.  I'm looking to use a Path element, but I am interested in using relative path segments instead of absolute.  I was hoping to do this so that once a path element had been setup, it would be easier to drag/drop it around [only having to change the starting point and not having to recalculate all segments].

For example, I may want to do something like this:
<Path Stroke="Green" StrokeThickness="3" Data="M 150,250 c 100,25 400,350 400,175 h 280" />  //Lower case c, h etc...

How would I go about setting this up in C#?  All the examples I have seen seem to have been using absolute coords. 

Thank you in advance!

 

Answer 1

Actually, after testing a quick drag drop implementation, it appears that even with absolute positioning, changing the Canvas.Left/Top will correctly move all the path segments.  Can anyone verify that this is the case?

Also, I am still curious to know if one could setup relative positioning in the C# code.  

Answer 2

i dont think there is a way unless you cheat by creating xaml via code behind. look at this post. http://silverlight.net/forums/p/21621/75885.aspx

 

Answer 3

Correct, the path data is absolute with respect to the path element, but the path element is relative to it's parent.  So if you were to set the left/top of the path element to 100/100, the path data would appear an extra 100 pixels down and to the right.

M 150,250 tells the path to start at the path element's x = 150, y = 250.  Where "c" indicates curve data, and "h" indicates a horizontal line, etc.

Answer 4

What if you used PathGeometry rather than a Path object?  You can still do it in XAML but you can also do it in codebehind and using PathFigures (children of the PathGeometry) you have a much tighter control over each part that makes up the path.  I think the parser converts the PathGeometry to a Path when it runs.

http://msdn.microsoft.com/en-us/library/system.windows.media.pathgeometry(VS.95).aspx

 Thanks,

Todd

Answer 5

I had created a drawing app using paths and path figures, so you can take a look at that too. Here is some sample code:

  

        void canvasBlackboardArea_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            mouseDownPoint = e.GetPosition(this.canvasBlackboardArea);

            PathFigure myPathFigure = new PathFigure() { StartPoint = new Point(0, 0) };

            LineSegment myLineSegment = new LineSegment() { Point = new Point(0, 0) };

            PathSegmentCollection myPathSegmentCollection = new PathSegmentCollection();
            myPathSegmentCollection.Add(myLineSegment);

            myPathFigure.Segments = myPathSegmentCollection;

            PathFigureCollection myPathFigureCollection = new PathFigureCollection();
            myPathFigureCollection.Add(myPathFigure);

            PathGeometry myPathGeometry = new PathGeometry() { Figures = myPathFigureCollection };

            Path myPath = new Path();
            myPath.Stroke = new SolidColorBrush(Colors.Black);
            myPath.StrokeThickness = 3;

            myPath.Data = myPathGeometry;


            canvasBlackboardArea.Children.Add(myPath);
            //blackboard.Children.Add(myPath);

            myPath.SetValue(Canvas.TopProperty, mouseDownPoint.Y);
            myPath.SetValue(Canvas.LeftProperty, mouseDownPoint.X);

            //blackboard.MouseMove += new MouseEventHandler(blackboard_MouseMove);
            canvasBlackboardArea.MouseMove += new MouseEventHandler(canvasBlackboardArea_MouseMove);
        }

        void canvasBlackboardArea_MouseMove(object sender, MouseEventArgs e)
        {
            //Path path = blackboard.Children[blackboard.Children.Count - 1] as Path;

            Path path = canvasBlackboardArea.Children[canvasBlackboardArea.Children.Count - 1] as Path;

            if (path != null)
            {
                PathGeometry pathgeometry = path.Data as PathGeometry;
                PathFigure figure = pathgeometry.Figures[0] as PathFigure;
                Point p = e.GetPosition(this.canvasBlackboardArea);

                //p.Offset(-mouseDownPoint.X, -mouseDownPoint.Y);

                p.X -= mouseDownPoint.X;
                p.Y -= mouseDownPoint.Y;

                LineSegment myLineSegment = new LineSegment() { Point = p };
                //figure.IsClosed = true;
                figure.Segments.Add(myLineSegment);
            }
        }

 

I have a question on the forum regarding a small bug that I think is on said drawing applet not related to Paths and Path figures, but you can download the entire code from this thread.

http://silverlight.net/forums/t/27265.aspx

 

Answer 6

Wow, thank you everyone for such quick and helpful feedback!

I will have a look at your blackboard application for sure, and see if I can learn from it.  I am doing something similar - a drag/drop graphics editor and part of it must support a drawing feature.

Answer 7

You can mark multiple posts as answers!

Yea, take a look at the drawing program, let me know if the link is dead and I can reupload it. There are two different versions, Ken Watts created something using the Line object, I used Paths. They both work fine, but my version is kinda wierd, if I dont have a random textbox (which is collapsed so you wont see it), the drawings dont draw properly on the screen. I think its a bug because the code works just fine on previous versions of SL2.

If you figure out why this is the case, let me know.