边框动画不会改变颜色 [英] Border Animation wont change color

问题描述

我使用下面的XAML创建了一个复选框，但是由于某些原因，当鼠标悬停在控件上时，我无法更改背景色。故事板可用于设置不透明度，但背景颜色不会改变。知道我在做什么错吗？

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>

推荐答案

动画试图更改以下内容的颜色属性SolidColorBrush。但是，边框元素的背景属性设置为ControlGradientBrush资源。我认为您应该为渐变笔刷的渐变停止点设置动画或将边框背景设置为任何类似的SolidColorBrush。

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.

这篇关于边框动画不会改变颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！