locked
[UWP][XAML]How to draw triangle arrow head in LineGeomerty line RRS feed

  • Question

  • Hi,

    >>>>>>>>>>>>>>>>>>>>>>>>>>

    XAML code:

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Button Content="clcik" Click="Button_Click"/>
            <Canvas Name="Canvas_" Width="100" Height="100" Background="Red" Margin="100,50,50,50">
                <Path Name="path_" Stroke="Black" />
            </Canvas>
        </Grid>

    C# code:

      private void Button_Click(object sender, RoutedEventArgs e)
            {

                GeometryGroup geometryGroup = new GeometryGroup();
                LineGeometry line = new LineGeometry();
                line.StartPoint = new Windows.Foundation.Point(10, 10);
                line.EndPoint = new Windows.Foundation.Point(50, 50);
                geometryGroup.Children.Add(line);
                path_.Data = geometryGroup;
               
            }

    >>>>>>>>>>>>>>>>>>>>>>>>>>

    Im Using UWP App.Here, how can i add triangle arrow head for line in C#(As picture). Is there any property available.

    Thanks.





    Thursday, June 8, 2017 4:34 AM

Answers

  • Hi Jackie_Sam,

    Is there any updates about this thread?

    Best regards,
    Cole


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.



    Tuesday, June 20, 2017 5:34 AM

All replies

  • Hi Jackie_Sam,

    Thank you for posting here.

    According to your question is more related to UWP, I will move it to Developing Universal Windows apps forum for suitable support.

    The Visual C# discuss and ask the C# programming language, IDE, libraries, samples and tools.

    If you have some grammar or code errors, please feel free to contact us. We will try our best to give you a solution.

    Thanks for your understanding and cooperation.

    Best Regards,

    Wendy


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Friday, June 9, 2017 2:39 AM
  • Hello,
    If you want to draw it directly in XMAL, you can use the Tool Microsoft Expression Design4
    Download link: https://www.microsoft.com/en-sg/download/details.aspx?id=36180
    1.Draw the shape or path you want(see the following picture)
    2.Select edit and Copy XMAL
    3.Copy to XMAL..
    The code in XMAL like this:

      <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="Layer_1" Width="800" Height="600" Canvas.Left="0" Canvas.Top="0">
                <Path Width="154.118" Height="134.493" Canvas.Left="372.501" Canvas.Top="102.26" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFFFFFF" Data="F1 M 373.001,102.76C 387.116,102.76 399.15,113.418 411.999,119.259C 421.804,123.716 431.934,127.424 441.998,131.258C 452.935,135.425 463.893,139.557 474.996,143.258C 484.9,146.559 495.122,148.864 504.995,152.257C 511.141,154.37 517.526,156.242 522.994,159.757C 524.875,160.966 526.608,163.607 525.994,165.757C 525.307,168.16 522.23,169.139 519.994,170.256C 516.173,172.167 511.976,173.208 507.995,174.756C 492.816,180.659 477.041,184.898 461.497,189.755C 441.821,195.904 421.388,201.933 404.5,213.754C 394.903,220.472 387.546,230.226 377.501,236.253"/>
            </Canvas>


    If you want to implement it with code in .cs, you can refer to the following code:

    private void drawLineArrow(Point startPoint , Point endPoint)
            {
                GeometryGroup geometryGroup = new GeometryGroup();
                //line
                LineGeometry line = new LineGeometry();
                line.StartPoint = startPoint;
                double length = Math.Sqrt(Math.Abs(startPoint.X - endPoint.X) * Math.Abs(startPoint.X - endPoint.X) +
                    Math.Abs(startPoint.Y - endPoint.Y) * Math.Abs(startPoint.Y - endPoint.Y));
                Point EndPoint = new Point(startPoint.X + length, startPoint.Y);
                line.EndPoint = new Point(EndPoint.X - 20 , EndPoint.Y);
                //triangle
                PathGeometry triangle = new PathGeometry();
                PathFigureCollection figures = new PathFigureCollection();
    
                PathFigure figure = new PathFigure();
                figure.StartPoint = new Point(EndPoint.X-20, EndPoint.Y-10);
                PathSegmentCollection segemnt1 = new PathSegmentCollection();
                LineSegment line1 = new LineSegment();
                line1.Point = new Point(EndPoint.X -20, EndPoint.Y + 10);
                segemnt1.Add(line1);
                figure.Segments = segemnt1;
                figures.Add(figure);
    
                PathFigure figure2 = new PathFigure();
                figure2.StartPoint = new Point(EndPoint.X-20, EndPoint.Y + 10);
                PathSegmentCollection segemnt2 = new PathSegmentCollection();
                LineSegment line2 = new LineSegment();
                line2.Point = new Point(EndPoint.X, EndPoint.Y);
                segemnt2.Add(line2);
                figure2.Segments = segemnt2;
                figures.Add(figure2);
    
                PathFigure figure3 = new PathFigure();
                figure3.StartPoint = new Point(EndPoint.X, EndPoint.Y);
                PathSegmentCollection segemnt3= new PathSegmentCollection();
                LineSegment line3 = new LineSegment();
                line3.Point = new Point(EndPoint.X -20, EndPoint.Y - 10);
                segemnt3.Add(line3);
                figure3.Segments = segemnt3;
                figures.Add(figure3);
    
                triangle.Figures = figures;
                geometryGroup.Children.Add(line);
                geometryGroup.Children.Add(triangle);
                path_.Data = geometryGroup;
                //rotate
                RotateTransform form = new RotateTransform();
                form.CenterX = startPoint.X;
                form.CenterY = startPoint.Y;
                //calculate the angle 
                double angle = Math.Asin(Math.Abs(startPoint.Y - endPoint.Y)/length);
                double angle2 = 180 / Math.PI * angle;
                //orientation
                if (endPoint.Y> startPoint.Y)
                {
                    angle2 = (endPoint.X > startPoint.X) ? angle2 : (180 - angle2);
                }
                else
                {
                    angle2 = (endPoint.X > startPoint.X) ? -angle2 : -(180 - angle2);
                }
                form.Angle = angle2;
                path_.RenderTransform = form;
            }

    And call it with this code :

    this.drawLineArrow( new Point(50, 50), new Point(70, 10));

    Best regards,
    Cole

    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.




    Friday, June 9, 2017 8:30 AM
  • Hi Jackie_Sam,

    Is there any updates about this thread?

    Best regards,
    Cole


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.



    Tuesday, June 20, 2017 5:34 AM
  • Hi Cole Xia

    Your solution works perfectly as expected. I should I have marked this as the answer, unfortunately I am not the questioner. 

    Thanks,

    Meikandan


    Meikandan

    Wednesday, January 10, 2018 1:10 PM