UWP 按钮悬停背景未更改答案

【问题标题】：UWP Button Hover Background not changedUWP 按钮悬停背景未更改
【发布时间】：2020-08-21 17:20:34
【问题描述】：

 <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>

您好，当我将鼠标悬停在按钮上时，我希望背景图像发生变化。但它不会改变。

平台：UWP

版本：17763

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

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

【问题讨论】：

标签： button uwp background-image mousehover

【解决方案1】：

UWP 按钮悬停背景未更改

问题是按钮的内容是空的，所以当光标指向时它无法检测到PointerOver事件。为了解决这个问题，请用Transparent Rectangle 为按钮填充内容，如下所示。

<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>

【讨论】：