XAML - VisualGroupState for HyperlinkButton (whats wrong?) - wpf

Question

Trying to figure out what I'm doing wrong (first time playing with Visual States). Can anyone point me to my problem? The app is crashing ungracefully, nothing else to help beyond that.
Heres the xaml
<Style TargetType="HyperlinkButton">
<Setter Property="Foreground" Value="{StaticResource HyperlinkTextBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="HyperlinkButton">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<ColorAnimation BeginTime="0" Duration="0.5"
Storyboard.TargetName="content"
Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)"
To="Red" />
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation BeginTime="0" Duration="0.5"
Storyboard.TargetName="content"
Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)"
To="White" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<ContentPresenter x:Name="content" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Thanks!

Answer 1

There is 3 places which you should correct:
1) The VisualStateManager.VisualStateGroups tag must be situated inside the root control like a Grid and not in the ControlTemplate.
2) The ContentPresenter class doesn't have the Foreground property. But this property exists in the ContentControl class. After you replace this control, add explicit bindings for the properties Content and Foreground.
3) The value of the Duration property should be in seconds. Although you can use the expression Duration="1" which means 1 day, the value 0.5 crashes the application. Half of a second looks like 0:0:0.5.
Here is the fixed style:
<Style TargetType="HyperlinkButton">
<Setter Property="Foreground" Value="{StaticResource HyperlinkTextBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="HyperlinkButton">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<ColorAnimation Duration="0:0:0.5"
Storyboard.TargetName="content"
Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)"
To="Red" />
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="0:0:0.5"
Storyboard.TargetName="content"
Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)"
To="White" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="content" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"
Foreground="{TemplateBinding Foreground}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>