Problem animating a WPF button

Question

I have a button, this is a unique button, and his style should çn't match the style of all the others. So when you pass your mouse over this button, it should change its image. But it is not working, Here is the code... I'm starting at WPF so if you can point me what am I doing wrong would be really appreciated

<Button Name="RemoveButton" ClickMode="Press"  BorderThickness="0" Background="Transparent" Style="{StaticResource ButtonStyle1}">
        <Button.Content>
            <Grid>
                <Image x:Name="CloseActive" x:FieldModifier="public" Height="12" VerticalAlignment="Center" Source="/HTFS.Atlas.Portfolio.PortfolioClient.WCF.Controls;component/Images/tab-close.png" Visibility="Hidden" />
                <Image x:Name="CloseInactive" x:FieldModifier="public" Height="12" VerticalAlignment="Center" Source="/HTFS.Atlas.Portfolio.PortfolioClient.WCF.Controls;component/Images/tab-close-inactive.png" />
            </Grid>
        </Button.Content>
        <Button.Resources>
            <Storyboard x:Key="MouseOverAnimation">
                <DoubleAnimation Storyboard.TargetName="CloseActive" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:0.5" />
                <DoubleAnimation Storyboard.TargetName="CloseInactive" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:0.5" />
            </Storyboard>
            <Storyboard x:Key="MouseOutAnimation">
                <DoubleAnimation Storyboard.TargetName="CloseInactive" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:0.5" />
                <DoubleAnimation Storyboard.TargetName="CloseActive" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:0.5" />
            </Storyboard>
            <Style x:Key="CloseButtonStyle" TargetType="{x:Type Control}">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard Storyboard="{StaticResource MouseOverAnimation}" />
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                            <BeginStoryboard Storyboard="{StaticResource MouseOutAnimation}" />
                        </Trigger.ExitActions>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Button.Resources>
    </Button>

Answer 1

For the CloseActive image, instead of using Visibility="Hidden" try Opacity="0". In your animation you're adjusting the opacity of the image, but it's still hidden.

In addition to removing the visibility attribute, try putting the animation triggers directly in Button.Triggers

        <Button.Triggers>
            <EventTrigger RoutedEvent="Button.MouseEnter">
                <BeginStoryboard Storyboard="{StaticResource MouseOverAnimation}" />
            </EventTrigger>
            <EventTrigger RoutedEvent="Button.MouseLeave">
                <BeginStoryboard Storyboard="{StaticResource MouseOutAnimation}" />
            </EventTrigger>
        </Button.Triggers>

since you can't use Storyboard.TargetName in a storyboard called from a style. You'll also have to use event triggers instead of normal triggers. You can also remove the CloseButtonStyle since it won't be used.