使用 XAML 绘制箭头

Question

我不知道如何用XAML画箭头。我暂时没有任何代码。

有人可以用 XAML 代码帮我抽奖吗？

感谢您的帮助。

Answer 1

您可以使用 TextBlock (http://xahlee.info/comp/unicode_arrows.html)

<TextBlock Text="&#x2794;" />

或Path (https://msdn.microsoft.com/en-us/library/system.windows.shapes.path%28v=vs.110%29.aspx)

<Path Stroke="Black" Data="M 10 0 L 16 4 L 10 8 M 0 4 L 16 4" />

也许这个工具对你有用PathViewer

Answer 2

我只是通过设置点手画一个，然后目测调整点：

<Path Stretch="Fill" Fill="LimeGreen" 
              Data="M
              0,115   95,115   //p1, p2  (when really use remove these comments)
              65,90   85,90    //p3, p4
              120,120          //p5
                      85,150  65,150  //p6, p7
                      95,125  0,125   //p8, p9
              Z"
              HorizontalAlignment="Center"  Width="60" Height="60" />

可以调整width/height，基本上p1,p2,p3,p4和p6,p7,p8,p9是对称的，而Data可以省略描述和逗号，像这样：

Data="M 0 115 95 115 65 90 85 90 120 120 85 150 65 150 95 125 0 125 Z"

结果：

此外还有一种旋转箭头的方法，下面的示例将另一个右箭头旋转 180 度，变成左箭头：

    <Path Stretch="Fill" Fill="LimeGreen" 
          Data="M 0,110 70,110 45,90 75,90 120,120 75,150 45,150 70,130 0,130 Z"
          HorizontalAlignment="Right"  Width="30" Height="24" Margin="0,0,2,0"
          RenderTransformOrigin=".5,.5">
        <Path.RenderTransform>
            <RotateTransform Angle="180" />
        </Path.RenderTransform>
    </Path>

Answer 3

恰好有一个很好的第三方库，它可以免费使用，并且可能适合一些需要箭头作为行尾的用例。

完整代码太长，无法在此处重现，但我已在下面链接到它。我找不到此代码的任何其他存储库（例如 Nuget、Github 等）

文章：Lines with Arrows, Charles Petzold, April 18, 2007, New York, N.Y.

简要摘录：

The Arrowheads.zip file contains a demo program and two classes named ArrowLine and ArrowPolyline that derive from Shape ...

The ArrowLine class derives from ArrowLineBase and basically duplicates the Line class by defining X1, Y1, X2, and Y2 properties; ArrowPolyline duplicates the Polyline class by defining a Points property.

...

Because the arrows are basically part of the line, they are affected by all the properties that affect the line, such as Stroke, StrokeThickness, StrokeStartLineCap, and StrokeLineJoin. If you set IsArrowClosed to true, the Fill property comes into play; the arrowhead will look most normal if Fill is set to the same brush as Stroke.

上面提到的类是可以从XAML开始使用的控件（用C#写的）。简单示例：

xmlns:p="clr-namespace:Petzold.Media2D;assembly=Arrowheads"

...
    
<p:ArrowLine
    X1="0"
    Y1="0"
    X2="148"
    Y2="0"
    Canvas.Top="18"
    Canvas.Left="26"
    />

示例输出：

(http://www.charlespetzold.com/blog/2007/04/Arrowheads.png)

请注意，Charles 非常慷慨地提供了此代码以供重用，如所述 in his FAQ:

All the code that I write and publish is free to use in your software projects (whether personal or commercial) without restriction.

（常见问题解答确实提到了一些关于出版物的限制，因此您应该完整阅读）。

Answer 4

对于一个简单的箭头，这里有一个只使用一对线的技巧。第一条线是箭头的主轴，第二条线是形成箭头的零长度线。轴没有帽，箭头是纯粹的帽。整个箭头可以通过旋转封闭的canvas来旋转，我觉得这很有用。

<Canvas Width="75" Height="50">
    <Line X1="0" Y1="25" X2="55" Y2="25" Stroke="#ffffff" StrokeThickness="20"/>
    <Line X1="50" Y1="25" X2="50" Y2="25" Stroke="#ffffff" StrokeThickness="50" StrokeEndLineCap="Triangle"/>
</Canvas>

使用 XAML 绘制箭头

Drawing arrow with XAML

xaml

drawing