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

这有点棘手。将{3}包裹在Grid内并将ClipToBounds设置为true。然后向Margin添加另一个负底部Grid：

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

这会吗？

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

我认为你正在尝试制作一个类似Callout的东西，所以另一个选择是在边框内使用Adorner作为元素。 Adorner允许您绘制与该元素相关的图形。在这种情况下可以是三角形。结帐adorners overview on MSDN。

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

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

    }

如何在我的边界上找到箭头？

4 个答案: