WPF Storyboard issue
- by Vinjamuri
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>