How can I get an arrow pointed on my border?

Question

Ive tried a million things and im nearly there...

I have a border, and I want an arrow coming off to point upwards (I will do the same for each side and bottom after I have done this also). Here is what I have so far:

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

The polygon creates a perfect arrow, but the bottom border of the triangle is black and I want it white. Not sure how to get it to be white to look like the white BG bleeds into the arrow. Here is what it looks like so far:

I want to get rid of that black line underneath it. Am interested if there is a whole different approach I should be trying instead :)

Answer 1

This is a bit tricky. Wrap your triangle inside a Grid with ClipToBounds set to true. Then add another negative bottom Margin of -2 to that 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>

You may want to make your triangle bigger, since a slice of it will be hidden outside the Grid.