Border Animation wont change color

Question

I have created a check box using the XAML below, however for some reason I can't get the background color to change when the mouse goes over the control. The storyboard works for setting the opacity but the background color wont change. Any idea what I am doing wrong?

<Style x:Key="{x:Type CheckBox}" TargetType="CheckBox">
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="FocusVisualStyle" Value="{DynamicResource CheckBoxFocusVisual}" />
    <Setter Property="Foreground" Value="{StaticResource FGBrush}"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    <Setter Property="RenderOptions.EdgeMode" Value="Aliased"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="CheckBox">
                <BulletDecorator Background="Transparent" Height="20" MinHeight="{DynamicResource ResourceKey=MinimumIteractSizeDips}">
                    <BulletDecorator.Bullet>
                        <Grid MinHeight="{DynamicResource ResourceKey=MinimumIteractSizeDips}"
                              MinWidth="{DynamicResource ResourceKey=MinimumIteractSizeDips}" 
                              Width="20"
                              Height="20"
                              SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased" >

                            <Border x:Name="Border" 
                                    BitmapEffect="{StaticResource DropShadow}"
                                    CornerRadius="0" 
                                    Background="{StaticResource ControlGradientBrush}"
                                    BorderThickness="1"
                                    BorderBrush="{StaticResource NormalBorderBrush}" RenderOptions.EdgeMode="Aliased"
                              MinHeight="{DynamicResource ResourceKey=MinimumIteractSizeDips}"
                              MinWidth="{DynamicResource ResourceKey=MinimumIteractSizeDips}" 
                              Width="20"
                              Height="20" >

                                <Viewbox Stretch="UniformToFill" Margin="2" >
                                    <Path 
                                    x:Name="CheckMark"
                                    SnapsToDevicePixels="True" 
                                    Stroke="{StaticResource GlyphBrush}"
                                    StrokeThickness="7"
                                    RenderOptions.EdgeMode="Aliased"
                                    Data="M 2 2 L 17 17 M 2 17 L 17 2" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                </Viewbox>

                            </Border>
                        </Grid>
                    </BulletDecorator.Bullet>
                    <ContentPresenter Margin="4,0,0,0"
                            VerticalAlignment="Top"
                            HorizontalAlignment="Left"
                            RecognizesAccessKey="True"/>
                </BulletDecorator>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="false">
                        <Setter TargetName="CheckMark" Property="Visibility" Value="Collapsed"/>
                    </Trigger>
                    <Trigger Property="IsChecked" Value="{x:Null}">
                        <Setter TargetName="CheckMark" Property="Data" Value="M 0 7 L 7 0" />
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Trigger.EnterActions>
                            <BeginStoryboard Name="HighlightAnim">
                                <!--<Storyboard TargetName="Border" TargetProperty="Opacity" >
                                    <DoubleAnimation To="0.5" Duration="00:00:00.1"/>
                                </Storyboard>-->
                                <Storyboard TargetName="Border">
                                    <ColorAnimation Duration="0:0:0.15"
                                            Storyboard.TargetName="Border"
                                            Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                            To="Red" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                            <StopStoryboard BeginStoryboardName="HighlightAnim"/>
                        </Trigger.ExitActions>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="true">
                        <Setter TargetName="Border" Property="Background" Value="{StaticResource PressedBrush}" />
                        <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource PressedBorderBrush}" />
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" />
                        <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
                        <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 1

The animation tries to change the "Color" property of a SolidColorBrush. However, the "Border" element has the "Background" property set to a ControlGradientBrush resource. I think you should animate either a gradient stop of the gradient brush or set the border background to any similar SolidColorBrush.