Why is the ColorAnimation for Checked state not persisting color after the MouseOver state is triggered?

Question

I encountered an issue with a ControlTemplate for ToggleButton I created.

When the button is Checked, a ColorAnimation is triggered and the control's background changes color. However, if the user enters the MouseOver state, another animation is triggered that affects the button's background as well.

When the mouse is no longer in the MouseOver state, the control does not return to the color it should be while it is in the Checked state. I'm not sure why this does not persist when the MouseOver state is triggered.

The VisualStateManager portion of my ControlTemplate looks sorta like this:

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

Masorete

I think it is not a good idea to animate same target properties in visual states that belongs to different groups. One of the solution would be to have visual states in different group operating on different set of properties/elements. – Pejorative

I was thinking because I'm animating the same property it was the source of the problem. – Masorete

Answer 1

My workaround for the issue I was having involved creating a Grid that enclosed the Border.

For the CommonStates I made animation changes to the Border.Background and for the CheckedStates I made animation changes to the Grid.Background.

It achieves the visual effect I was looking for.

Masorete