[ACCEPTED]-how to have arrow symbol on a line in C#/WPF?-wpf

Thanks for all your help and support. I 1 have resolved my problem as below::

private static Shape DrawLinkArrow(Point p1, Point p2)
{
    GeometryGroup lineGroup = new GeometryGroup();
    double theta = Math.Atan2((p2.Y - p1.Y), (p2.X - p1.X)) * 180 / Math.PI;

    PathGeometry pathGeometry = new PathGeometry();
    PathFigure pathFigure = new PathFigure();
    Point p = new Point(p1.X + ((p2.X - p1.X) / 1.35), p1.Y + ((p2.Y - p1.Y) / 1.35));
    pathFigure.StartPoint = p;

    Point lpoint = new Point(p.X + 6, p.Y + 15);
    Point rpoint = new Point(p.X - 6, p.Y + 15);
    LineSegment seg1 = new LineSegment();
    seg1.Point = lpoint;
    pathFigure.Segments.Add(seg1);

    LineSegment seg2 = new LineSegment();
    seg2.Point = rpoint;
    pathFigure.Segments.Add(seg2);

    LineSegment seg3 = new LineSegment();
    seg3.Point = p;
    pathFigure.Segments.Add(seg3);

    pathGeometry.Figures.Add(pathFigure);
    RotateTransform transform = new RotateTransform();
    transform.Angle = theta + 90;
    transform.CenterX = p.X;
    transform.CenterY = p.Y;
    pathGeometry.Transform = transform;
    lineGroup.Children.Add(pathGeometry);

    LineGeometry connectorGeometry = new LineGeometry();
    connectorGeometry.StartPoint = p1;
    connectorGeometry.EndPoint = p2;
    lineGroup.Children.Add(connectorGeometry);
    System.Windows.Shapes.Path path = new System.Windows.Shapes.Path();
    path.Data = lineGroup;
    path.StrokeThickness = 2;
    path.Stroke = path.Fill = Brushes.Black;

    return path;
}

Thanks,

Moon

I just drew two with Expression Blend 4's 1 arrow shapes which created this:

     <Window
        ...
        xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing" ... /> 

    <ed:BlockArrow Height="8" Margin="119,181,169,0" Orientation="Left" Stroke="Black" VerticalAlignment="Top" />
    <ed:LineArrow Fill="#FFF4F4F5" Height="1" Margin="119,117,169,0" Stroke="#FF027602" VerticalAlignment="Top" BendAmount="0" StartCorner="TopRight" StrokeThickness="2"/>

You can use the Canvas control to represent the 5 arrow,

<Canvas Margin="5" Width="60" Height="20">            
    <Line X1="10" Y1="10" X2="50" Y2="10" Stroke="Black" 
                  StrokeThickness="2" StrokeDashCap="Round" StrokeEndLineCap="Round" StrokeStartLineCap="Round"/>
    <Line X1="35" Y1="10" X2="30" Y2="5" Stroke="Black" 
                  StrokeThickness="2" StrokeDashCap="Round" StrokeEndLineCap="Round" StrokeStartLineCap="Round"/>
    <Line X1="35" Y1="10" X2="30" Y2="15" Stroke="Black" 
                  StrokeThickness="2" StrokeDashCap="Round" StrokeEndLineCap="Round" StrokeStartLineCap="Round"/>
</Canvas>

If you want to create this at runtime, you 4 can create the Canvas in the code behind class.

Note 3 that the above sample, does not actually 2 follow arrow sign should be at the 3rd part of the line rule, you may have to modify the 1 coordinates of the line accordingly.

I would suggest you use Path geometry. Have 3 a look at this sample (maybe you already 2 have) but it has similar requirements as 1 yours, http://www.codeproject.com/KB/WPF/WPFDiagramDesigner_Part4.aspx

I would do this by using an image of the 12 arrow you want. Make a quick photoshop .jpg 11 or .png to use for the default arrow image 10 and then just scale it based on the distance 9 between points A and B. Rotation is a little 8 more complicated, but if you've taken a 7 basic trig course it should still be pretty 6 easy.

The other way you could go about this 5 is by drawing pixels. This is typically 4 much more difficult, and the code for determining 3 the direction of the arrow in this scenario 2 is even more difficult. Again, I suggest 1 the method above.

You can use the Line class to draw the line 13 segments that compose your arrow. For example, you 12 could draw one long line from A to B and 11 two smaller, angled lines to draw the head 10 pointing towards B.

The maths involved to 9 find the appropriate line positions should 8 not be too difficult. For the head, just 7 settle on a size for the two segments and 6 draw them near B angled by 30 degrees or 5 so. Let me know if you have any issue.

The 4 problem with the image technique is that 3 the head will stretch with the length of 2 the arrow. You would have to divide the 1 bitmap between the head and the rest.