WPF Storyboard issue

Question

In the following template, the button is displayed with Normal image when the application is started, but when the mouse is over, the button doesn't get changed to mouse over image. Appreciate your help!!! I want some solution without major changes in the design.

<Style TargetType="{x:Type local:ButtonControl}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:ButtonControl}">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal">
                                <Storyboard>
                                        <DoubleAnimation 
                                            Duration="00:00:00.20"
                                            Storyboard.TargetName="imgNormal"
                                            Storyboard.TargetProperty="Opacity" To="1" />
                                </Storyboard>
                                </VisualState>
                                <VisualState x:Name="MouseOver">
                                <Storyboard>
                                        <DoubleAnimation 
                                            Duration="00:00:00.20"
                                            Storyboard.TargetName="imgNormal"
                                            Storyboard.TargetProperty="Opacity" To="0" />
                                        <DoubleAnimation 
                                            Duration="00:00:00.20"
                                            Storyboard.TargetName="imgOver"
                                            Storyboard.TargetProperty="Opacity" To="1" />
                                </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                <Storyboard>
                                        <DoubleAnimation 
                                            Duration="00:00:00.20"
                                            Storyboard.TargetName="imgDisable" 
                                            Storyboard.TargetProperty="Opacity" To="1" />
                                </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                <Storyboard>
                                        <DoubleAnimation 
                                            Duration="00:00:00.20"
                                            Storyboard.TargetName="imgPress" 
                                            Storyboard.TargetProperty="Opacity" To="1" />
                                </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid>
                            <Border x:Name="imgNormal">
                                <Image Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=NormalImage}" Opacity="1" Stretch="UniformToFill"/>
                            </Border>
                        </Grid>
                        <Grid>
                            <Border x:Name="imgOver">
                                <Image Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=MouseOverImage}" Opacity="0" Stretch="UniformToFill"/>
                            </Border>
                        </Grid>
                        <Grid>
                            <Border x:Name="imgDisable">
                                <Image Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DisableImage}" Opacity="0" Stretch="UniformToFill"/>
                            </Border>
                        </Grid>
                        <Grid>
                            <Border x:Name="imgPress">
                                <Image Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=MousePressImage}" Opacity="0" Stretch="UniformToFill"/>
                            </Border>
                        </Grid>
                    </Grid>
                </ControlTemplate>
        </Setter.Value>
    </Setter>
    </Style>

Answer 1

I found the problem.. I should be having the Opacity like below.. not as listed in the code above..

<Border x:Name="imgNormal" Opacity="0">