SlickButton color animation - wpf

Question

I need to create a color animation. I have a control (a slick button - minimize, close) which works perfectly. There's a mouseover trigger that changes its color. The problem is when I want to animate this color transition. :S
There's an example how it looks like:
<ControlTemplate x:Key="SlickButtonTemplate" TargetType="{x:Type controls:SlickButtonControl}">
<Grid>
<Border x:Name="ButtonBackgroundBorder" CornerRadius="{Binding Path=CornerRadius, RelativeSource={RelativeSource TemplatedParent}}"
Background="{Binding Path=HighlightBackground, RelativeSource={RelativeSource TemplatedParent}}" Opacity="0" BorderBrush="Black" BorderThickness="1">
</Border>
<Border x:Name="ButtonEdgesBorder" CornerRadius="{Binding Path=CornerRadius, RelativeSource={RelativeSource TemplatedParent}}" Opacity="1" BorderBrush="Black"
BorderThickness="1">
<Border.BitmapEffect>
<DropShadowBitmapEffect Color="#FFFFFFFF" Direction="270" ShadowDepth=".75" Softness="0.20"/>
</Border.BitmapEffect>
</Border>
<Border x:Name="ButtonContentBorder" CornerRadius="{Binding Path=CornerRadius, RelativeSource={RelativeSource TemplatedParent}}" Opacity="1" BorderThickness="1">
<ContentPresenter Width="Auto" Height="Auto" HorizontalAlignment="Center" VerticalAlignment="Center">
</ContentPresenter>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.Setters>
<Setter Property="Opacity" TargetName="ButtonBackgroundBorder" Value="1"></Setter>
</Trigger.Setters>
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Trigger.Setters>
<Setter Property="Opacity" TargetName="ButtonBackgroundBorder" Value="1"></Setter>
<Setter Property="Background" TargetName="ButtonBackgroundBorder" Value="{Binding Path=PressedBackground, RelativeSource={RelativeSource TemplatedParent}}"></Setter>
</Trigger.Setters>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="SlickButton" TargetType="{x:Type ToggleButton}">
<Setter Property="Template" Value="{StaticResource SlickButtonTemplate}" />
</Style>
I tried to remove Trigger.Setters section and replace it by:
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.5" Storyboard.TargetName="ButtonBackgroundBorder"
Storyboard.TargetProperty="(UIElement.Opacity)" To="1" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
It works once. There is an animation when mouse enters on the button area but no animation when it leaves. Next when mouse enters on that button again - no animation, but color changes immediately:S I dunno how to do that. I beg for some help.
Thx in advance.

Answer 1

Not here
<Trigger Property="IsMouseOver" Value="False">
Not here
<Trigger.Setters>
But here
<Setter Property="Opacity" TargetName="ButtonBackgroundBorder" Value="1"></Setter>
Should be:
<Setter Property="Opacity" TargetName="ButtonBackgroundBorder" Value="0"></Setter>
By the way I think you got Property="IsMouseOver" Value="False" confused with Property="IsPressed" Value="True"
and still the Opacity for ButtonBackgroundBorder on IsMouseOver=false should be 0

Answer 2

Thx, I'm stupid, don't comment:P
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.5" Storyboard.TargetName="buttonBackgroundOverBorder"
Storyboard.TargetProperty="(UIElement.Opacity)" To="1" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.5" Storyboard.TargetName="buttonBackgroundOverBorder"
Storyboard.TargetProperty="(UIElement.Opacity)" To="0" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Trigger.Setters>
<Setter Property="Background" TargetName="buttonBackgroundPressedBorder" Value="{Binding Path=PressedBackground, RelativeSource={RelativeSource TemplatedParent}}" />
</Trigger.Setters>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.5" Storyboard.TargetName="buttonBackgroundPressedBorder"
Storyboard.TargetProperty="(UIElement.Opacity)" To="1" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.5" Storyboard.TargetName="buttonBackgroundPressedBorder"
Storyboard.TargetProperty="(UIElement.Opacity)" To="0" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
Everything works fine:)