为Button样式添加鼠标悬停背景色切换动画求助

问题场景 #

现有Button的XAML样式，原本通过Trigger静态切换鼠标悬停时的背景色，希望改为平滑动画过渡，但遇到异常：Background是Brush类型，不能使用ColorAnimation。

解决方案 #

由于Background是Brush类型，无法直接对其使用ColorAnimation，需要针对SolidColorBrush的Color属性做动画。通过Trigger的EnterActions和ExitActions触发动画，实现悬停时的颜色过渡效果。

修改后的完整代码 #

<Style x:Key="MyButtonStyle2" TargetType="Button">
    <Setter Property="OverridesDefaultStyle" Value="True"/>
    <Setter Property="Margin" Value="5"/>
    <!-- 默认背景色可根据需求修改 -->
    <Setter Property="Background" Value="#FF1E1E1E"/>
    <Setter Property="BorderBrush" Value="#FF333333"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Name="border" 
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Padding="{TemplateBinding Padding}" 
                        BorderBrush="{TemplateBinding BorderBrush}" 
                        Background="{TemplateBinding Background}">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Border>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <!-- 动画目标：border的Background（SolidColorBrush）的Color属性 -->
                                    <ColorAnimationUsingKeyFrames 
                                        Storyboard.TargetName="border"
                                        Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
                                        Duration="0:0:0.2">
                                        <LinearColorKeyFrame Value="#FF292929" KeyTime="0:0:0.2"/>
                                    </ColorAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <!-- 鼠标离开时回到原背景色 -->
                                    <ColorAnimationUsingKeyFrames 
                                        Storyboard.TargetName="border"
                                        Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
                                        Duration="0:0:0.2">
                                        <LinearColorKeyFrame Value="{Binding Background.Color, RelativeSource={RelativeSource TemplatedParent}}" KeyTime="0:0:0.2"/>
                                    </ColorAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.ExitActions>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

关键说明 #

• 使用Trigger.EnterActions和Trigger.ExitActions分别处理鼠标进入和离开时的动画逻辑，替代原有的静态Setter
• 动画路径(Background).(SolidColorBrush.Color)明确指定要修改SolidColorBrush的Color属性，避开直接操作Brush类型的限制
• 通过ColorAnimationUsingKeyFrames实现线性过渡动画，可调整Duration参数控制动画速度
• 鼠标离开时的动画绑定回Button的原始背景色，保证样式的复用性

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