Silverlight: VisualState Animation Being Overridden Somehow - silverlight

Question

I've got a rather complicated custom control that would boggle your mind if I showed you all of the code. ;) In general it's a panel displaying multiple controls. You can think of it as a custom list box. (Please don't tell me to use a listbox, I've been there and it doesn't meet my needs completely).
So, I set some animations in a VisualStateManager. Here's what happens:
When I hover over one of my child controls, I expect the MouseOver state to fire. It does.
When I select one of my child controls I expect the Selected state to fire and it does.
When I select a different child control, the Selected state fires as well
When I go back to my first child control I selected, and select it, the Selected state is shown to fire (by debug statements in my code) but the MouseOver animation is displayed.
Is there some issue with animations able to be overridden somehow or a problem between the MouseOver and Selected states I'm not aware of?
Here's my VSM markup:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.150000" Storyboard.TargetName="Backdrop" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="0" Value="DarkGray"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.150000" Storyboard.TargetName="Backdrop" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="0" Value="Yellow"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectedStates">
<VisualState x:Name="Unselected">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="0" Duration="1" Storyboard.TargetName="Backdrop" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="0" Value="Purple"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="0" Duration="1" Storyboard.TargetName="Backdrop" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="0" Value="Green"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
And here's my GoToState() logic:
private void GoToState(bool useTransitions)
{
TestingVariables("Inside GoToState");
if (_isSelected)
{
System.Diagnostics.Debug.WriteLine(_thumbnail.ShortFileName + " firing Selected VSM");
VisualStateManager.GoToState(this, "Selected", useTransitions);
}
else if (_wasSelected)
{
_wasSelected = false;
System.Diagnostics.Debug.WriteLine(_thumbnail.ShortFileName + " firing Unselected");
VisualStateManager.GoToState(this, "Unselected", useTransitions);
}
else if (_isMouseOver)
{
System.Diagnostics.Debug.WriteLine(_thumbnail.ShortFileName + " firing MouseOver VSM");
VisualStateManager.GoToState(this, "MouseOver", useTransitions);
}
else
{
System.Diagnostics.Debug.WriteLine(_thumbnail.ShortFileName + " firing Normal VSM");
VisualStateManager.GoToState(this, "Normal", useTransitions);
}
}
So, I can see which VisualStateManger.GoToState() method is fired and the call to TestingVariables() is just a method I use to write out the conditional flags I'm using to determine which visual state to fire.
Thanks in advance.

Answer 1

See answer to this question: Custom styled listbox - how can I keep the style for a selected item?