Modify a custom styled button's border in WPF XAML

Question

I'm trying to achieve this through XAML code but to no avail.

I have the following XAML code:

App.xaml

<Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
    <Setter Property="Background" Value="Black"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid>
                    <Path Fill="{TemplateBinding Background}"
                          Data="M 0,22.5 22.5,0 27.5,5 10,22.5 27.5,40 22.5,45"/>
                    <Border x:Name="border"
                            BorderThickness="2"
                            BorderBrush="Red"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

And use it like so:

<Button Style="{StaticResource ButtonStyle}" Height="100" Width="100"/>

It gives me this but I want the red border to be inside the button.

I tried adding this

<Setter Property="BorderBrush" Value="Red"/>
<Setter Property="BorderThickness" Value="2"/>

instead of creating a grid but now the border doesn't show.

I guess I could create another path that would act as a border but is there a simpler way?

Answer 1

<Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
    <Setter Property="Background" Value="Black"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid>
                    <Path Fill="{TemplateBinding Background}" Stroke="Red" StrokeThickness="3"
                      Data="M 0,22.5 22.5,0 27.5,5 10,22.5 27.5,40 22.5,45"/>
                    <Border x:Name="border"
                        BorderThickness="2"
                        BorderBrush="Red"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

trying to use Stroke and StrokeThickness properties.