Why is the ColorAnimation for Checked state not persisting color after the MouseOver state is triggered?
controltemplate, togglebutton, visualstates, wpf
Solution
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.
Problem
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> ```