创建具有图像背景的按钮，该按钮在鼠标停留和按下状态期间保持不变

Question

我使用一个按钮，其背景为图像。我的问题是，每当我将鼠标放在按钮上或单击按钮时，图像就会消失。

总之我要设置悬停图像，并按下按钮图像。

我的代码按钮是

<Button Height="47" VerticalAlignment="Top" Width="47" Foreground="{x:Null}" BorderBrush="{x:Null}" BorderThickness="0" ToolTipService.ToolTip="Emoticons" TabIndex="4" Margin="230,0,0,0">
                <Button.Background>
                    <ImageBrush ImageSource="ms-appx:/Assets/Emoticons/emo (3).png" Stretch="UniformToFill"/>
                </Button.Background>
</Button>

Answer 1

问题是您设置了按钮的背景而不是内容。与背景属性不同，内容不受视觉状态的影响。

试试这样写:

<Button Width="300" Height="400">
    <Image Source="Assets/Logo.scale-100.png" Stretch="UniformToFill"/>
</Button>

如果你想对鼠标悬停和鼠标下移的外观有更多的控制，你可以使用这里找到的样式覆盖Pressed和PointerOver的视觉状态。

视觉状态也解释了为什么你的背景消失了。看看PointerOver的视觉状态:

<VisualState x:Name="PointerOver">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                       Storyboard.TargetProperty="Background">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPointerOverBackgroundThemeBrush}" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                       Storyboard.TargetProperty="Foreground">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPointerOverForegroundThemeBrush}" />
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>

注意，Background属性被动画化到主题资源ButtonPointerOverBackgroundThemeBrush。当控件处于PointerOver状态时，这将覆盖你设置的背景颜色