UWP按钮悬停背景未更改

问题描述

 <Button x:Name="btn" Tag="{x:Bind Id}" Click="btn_Click" Width="35" Height="40" ClickMode="Press" Margin="540,-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>

您好，我希望将鼠标悬停在按钮上时更改背景图像。但这并没有改变。

平台：UWP

版本：17763

 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="normalBackground" Storyboard.TargetProperty="Visibility">
                                                            <discreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                                        </ObjectAnimationUsingKeyFrames>

当我删除上面的代码时，图片出现了，但是正常的图片没有被隐藏。

解决方法

UWP按钮悬停背景未更改

问题在于按钮的内容为空，因此当光标指向上方时无法检测到PointerOver事件。要解决此问题，请使用Transparent矩形按钮填充内容，如下所示。

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