为什么触发 MouseOver 状态后，Checked 状态的 ColorAnimation 不保持颜色？答案

【问题标题】：Why is the ColorAnimation for Checked state not persisting color after the MouseOver state is triggered?为什么触发 MouseOver 状态后，Checked 状态的 ColorAnimation 不保持颜色？
【发布时间】：2012-09-25 19:16:20
【问题描述】：

我在创建 ToggleButton 时遇到了 ControlTemplate 问题。

当按钮为Checked时，触发ColorAnimation，控件背景颜色改变。但是，如果用户进入MouseOver 状态，则会触发另一个动画，该动画也会影响按钮的背景。

当鼠标不再处于MouseOver 状态时，控件不会返回到它应处于Checked 状态时的颜色。我不确定为什么在触发MouseOver 状态时这种情况不会持续存在。

我的ControlTemplate 的VisualStateManager 部分看起来像这样：

<VisualStateManger.VisualStateGroups>
    <VisualStateGroup x:Name="CommonStates">
        <VisualState x:Name="Normal"></VisualState>
        <VisualState x:Name="MouseOver">
            <Storyboard>
                <ColorAnimation Storyboard.TargetName="BackgroundBorder"
                    Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                    To="Gold" Duration="0:0:0.3" />
            </Storyboard>
        </VisualState>
    </VisualStateGroup>
    <VisualStateGroup x:Name="CheckedStates">
        <VisualState x:Name="Checked">
            <Storyboard>
                <ColorAnimation Storyboard.TargetName="BackgroundBorder"
                    Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                    To="PaleGoldenrod" Duration="0:0:0.3" />
            </Storyboard>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

【问题讨论】：

我认为在属于不同组的视觉状态下对相同的目标属性进行动画处理并不是一个好主意。一种解决方案是让不同组中的视觉状态对不同的属性/元素集进行操作。
我在想，因为我正在为相同的属性设置动画，这是问题的根源。

标签： wpf controltemplate togglebutton visualstates

【解决方案1】：

我所涉及的问题的解决方法是创建一个包含Border 的Grid。

对于CommonStates，我对Border.Background 进行了动画更改，对于CheckedStates，我对Grid.Background 进行了动画更改。

它达到了我想要的视觉效果。

【讨论】：