WPF自定义Checkbox模板中DataTrigger的ColorAnimation淡入效果不生效

问题根源 #

这是WPF依赖属性值优先级和动画状态冲突导致的典型问题：

• 动画默认FillBehavior = HoldEnd，执行结束后会强制保留最终属性值，优先级高于Style中的Setter，导致状态切换时动画起始值异常
• 你当前用两个独立DataTrigger分别处理选中/取消状态，没有做动画状态同步，首次选中时动画容易被初始的属性优先级阻塞
• 额外注意：你取消勾选的动画目标值设为了#FFFFFF（纯白色），如果父容器背景不是白色，会导致淡出效果不符合预期，应该改为初始的Transparent

解决方案 #

合并选中状态的触发器逻辑，统一处理进入/退出时的动画，同时显式指定属性值避免优先级冲突，修正后的代码如下：

<Border x:Name="checkbox" CornerRadius="5" Width="18" Height="18" BorderThickness="1" BorderBrush="Black">
    <!-- Checkmark -->
    <TextBlock Text="&#xE73E;" ClipToBounds="True"  FontFamily="Segoe MDL2 Assets"  HorizontalAlignment="Center" VerticalAlignment="Center"
               Background="Transparent" Foreground="White" FontSize="12" FontWeight="ExtraBold"/>
    <Border.Style>
        <Style TargetType="Border">
            <!-- 显式初始化Background为SolidColorBrush，避免动画找不到目标属性 -->
            <Setter Property="Background" Value="Transparent"/>
            <Style.Triggers>
                <!-- 合并处理IsChecked的两种状态，用同一个触发器的Enter/ExitAction对应选中/取消 -->
                <Trigger Property="IsChecked" RelativeSource="{RelativeSource TemplatedParent}" Value="True">
                    <!-- 选中时触发淡入 -->
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation To="#006092" Duration="0:0:0.2" Storyboard.TargetProperty="Background.Color"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                    <!-- 取消选中时触发淡出，不需要额外写False状态的触发器 -->
                    <Trigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation To="Transparent" Duration="0:0:0.2" Storyboard.TargetProperty="Background.Color"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.ExitActions>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Border.Style>
</Border>

额外优化点 #

• 把对勾的HorizontalAlignment和VerticalAlignment改为Center，避免对勾显示偏移
• 适当缩小对勾字号到12，适配18*18的边框尺寸，不会出现裁切问题

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