¿Por qué el estado de ColorAnimation for Checked no persiste después de que se activa el estado de MouseOver?

Question

He encontrado un problema con ControlTemplate para ToggleButton que he creado.

Cuando el botón es Checked, se activa ColorAnimation y el fondo del control cambia de color. Sin embargo, si el usuario ingresa al estado MouseOver, se activa otra animación que también afecta el fondo del botón.

Cuando el mouse ya no está en el estado MouseOver, el control no vuelve al color que debería tener mientras está en el estado Checked. No estoy seguro de por qué esto no persiste cuando se activa el estado MouseOver.

La parte de mi VisualStateManagerControlTemplate parece sorta como esto:

<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

Mi solución para el problema que estaba teniendo implicado la creación de un Grid que cerraba el Border.

Para el CommonStates realicé cambios de animación en el Border.Background y para el CheckedStates realicé cambios de animación en el Grid.Background.

Alcanza el efecto visual que estaba buscando.