我怎样才能让箭头指向我的边界？

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">

多边形创建了一个完美的箭头，但三角形的底部边框是黑色的，我希望它是白色的。不知道如何让它变成白色，看起来像白色 BG 渗入箭头。这是到目前为止的样子：

我想去掉它下面的那条黑线。如果我应该尝试一种完全不同的方法，我很感兴趣:)

Answer 1

这样可以吗？

<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>

Answer 2

这有点棘手。将三角形包裹在 Grid 内，ClipToBounds 设置为 true。然后在 Grid:

中添加 -2 的另一个负底部 Margin

<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 之外。

Answer 3

你想要这样的东西吗：

<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>

Answer 4

我认为您正在尝试制作类似于标注的内容，因此另一种选择是对边框内的元素使用装饰器。 Adorner 允许您绘制一些与该元素相关的图形。在这种情况下可能是一个三角形。签出 adorners overview on MSDN.

下面的代码适用于可以应用于面板的装饰器，并进行标注。

 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));

    }

我怎样才能让箭头指向我的边界？

How can I get an arrow pointed on my border?

wpf

xaml

border

polygon