样式模板中VisualStateManager无法使用TemplateBinding的问题排查

我正在给按钮制作样式，希望能灵活控制鼠标悬停和点击时的颜色。最初使用常规触发器，但无法实现点击动画，于是改用VisualStateManager方案。

目前基础样式正常，但在创建自定义按钮时，尝试通过TemplateBinding或RelativeSource绑定TemplatedParent的方式控制悬停颜色（HoverColor）均未生效，陷入困境。

自定义按钮类代码 #

public class Button : System.Windows.Controls.Button
{
   public static readonly DependencyProperty HoverColorProperty = DependencyProperty.RegisterAttached(
        nameof(HoverColor),
        typeof(Color),
        typeof(Button),
        new PropertyMetadata());

    public Color HoverColor
    {
        get => (Color)GetValue(HoverColorProperty);
        set => SetValue(HoverColorProperty, value);
    }
}

按钮样式代码 #

<Style TargetType="{x:Type controls:Button}">
    <Setter Property="Foreground" Value="{DynamicResource TextBrush}" />
    <Setter Property="BorderBrush" Value="{DynamicResource Surface1Brush}" />
    <Setter Property="Background" Value="{DynamicResource BaseBrush}" />
    <Setter Property="HoverColor" Value="{DynamicResource Surface1Color}" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type controls:Button}">
                <Border x:Name="Border" CornerRadius="4"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition From="MouseOver" To="Normal" GeneratedDuration="0:0:0.15" />
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="Border"
                                                    Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                                    To="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=HoverColor}" Duration="0:0:0.15" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="Border"
                                                    Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                                    To="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background.(SolidColorBrush.Color)}" Duration="0:0:0.15" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

解决方案 #

1. 修正DependencyProperty注册方式

你错误地使用了RegisterAttached注册HoverColor属性，但这是按钮的实例属性，并非附加属性，应该改用Register方法：

public class Button : System.Windows.Controls.Button
{
   public static readonly DependencyProperty HoverColorProperty = DependencyProperty.Register(
        nameof(HoverColor),
        typeof(Color),
        typeof(Button),
        new PropertyMetadata(Colors.LightGray)); // 可设置默认颜色

    public Color HoverColor
    {
        get => (Color)GetValue(HoverColorProperty);
        set => SetValue(HoverColorProperty, value);
    }
}

2. 调整VisualState中的绑定逻辑

VisualState的动画属性绑定需要确保路径正确，同时要注意资源类型匹配：

• 若Surface1Color是Color类型的动态资源，绑定可直接使用{Binding RelativeSource={RelativeSource TemplatedParent}, Path=HoverColor}；
• 若Surface1Color是SolidColorBrush类型，需修改HoverColor的属性类型为Brush，并调整绑定路径。

另外，Pressed状态的动画可以添加一个专门的PressedColor依赖属性来统一控制，让样式更灵活：

// 添加PressedColor属性
public static readonly DependencyProperty PressedColorProperty = DependencyProperty.Register(
     nameof(PressedColor),
     typeof(Color),
     typeof(Button),
     new PropertyMetadata(Colors.DarkGray));

public Color PressedColor
{
    get => (Color)GetValue(PressedColorProperty);
    set => SetValue(PressedColorProperty, value);
}

对应的样式修改：

<Setter Property="PressedColor" Value="{DynamicResource Surface2Color}" />

<!-- Pressed状态动画 -->
<VisualState x:Name="Pressed">
    <Storyboard>
        <ColorAnimation Storyboard.TargetName="Border"
                        Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                        To="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=PressedColor}" Duration="0:0:0.15" />
    </Storyboard>
</VisualState>

3. 确保Background是SolidColorBrush

ColorAnimation只能作用于SolidColorBrush，如果BaseBrush不是纯色画刷，动画会失效。需确认动态资源BaseBrush是SolidColorBrush类型。

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