Button click is not getting fired for first time [ windows 8.1/10 tablet only ]

Question

I am writing a sample windows universal app with 3 state button ( Normal, focus and pressed )

My code is as given below.

Now I am facing an issue with button click, when button click for first time , button click event is NOT getting fired. but after first click, it works fine [Issue is happening only in windows tablet and works fine in desktop and laptop]

Is this as known issue , or any thing wrong is my code

CS

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
    }

    private void ButtonClicked(object sender, RoutedEventArgs e)
    {
        System.Diagnostics.Debug.WriteLine("Inside Button clicked:Button");
    }

    private void ImageClicked(object sender, RoutedEventArgs e)
    {
        System.Diagnostics.Debug.WriteLine("Inside Image clicked:CustomButton");
    }
}

XAML

<Page x:Class="App5.MainPage"   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App5"
    xmlns:customControls="using:App5.CustomControl"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Button Content="Button" HorizontalAlignment="Left" Margin="243,228,0,0" VerticalAlignment="Top" Width="229" Height="104" Click="ButtonClicked" />
        <customControls:CalcButton Content="Button" HorizontalAlignment="Left" Margin="705,231,0,0" VerticalAlignment="Top" Height="101" Width="262" NormalImage="/Assets/Logo.scale-100.png" PressedImage="/Assets/SmallLogo.scale-100.png" HoverImage="/Assets/SplashScreen.scale-100.png" Click="ImageClicked"/>

</Grid>
</Page>

Generic.XAML

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App5"
    xmlns:customControls="using:App5.CustomControl">

    <Style TargetType="customControls:CalcButton">
        <Setter
            Property="HorizontalAlignment"
            Value="Stretch" />
        <Setter
            Property="VerticalAlignment"
            Value="Stretch" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="customControls:CalcButton">
                    <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition To="PointerOver"
                                                      GeneratedDuration="0:0:0" />
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames
                                            Storyboard.TargetName="ButtonBrush"
                                            Storyboard.TargetProperty="Source">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0"
                                                                    Value="{Binding HoverImage, RelativeSource={RelativeSource TemplatedParent}}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames
                                            Storyboard.TargetName="ButtonBrush"
                                            Storyboard.TargetProperty="Source">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0"
                                                                    Value="{Binding PressedImage, RelativeSource={RelativeSource TemplatedParent}}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Image x:Name="ButtonBrush" Source="{TemplateBinding NormalImage}" Stretch="Fill" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style> 
</ResourceDictionary>

Answer 1

Removed the ObjectAnimationUsingKeyFrames tag and used used the DoubleAnimation tag. Also changed the target property Source to Opactity. Then update the image with in the specified duration.

<VisualState x:Name="Normal">
   <Storyboard>
     <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="NormalButton"/>
   </Storyboard>
</VisualState>