Binding storyboard animation values - wpf

Question

I have an enum on a viewmodel which represents one of 5 colors, and I am using a ValueConverter to convert these values into actual colors.
Specifically it's for the color of each listbox item's background to change to as it is hovered over.
I have a custom control with a visual state manager and a mouseover group which uses a SplineColorKeyFrame to animate the hover color (This is set in the xaml of control template). The custom control just has a dependency property on it for the hover color.
This works great if the Value of the SplineColorKeyFrame is from a resource, or set in the xaml as a fixed color. However it just animates to transparent when I set the Value to "{TemplateBinding HoverColor}"
Even setting the DependencyProperty in the xaml to a color, and trying to use the TemplateBinding in the control to read the color causes the problem, the animation won't use the right color if I tell it to get it from a binding or template binding.
I've snooped the app and can see that the dependency property has the correct value, but it doesn't seem to be picking up that value in the animation.
Can anyone suggest how to get around this?
Here's my control template:
<Style TargetType="{x:Type local:MyCustomControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:MyCustomControl}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" x:Name="border">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="MouseOverGroup">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.2"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="border">
<SplineColorKeyFrame KeyTime="0" Value="{TemplateBinding HoverColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Normal"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<VisualStateManager.CustomVisualStateManager>
<ic:ExtendedVisualStateManager/>
</VisualStateManager.CustomVisualStateManager>
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseEnter">
<ic:GoToStateAction x:Name="MouseOverAction" StateName="MouseOver"/>
</i:EventTrigger>
<i:EventTrigger EventName="MouseLeave">
<ic:GoToStateAction x:Name="NormalAction" StateName="Normal"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Here's my custom control code:
public class MyCustomControl : Control
{
public static DependencyProperty HoverColorProperty = DependencyProperty.Register("HoverColor", typeof (Color),
typeof (MyCustomControl));
public Color HoverColor
{
get
{
return (Color)GetValue(HoverColorProperty);
}
set
{
SetValue(HoverColorProperty, value);
}
}
static MyCustomControl()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(MyCustomControl), new FrameworkPropertyMetadata(typeof(MyCustomControl)));
}
}
Here's the main window xaml:
<Window x:Class="Test.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Test="clr-namespace:Test" Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
<Test:ViewModel/>
</Window.DataContext>
<Grid>
<Test:MyCustomControl HoverColor="Yellow"
HorizontalAlignment="Center" VerticalAlignment="Center" Width="150" Height="150"
Background="Bisque">
</Test:MyCustomControl>
</Grid>
</Window>

Answer 1

I found the answer to this problem. It turns out that, for some reason, the binding doesn't work if the StoryBoard is inline in the Xaml. If you put the Storyboard in a resource and refer to the resource in the VisualStateManager, then everything works.