rounded frame is separate from button, why?

Question

I am trying to round a button, but the rounded frame does not affect the button, these become two separate objects on the screen. I can't see what else I am missing here...

<ControlTemplate x:Key="BT_SIGN" TargetType="{x:Type Button}">
        <Border x:Name="border" CornerRadius="8" BorderBrush="Black" BorderThickness="2">
            <Grid Cursor="None" Margin="0,0,1.333,0">
                <Grid.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="Black" Offset="0"/>
                        <GradientStop Color="#FF1E8CF3" Offset="1"/>
                    </LinearGradientBrush>
                </Grid.Background>
                <ContentPresenter />
            </Grid>
        </Border>
    </ControlTemplate>

<Button          
Grid.Column="3" 
HorizontalAlignment="Left" 
Height="44.8" 
Width="75.2" 
Margin="22.32,24.6,0,0" 
VerticalAlignment="Top"
Template="{DynamicResource BT_SIGN}">
        <Path Data="M0.5,0 L0.5,1 M0,0.5 L1,0.5"
        StrokeThickness="4"
        Stretch="Fill"
        Stroke="White" Margin="12.667,2.4,14.133,2.133" RenderTransformOrigin="0.516,0.366" />
    </Button>

score 2 · Accepted Answer · edited May 23 '17 at 12:02

You could use an OpacityMask to work around this:

<ControlTemplate x:Key="BT_SIGN" TargetType="{x:Type Button}">
    <Border x:Name="border" CornerRadius="8" BorderBrush="Black" BorderThickness="2">
        <Border.OpacityMask>
            <VisualBrush>
                <VisualBrush.Visual>
                    <Border 
                                Background="Black"
                                SnapsToDevicePixels="True"
                                CornerRadius="{Binding CornerRadius, RelativeSource={RelativeSource FindAncestor, AncestorType=Border}}"
                                Width="{Binding ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType=Border}}"
                                Height="{Binding ActualHeight, RelativeSource={RelativeSource FindAncestor, AncestorType=Border}}"
                                />
                </VisualBrush.Visual>
            </VisualBrush>
        </Border.OpacityMask>
        <Grid Cursor="None" Margin="0,0,1.333,0">
            <Grid.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Black" Offset="0"/>
                    <GradientStop Color="#FF1E8CF3" Offset="1"/>
                </LinearGradientBrush>
            </Grid.Background>
            <ContentPresenter />
        </Grid>
    </Border>
</ControlTemplate>

Please refer to the following similar question for more suggestions:

How to make the contents of a round-cornered border be also round-cornered?

rounded frame is separate from button, why?

1 Answers1