WPF, Create brush animation in Style.Triggers of a button style - wpf

Question

I am working now on a Button style, I've included a control template and style triggers. Now I want to make the background brush fade to a certain colour when mouse enter to button. But the colour animation won't work with a brush. and I'm stuck on that since yesterday. Here is what I've done so far in my button style:
<Converters:MathConverter x:Key="MathConverter" />
<Converters:ColorToBrushConverter x:Key="ColorToBrushConverter" />
<Style TargetType="Button">
<Setter Property="FontSize"
Value="{Binding FontSizeButton}" />
<Setter Property="Margin"
Value="{Binding FontSizeBase, Converter={StaticResource MathConverter}, ConverterParameter=#VALUE/3}" />
<Setter Property="Padding"
Value="{Binding FontSizeButton, Converter={StaticResource MathConverter}, ConverterParameter=#VALUE/3}" />
<Setter Property="MinWidth"
Value="{Binding ActualHeight, RelativeSource={RelativeSource Self}}" />
<Setter Property="Width"
Value="NaN" />
<Setter Property="Background"
Value="{Binding BrushBackButton}" />
<Setter Property="BorderBrush"
Value="{Binding BrushBorder}" />
<Setter Property="BorderThickness"
Value="{Binding BorderThicknessBase}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="MainBorder" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<ContentPresenter x:Name="Content"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
TextElement.Foreground="{TemplateBinding Foreground}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<!--
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Background"
Value="{Binding BrushBackButtonOver}" />
</Trigger>
-->
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard TargetProperty="Background">
<ColorAnimation To="Blue" Duration="10"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>

Answer 1

You should use the VisualStateManager for this kind of problem.
It may lead you to something like that :
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name ="Border" Background="LightBlue">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.2"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
To="Red"/>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
To="Blue"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter Content="{TemplateBinding Content}"/>
</Border>
[...]
[Edit]
Concerning your specific problem, you should put your trigger in the ControlTemplate's Triggers.
<ControlTemplate TargetType="{x:Type Button}">
[...]
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard TargetName="Border" TargetProperty="(Background).(SolidColorBrush.Color)">
<ColorAnimation To="Blue" Duration="0:0:0.2"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>