如何在WPF XAML中创建可自定义的圆角按钮基础样式？

创建了一个WPF类库用于存放可复用的基础样式，编写按钮的ResourceDictionary时无法实现圆角效果，同时希望应用样式时能自定义边框颜色、圆角半径等属性，而非固定为常量。现有代码如下：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <!-- Define the ButtonStyle style -->
    <Style x:Key="CustomButtonStyle" TargetType="Button">
        <Setter Property="Cursor" Value="Arrow"/>
        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <Rectangle x:Name="background" Fill="{TemplateBinding Background}"/>
                        <Border x:Name="border" CornerRadius="{TemplateBinding Border.CornerRadius}" Background="{TemplateBinding Border.Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" />
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <!--<Setter TargetName="background" Property="Fill" Value="{TemplateBinding Background}" />-->
                            <Setter TargetName="background" Property="Opacity" Value="0.5"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="False">
                            <!--<Setter TargetName="background" Property="Fill" Value="{TemplateBinding Background}" />-->
                            <Setter TargetName="background" Property="Opacity" Value="1"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <!--<Setter TargetName="background" Property="Fill" Value="{TemplateBinding Background}" />-->
                            <Setter Property="BorderThickness" Value="0" TargetName="border"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Cursor" Value="Hand"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</ResourceDictionary>

• 绑定路径错误：
  • CornerRadius="{TemplateBinding Border.CornerRadius}" 无效，Button控件本身没有Border.CornerRadius属性，无法直接绑定。
  • Background="{TemplateBinding Border.Background}" 错误，应绑定Button自身的Background属性，正确写法为{TemplateBinding Background}。
• 背景未裁剪圆角：模板中的Rectangle未设置CornerRadius，会导致背景颜色超出Border的圆角范围，视觉上圆角不生效。
• 布局未填满控件：Rectangle和Border未设置HorizontalAlignment="Stretch"与VerticalAlignment="Stretch"，可能无法填满按钮区域，导致圆角仅部分显示。
• 触发器冗余：ControlTemplate中IsMouseOver=False的触发器完全多余，控件默认状态下background的Opacity就是1；同时Style和ControlTemplate中都有IsMouseOver触发器，逻辑重复。

方案1：使用附加属性实现可自定义参数 #

无需创建自定义控件，通过附加属性让Button支持自定义圆角半径等参数，灵活性更高。

1. 定义附加属性类（类库中创建C#类）

using System.Windows;
using System.Windows.Controls;

namespace YourWpfLibrary
{
    public class ButtonProperties : DependencyObject
    {
        // 圆角半径附加属性
        public static readonly DependencyProperty CornerRadiusProperty =
            DependencyProperty.RegisterAttached(
                "CornerRadius",
                typeof(CornerRadius),
                typeof(ButtonProperties),
                new PropertyMetadata(new CornerRadius(0)));

        public static CornerRadius GetCornerRadius(DependencyObject obj)
        {
            return (CornerRadius)obj.GetValue(CornerRadiusProperty);
        }

        public static void SetCornerRadius(DependencyObject obj, CornerRadius value)
        {
            obj.SetValue(CornerRadiusProperty, value);
        }
    }
}

2. 修改ResourceDictionary代码

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:YourWpfLibrary"> <!-- 替换为你的类库命名空间 -->

    <Style x:Key="CustomButtonStyle" TargetType="Button">
        <Setter Property="Cursor" Value="Arrow"/>
        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
        <!-- 设置默认属性值 -->
        <Setter Property="local:ButtonProperties.CornerRadius" Value="4"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="BorderBrush" Value="#FFCCCCCC"/>
        <Setter Property="Background" Value="#FFEEEEEE"/>
        
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <!-- 背景Rectangle同步圆角 -->
                        <Rectangle x:Name="background" 
                                   Fill="{TemplateBinding Background}"
                                   CornerRadius="{TemplateBinding local:ButtonProperties.CornerRadius}"
                                   HorizontalAlignment="Stretch"
                                   VerticalAlignment="Stretch"/>
                        <!-- 边框Border绑定附加属性的圆角 -->
                        <Border x:Name="border" 
                                CornerRadius="{TemplateBinding local:ButtonProperties.CornerRadius}"
                                BorderBrush="{TemplateBinding BorderBrush}" 
                                BorderThickness="{TemplateBinding BorderThickness}"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Stretch"/>
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          Margin="{TemplateBinding Padding}"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="background" Property="Opacity" Value="0.7"/>
                            <Setter Property="Cursor" Value="Hand"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="border" Property="BorderThickness" Value="0"/>
                            <Setter TargetName="background" Property="Opacity" Value="0.4"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

3. 项目中使用时自定义属性

<!-- 引用类库命名空间 -->
xmlns:lib="clr-namespace:YourWpfLibrary;assembly=YourWpfLibrary"

<!-- 使用自定义样式并修改属性 -->
<Button Style="{StaticResource CustomButtonStyle}"
        lib:ButtonProperties.CornerRadius="8"
        BorderBrush="#FF0066CC"
        Background="#FFE6F2FF"
        Content="自定义圆角按钮"/>

方案2：创建自定义Button控件 #

如果需要更复杂的自定义逻辑，可继承Button类添加依赖属性：

using System.Windows;
using System.Windows.Controls;

namespace YourWpfLibrary
{
    public class CustomButton : Button
    {
        public static readonly DependencyProperty CornerRadiusProperty =
            DependencyProperty.Register(
                nameof(CornerRadius),
                typeof(CornerRadius),
                typeof(CustomButton),
                new PropertyMetadata(new CornerRadius(0)));

        public CornerRadius CornerRadius
        {
            get => (CornerRadius)GetValue(CornerRadiusProperty);
            set => SetValue(CornerRadiusProperty, value);
        }
    }
}

随后在ResourceDictionary中将TargetType改为local:CustomButton，绑定CornerRadius="{TemplateBinding CornerRadius}"即可，使用时直接实例化CustomButton并设置属性。

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