Create button with image background which stays during mouse over and pressed states

Question

I am using a button with its background as image. My problem is that whenever I point my mouse over the button or click the button the image disappears.

In short i want to set hover image, and button pressed image.

My code for button is

<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

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.