如何在WPF XAML中创建自适应自定义按钮形状

你的问题出在使用固定坐标的Path加上Stretch="Fill"——这种全局拉伸会把整个路径（包括切角的斜线）一起缩放，导致45度角变形。下面给你三种可行的解决方案，按需选择：

方案1：固定切角大小（拉伸时切角不变形） #

这种方式下，不管按钮被拉到多大，左上角和右下角的切角直角边长度保持固定，45度角始终不变。

修改你的按钮模板，用动态绑定生成Path的路径数据：

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type Button}">
            <Path Fill="{TemplateBinding Background}"
                  Stroke="{TemplateBinding Foreground}"
                  Stretch="None">
                <Path.Data>
                    <!-- 绑定按钮实际宽高 + 切角大小（通过Tag属性设置） -->
                    <MultiBinding StringFormat="M 0 {2} L {2} 0 L {0} 0 L {0} {1} L {0}-{2} {1} L 0 {1} Z">
                        <Binding RelativeSource="{RelativeSource Self}" Path="ActualWidth" />
                        <Binding RelativeSource="{RelativeSource Self}" Path="ActualHeight" />
                        <Binding Path="Tag" RelativeSource="{RelativeSource TemplatedParent}" FallbackValue="20" />
                    </MultiBinding>
                </Path.Data>
            </Path>
            <!-- 内容展示器，保证按钮文字正常显示 -->
            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Margin="20"/>
            
            <ControlTemplate.Triggers>
                <Trigger Property="IsPressed" Value="True">
                    <!-- 可添加按下状态样式，比如偏移或颜色变化 -->
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Setter.Value>
</Setter>

使用时，通过Button的Tag属性设置切角大小：

<Button Tag="20" Background="DeepSkyBlue" Foreground="White" Content="自定义按钮" />

方案2：按比例缩放切角（切角随按钮大小等比例变化） #

如果需要切角大小跟着按钮宽高按比例缩放（比如切角始终是按钮最小边的1/4），可以用转换器实现：

先写一个转换器类：

public class CornerSizeConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        if (values.Length < 2 || values[0] is not double width || values[1] is not double height)
            return 20; // 默认切角大小
        
        // 从参数获取比例，默认25%
        var ratio = parameter is string s && double.TryParse(s, out var r) ? r : 0.25;
        return Math.Min(width, height) * ratio;
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

然后在XAML里引用转换器，修改模板：

<!-- 先在资源里注册转换器 -->
<Window.Resources>
    <local:CornerSizeConverter x:Key="CornerSizeConverter" />
</Window.Resources>

<!-- 按钮模板 -->
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type Button}">
            <Path Fill="{TemplateBinding Background}"
                  Stroke="{TemplateBinding Foreground}"
                  Stretch="None">
                <Path.Data>
                    <MultiBinding StringFormat="M 0 {2} L {2} 0 L {0} 0 L {0} {1} L {0}-{2} {1} L 0 {1} Z">
                        <Binding RelativeSource="{RelativeSource Self}" Path="ActualWidth" />
                        <Binding RelativeSource="{RelativeSource Self}" Path="ActualHeight" />
                        <!-- 用转换器计算切角大小 -->
                        <MultiBinding Converter="{StaticResource CornerSizeConverter}" ConverterParameter="0.25">
                            <Binding RelativeSource="{RelativeSource Self}" Path="ActualWidth" />
                            <Binding RelativeSource="{RelativeSource Self}" Path="ActualHeight" />
                        </MultiBinding>
                    </MultiBinding>
                </Path.Data>
            </Path>
            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Margin="20"/>
        </ControlTemplate>
    </Setter.Value>
</Setter>

方案3：用Grid拼接实现（纯XAML，无需代码） #

如果不想写后台代码，用Grid和基础控件拼接也能实现，逻辑更直观：

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type Button}">
            <Grid>
                <!-- 主背景边框 -->
                <Border Background="{TemplateBinding Background}" 
                        BorderBrush="{TemplateBinding Foreground}" 
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Margin="20"/>
                <!-- 左上切角：用旋转的矩形覆盖 -->
                <Rectangle Fill="{TemplateBinding Background}" 
                           HorizontalAlignment="Left" VerticalAlignment="Top" 
                           Width="20" Height="20">
                    <Rectangle.RenderTransform>
                        <RotateTransform Angle="45" CenterX="10" CenterY="10"/>
                    </Rectangle.RenderTransform>
                </Rectangle>
                <!-- 右下切角：同样用旋转的矩形覆盖 -->
                <Rectangle Fill="{TemplateBinding Background}" 
                           HorizontalAlignment="Right" VerticalAlignment="Bottom" 
                           Width="20" Height="20">
                    <Rectangle.RenderTransform>
                        <RotateTransform Angle="45" CenterX="10" CenterY="10"/>
                    </Rectangle.RenderTransform>
                </Rectangle>
                <!-- 补全左上边框 -->
                <Border BorderBrush="{TemplateBinding Foreground}" BorderThickness="0 0 1 1" 
                        HorizontalAlignment="Left" VerticalAlignment="Top" Width="20" Height="20"/>
                <!-- 补全右下边框 -->
                <Border BorderBrush="{TemplateBinding Foreground}" BorderThickness="1 1 0 0" 
                        HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="20" Height="20"/>
                <!-- 内容展示 -->
                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Margin="20"/>
            </Grid>
        </ControlTemplate>
    </Setter.Value>
</Setter>

这种方式通过覆盖矩形模拟切角，补全边框细节，拉伸时切角大小固定，不会变形。

内容的提问来源于stack exchange，提问作者Vya4slav