How to draw a line with arrow and right angle using xaml

Question

Given a start and end point in xaml, I can draw a straight line.

<Grid Padding="40">
    <Path
        x:Name="arcPath"
        Opacity="1"
        StrokeThickness="2"
        Stroke="Red">
        <Path.Data>
            <LineGeometry>
                <LineGeometry.StartPoint >
                    <Point X="0" Y="0"/>
                </LineGeometry.StartPoint>
                <LineGeometry.EndPoint>
                    <Point X="0" Y="100"/>
                </LineGeometry.EndPoint>
            </LineGeometry>
        </Path.Data>
    </Path>
</Grid>

But now I want to add more, like right angle and arrow. How to do it in xaml.

At least for such an arrow, a collection of four points is needed: the beginning, the end, and a point at each corner. Calculate them and set Polyline. Draw a small triangle at the tip using Path. — EldHasp, Jun 08 '21 at 11:39
If you do not need to calculate the trajectory of the line using the predetermined coordinates, and you write all the coordinates by hand in XAML, then there is no problem in creating such an arrow. I would show you exactly how, but your topic is closed and does not accept replies. Make some changes to the question (to override the reason for closing) and ask to open the topic for answers. — EldHasp, Jun 08 '21 at 11:46
Hi, @EldHasp , I tried to create a new one but was closed immediately. But this issue was reopened now. — Vincent, Jun 08 '21 at 12:09

score 1 · Accepted Answer · answered Jun 08 '21 at 12:32

<Grid VerticalAlignment="Center" HorizontalAlignment="Center" >
    <Path StrokeThickness="2"
          Stroke="Red"
          Fill="{Binding Stroke, RelativeSource={RelativeSource Self}}">
        <Path.Data>
            <PathGeometry>
                <PathFigure StartPoint="0 0" IsFilled="False">
                    <LineSegment Point="20 0"/>
                    <LineSegment Point="20 100"/>
                    <LineSegment Point="0 100"/>
                </PathFigure>
                <PathFigure StartPoint="0 100" IsClosed="True">
                    <LineSegment Point="10 95"/>
                    <LineSegment Point="10 105"/>
                </PathFigure>
            </PathGeometry>
        </Path.Data>
    </Path>
</Grid>

How to draw a line with arrow and right angle using xaml

1 Answers1