UWP Button Hover Background not changed

Question

 <Button x:Name="btn" Tag="{x:Bind Id}" Click="btn_Click" Width="35" Height="40" ClickMode="Press" Margin="540,0,0,-18">
                                <Button.Template>
                                    <ControlTemplate TargetType="Button">
                                        <Grid>
                                            <VisualStateManager.VisualStateGroups>
                                                <VisualStateGroup>
                                                    <VisualState x:Name="Normal"/>
                                                    <VisualState x:Name="PointerOver">
                                                        <Storyboard>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverBackground" Storyboard.TargetProperty="Visibility">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalBackground" Storyboard.TargetProperty="Visibility">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                                            </ObjectAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="Pressed">
                                                        <Storyboard>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBackground" Storyboard.TargetProperty="Visibility">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalBackground" Storyboard.TargetProperty="Visibility">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                                            </ObjectAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualState>
                                                </VisualStateGroup>
                                                <VisualStateGroup x:Name="FocusStates">
                                                </VisualStateGroup>
                                            </VisualStateManager.VisualStateGroups>
                                            <Border x:Name="Border">
                                                <Grid>
                                                    <Image x:Name="NormalBackground" Source="Assets/NextSmall.png" Stretch="None"/>
                                                    <Image x:Name="HoverBackground"  Source="Assets/NextBig.png" Visibility="Collapsed"/>
                                                    <Image x:Name="PressedBackground" Source="Assets/NextBig.png" Visibility="Collapsed" />
                                                    <ContentPresenter x:Name="ContentPresenter"
                                                                      Content="{TemplateBinding Content}"
                                                                      ContentTransitions="{TemplateBinding ContentTransitions}"
                                                                      ContentTemplate="{TemplateBinding ContentTemplate}"
                                                                      Margin="{TemplateBinding Padding}"
                                                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                                    </ContentPresenter>
                                                </Grid>
                                            </Border>
                                        </Grid>
                                    </ControlTemplate>
                                </Button.Template>
                            </Button>

Hello I want the background image to change when I hover over the button. But it doesn't change.

Platform : UWP

Version : 17763

 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalBackground" Storyboard.TargetProperty="Visibility">
                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                                        </ObjectAnimationUsingKeyFrames>

When I delete the code above, the picture comes up but the normal picture is not hidden.

Answer 1

UWP Button Hover Background not changed

The problem is the button's content is empty, so it can't detect PointerOver event when the cursor is point over. For solve this problem please fill the content with Transparent Rectangle for button like the following.

<Button
    x:Name="btn"
    Width="60"
    Height="60"
    Margin="540,0,0,-18"
    Click="btn_Click"
    ClickMode="Press"    
    >
    <Button.Content>
        <Rectangle Fill="Transparent" Height="60" Width="60"/>
    </Button.Content>
    <Button.Template>