The problem you're having is that you set the background of the button rather than the content. The content is unchanged by visual states unlike the background property.
Try something more like:
<Button Width="300" Height="400">
<Image Source="Assets/Logo.scale-100.png" Stretch="UniformToFill"/>
</Button>
if you want even more control over hover and mousedown appearance you can override the Pressed
and PointerOver
visual states using the styles found here.
The visual states also explain why your background disappears. Look at the visual state for 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>
Notice that the Background
property is animated to the theme resource ButtonPointerOverBackgroundThemeBrush
. This will override whatever you set the background to be while the control is in the PointerOver
state.