触发MouseOver状态后,为什么ColorAnimation for Checked状态不会保持颜色？

Question

我遇到的问题与ControlTemplate为ToggleButton我创造.

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

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

在VisualStateManager我的部分ControlTemplate看起来有点儿像这样:

<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>

Answer 1

我解决这个问题的方法是创建一个Grid包含Border.

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

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