圆形框架与按钮分开，为什么？

Question

我正在尝试对按钮进行圆角处理，但圆角框架不会影响按钮，它们成为屏幕上的两个独立对象。我看不到我在这里还缺少什么...

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

Answer 1

您可以使用OpacityMask 来解决此问题：

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

更多建议请参考以下类似问题：

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