Warum wird der ColorAnimation for Checked-Status nicht beibehalten, nachdem der MouseOver-Status ausgelöst wurde?

Question

Ich habe ein Problem mit einem ControlTemplate für ToggleButton ich erstellt.

Wenn die Schaltfläche Checked ist, wird ein ColorAnimation ausgelöst und der Hintergrund des Steuerelements ändert seine Farbe. Wenn der Benutzer jedoch den Status MouseOver eingibt, wird eine weitere Animation ausgelöst, die sich ebenfalls auf den Hintergrund der Schaltfläche auswirkt.

Wenn sich die Maus nicht mehr im MouseOver-Status befindet, kehrt die Steuerung nicht zu der Farbe zurück, die sie sein sollte, während sie sich im Checked-Status befindet. Ich bin mir nicht sicher, warum dies nicht fortbesteht, wenn der MouseOver-Status ausgelöst wird.

Der VisualStateManager Teil meiner ControlTemplate sieht sorta wie folgt aus:

<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

Meine Abhilfe für das Problem, das ich involviert war mit einer Grid zu schaffen, der die Border eingeschlossen.

Für die CommonStates machte ich Animationen Änderungen an der Border.Background und für die CheckedStates machte ich Animationen Änderungen an der Grid.Background.

Es erreicht den visuellen Effekt, den ich suchte.