WPF中根据条件设置背景色且不丢失鼠标Hover悬停效果的实现问题

问题根源 #

你的问题本质是WPF依赖属性值优先级和触发器执行顺序导致的：

• WPF中依赖属性的生效优先级排序为：动画值（FillBehavior=HoldEnd时） > 触发器Setter值 > 样式默认Setter值
• 你使用EventTrigger触发Storyboard修改Background后，默认FillBehavior=HoldEnd会让动画一直持有属性控制权，后续DataTrigger的Setter就算触发也无法修改背景
• 你写死的RestoreBackgroundStoryboard只能恢复为固定颜色，无法适配IsFavorite两种状态的不同背景需求

最优解决方案：放弃EventTrigger，直接用Trigger覆盖 #

你不需要额外写Storyboard处理悬停背景，只需要给现有的IsMouseOver触发器增加背景Setter，并且把它放到两个DataTrigger的后面即可（同类型触发器定义越靠后优先级越高，悬停时会覆盖DataTrigger的背景值，鼠标移走后自动回退到DataTrigger对应状态的背景）。

修改后的触发器代码如下：

<ControlTemplate.Triggers>
    <!-- 原来的Click事件触发器保留 -->
    <EventTrigger RoutedEvent="Click">
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation To="220" Duration="0:0:0.7" 
                        AccelerationRatio="0.10" DecelerationRatio="0.10" 
                        Storyboard.TargetProperty="(Canvas.Width)" />
                <DoubleAnimation Duration="0:0:0.7" 
                        AccelerationRatio="0.10" DecelerationRatio="0.15" 
                        Storyboard.TargetProperty="(Canvas.Width)" />
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>

    <!-- 两个IsFavorite的DataTrigger放在前面 -->
    <DataTrigger Binding="{Binding IsFavorite}" Value="True">
        <Setter Property="Background" Value="{DynamicResource PN_ColorFondoAcentoClaro}"/>
    </DataTrigger>
    <DataTrigger Binding="{Binding IsFavorite}" Value="False">
        <Setter Property="Background" Value="Transparent"/>
    </DataTrigger>

    <!-- IsMouseOver触发器放在最后，优先级更高，悬停时覆盖背景和边框 -->
    <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="BorderBrush" Value="{DynamicResource PN_ColorAlerta}"/>
        <Setter Property="BorderThickness" Value="10"/>
        <!-- 新增悬停背景Setter -->
        <Setter Property="Background" Value="{DynamicResource PN_ColorAlerta}"/>
    </Trigger>
</ControlTemplate.Triggers>

这个方案完全不需要写SetHoverBackgroundStoryboard和RestoreBackgroundStoryboard，没有动画优先级冲突，自动适配IsFavorite的状态。

如果你确实需要用动画实现悬停效果 #

可以修改动画的FillBehavior，并且在鼠标离开时移除悬停动画，让属性自动回退到DataTrigger设置的值：

1. 给悬停动画设置FillBehavior="HoldEnd"保证鼠标悬停时背景一直生效
2. 鼠标离开时用RemoveStoryboard清除悬停动画，释放属性控制权，背景会自动恢复为当前IsFavorite对应的值
   修改后的代码如下：

<!-- 资源中只保留悬停动画 -->
<Storyboard x:Key="SetHoverBackgroundStoryboard" FillBehavior="HoldEnd">
    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background">
        <DiscreteObjectKeyFrame 
            KeyTime="0:0:0"
            Value="{DynamicResource PN_ColorAlerta}" />
    </ObjectAnimationUsingKeyFrames>
</Storyboard>

触发器部分修改：

<ControlTemplate.Triggers>
    <EventTrigger RoutedEvent="MouseEnter">
        <BeginStoryboard x:Name="HoverAnim" Storyboard="{StaticResource SetHoverBackgroundStoryboard}"/>
    </EventTrigger>
    <EventTrigger RoutedEvent="MouseLeave">
        <!-- 直接移除悬停动画，不需要写恢复动画，背景自动回退到DataTrigger对应值 -->
        <RemoveStoryboard BeginStoryboardName="HoverAnim"/>
    </EventTrigger>

    <!-- 其他触发器和之前一致 -->
    <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="BorderBrush" Value="{DynamicResource PN_ColorAlerta}"/>
        <Setter Property="BorderThickness" Value="10"/>
    </Trigger>
    <!-- 剩下的Click触发器、DataTrigger都保留原来的写法即可 -->
</ControlTemplate.Triggers>

内容的提问来源于stack exchange，提问作者Juan Pablo Gomez