WPF Storyboard only fires once

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>