WPF Storyboard only fires once - wpf

Question

can anyone check my code and tell me what's wrong with it?
This is the code i've been working on and i can't figure out why the mouseover event won't fire anymore after i clicked the button. please help, thanks!
UPDATE: I tried removing the IsPressed event, and somehow the code works perfectly, there is a conflict with the IsMouseover & IsPressed and i have no idea on how to fix it.
<Style x:Key="MediaControls" TargetType="{x:Type Button}">
<Setter Property="Focusable" Value="False"/>
<Setter Property="VerticalAlignment" Value="Bottom"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<ControlTemplate.Resources>
<Storyboard x:Key="FadeIn">
<DoubleAnimation Duration="0:0:0.15" Storyboard.TargetName="ImageContainer" Storyboard.TargetProperty="Opacity" To="0.8" />
</Storyboard>
<Storyboard x:Key="FadeOut">
<DoubleAnimation Duration="0:0:0.15" Storyboard.TargetName="ImageContainer" Storyboard.TargetProperty="Opacity" To="1" />
</Storyboard>
<Storyboard x:Key="ClickIn">
<DoubleAnimation Duration="0:0:0.20" Storyboard.TargetName="ImageContainer" Storyboard.TargetProperty="Opacity" To="0.5" />
</Storyboard>
<Storyboard x:Key="ClickOut">
<DoubleAnimation Duration="0:0:0.20" Storyboard.TargetName="ImageContainer" Storyboard.TargetProperty="Opacity" To="1" />
</Storyboard>
</ControlTemplate.Resources>
<Border x:Name="ImageContainer" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
<ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource FadeIn}" x:Name="FadeIn_BeginStoryboard" />
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource FadeOut}" x:Name="FadeOut_BeginStoryboard" />
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource ClickIn}" x:Name="ClickIn_BeginStoryboard" />
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource ClickOut}" x:Name="ClickOut_BeginStoryboard" />
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Answer 1

You can set FillBehavior to Stop to make the animations stop covering the property when they are done.
Modify your resources section with the following code.
<ControlTemplate.Resources>
<Storyboard x:Key="FadeIn">
<DoubleAnimation Duration="0:0:0.15" Storyboard.TargetName="ImageContainer" Storyboard.TargetProperty="Opacity" To="0.8" />
</Storyboard>
<Storyboard x:Key="FadeOut">
<DoubleAnimation Duration="0:0:0.15" FillBehavior="Stop" Storyboard.TargetName="ImageContainer" Storyboard.TargetProperty="Opacity" To="1" />
</Storyboard>
<Storyboard x:Key="ClickIn">
<DoubleAnimation Duration="0:0:0.20" Storyboard.TargetName="ImageContainer" Storyboard.TargetProperty="Opacity" To="0.5" />
</Storyboard>
<Storyboard x:Key="ClickOut">
<DoubleAnimation Duration="0:0:0.20" FillBehavior="Stop" Storyboard.TargetName="ImageContainer" Storyboard.TargetProperty="Opacity" To="1" />
</Storyboard>
</ControlTemplate.Resources>

Answer 2

Simplify your ControlTemplate by using visual states:
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0:0:0.15"
Storyboard.TargetProperty="Opacity" To="0.8" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0:0:0.20"
Storyboard.TargetProperty="Opacity" To="0.5" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="contentPresenter"
Focusable="False" RecognizesAccessKey="True"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="{TemplateBinding Padding}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</ControlTemplate>