如何在边框上添加箭头？

Question

我尝试了很多方法，现在已经接近成功了...

我有一个边框，想要一个箭头朝上延伸（完成后我也会对每个方向的边框进行同样的处理）。这是目前为止我做的：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Polygon Points="5,0 10,10, 0,10" Stroke="Black" Fill="White" Grid.Row="0" HorizontalAlignment="Center" Margin="0,0,0,-2" Panel.ZIndex="10" StrokeThickness="2" StrokeDashArray="1 0"  />
    <Border Background="#00000000" BorderBrush="Black" BorderThickness="2" CornerRadius="10" Grid.Row="1">

多边形创建了一个完美的箭头，但是三角形的底部边框是黑色的，我想让它变成白色。不确定如何使其变为白色，看起来像白色背景渗透到箭头中。目前的效果如下所示： 我想要去掉下面的黑线。如果有一个完全不同的方法，我很感兴趣尝试一下 :)

- pingu2k4

---

你想要箭头下方的那个白色区域，我是说矩形和箭头相交的地方。 - DeshDeep Singh

是的 - 我希望它看起来像一条边框，指向上方，就像箭头一样。 - pingu2k4

一种新的方式：Microsoft Expression Blend。您可以尝试使用路径对象。 - Ugur

是的，也许创建一个带有白色三角形和黑线的路径会是更好的解决方案。 - almulo

可能是重复的问题：WPF/Silverlight：每个边缘是否可以有不同的描边颜色？ - goobering

请查看我的答案：https://dev59.com/A43da4cB1Zd3GeqP15IA#31724470 - Ugur

Answer 1

这有点棘手。在一个设置了ClipToBounds为true的Grid内包裹你的三角形。然后给该Grid添加另一个负的底部Margin，值为-2：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Grid Grid.Row="0" Height="10" ClipToBounds="True" Margin="0,0,0,-2">
        <Polygon Points="5,0 10,10, 0,10" Stroke="Black" Fill="White" HorizontalAlignment="Center"
                 Margin="0,0,0,-2" Panel.ZIndex="10" StrokeThickness="2" StrokeDashArray="1 0"  />
    </Grid>
    <Border Background="#00000000" BorderBrush="Black" BorderThickness="2" CornerRadius="10" Grid.Row="1">
</Grid>

您可能希望将三角形变大，因为它的一部分将会隐藏在 Grid 外面。

- almulo

---

现在我想起来了，也许Grid会增长而不是隐藏三角形... - almulo

使用略微不同的方法进行编辑 - almulo

新的方法很好用，谢谢 :) 我将相同的方法应用于所有其他边缘，使用RenderTransform进行旋转，并修改边距等等 :) - pingu2k4

Answer 2

我觉得你想做一个类似Callout的东西，所以另一个选择是在边框内部使用Adorner来为元素绘制一些与其相关的图形。Adorner允许你绘制与该元素相关的一些图形。在这种情况下，可能是一个三角形。 请查看MSDN上的adorners概述。

下面的代码是用于应用于面板的Adorner，可以创建一个Callout。

 protected override void OnRender(DrawingContext drawingContext)
    {
        Rect adornedElementRect = new Rect(this.AdornedElement.DesiredSize);

        SolidColorBrush renderBrush = new SolidColorBrush(Colors.White);

        Pen renderPen = new Pen(new SolidColorBrush(Colors.Black), 1);

        var stringBuilder = new StringBuilder();

        var end = adornedElementRect.TopRight;

        stringBuilder.Append("M0,0");
        stringBuilder.Append(" L40,0 ");
        stringBuilder.Append(" 50,-10 ");
        stringBuilder.Append(" 60,0 ");
        stringBuilder.Append(end.X);
        stringBuilder.Append(",");
        stringBuilder.Append(end.Y);

        var stream = stringBuilder.ToString();

        drawingContext.DrawGeometry(renderBrush,renderPen, Geometry.Parse(stream));

    }

- Mauricio Mora

Answer 3

这样可以吗？

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Border Background="#00000000" BorderBrush="Black" BorderThickness="2" CornerRadius="10" Grid.Row="1" Margin="0,-2,0,0"/>
    <Grid HorizontalAlignment="Center">
        <Polygon Points="5,0 10,10, 0,10" Stroke="Black" Fill="White" Grid.Row="0" Margin="0,0,0,0" Panel.ZIndex="10" StrokeThickness="2" StrokeDashArray="1 0"  />
        <Polygon Points="1,10, 9,10" Stroke="White" Grid.Row="0"  Margin="0,0,0,0" Panel.ZIndex="10" StrokeThickness="2" StrokeDashArray="1 0"/>
    </Grid>
</Grid>

- Glen Thomas

---

座位太高了，需要在底部减少2个边距，但这样会导致它不能正常工作 :( - pingu2k4

Answer 4

你想要这样的东西吗：

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="110*" />
            <RowDefinition Height="201*" />
        </Grid.RowDefinitions>


        <Grid>

            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Border Background="#00000000" BorderBrush="Black" BorderThickness="2" CornerRadius="10" Grid.Row="1" Margin="0,-2,0,0"/>
                <Grid HorizontalAlignment="Center">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1.75" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="3.25" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="9" />
                        <RowDefinition Height="2" />
                    </Grid.RowDefinitions>
                    <Polygon Points="5,0 10,10, 0,10" Stroke="Black" Fill="White"  StrokeThickness="2" StrokeDashArray="1 0" Grid.RowSpan="2" Grid.ColumnSpan="3" />

                    <Grid Grid.Row="1" Grid.Column="1">
                        <Rectangle Fill="White" Stroke="White" ></Rectangle>
                    </Grid>
                </Grid>
            </Grid>
        </Grid>

    </Grid>

- Ugur