Setting a background image for a button

Question

Really stupid question but I have set a background image for my button via XAML. But when I run the application and hover over it changes to default looking skin.

I can't work out how to do a Mouse over?

<Button x:Name="btnPlay" Content="Play" Canvas.Left="93" Canvas.Top="93" Width="183" 
            Click="button_Click" Height="84" FontFamily="Showcard Gothic" Cursor="Hand" BorderBrush="{x:Null}">
    <Button.Background>
        <ImageBrush ImageSource="Images/BlueButton.png"/>
    </Button.Background>
</Button>

Answer 1

Here is a modification of this solution . Consider using Background="{TemplateBinding Background}" for the Border inside the Template , so it update the Background of the Border when Button 's Background changed.

<Button x:Name="btnPlay" Content="Play" Canvas.Left="93" Canvas.Top="93" Width="183" 
        Click="button_Click"   Height="84" FontFamily="Showcard Gothic" Cursor="Hand" 
        BorderBrush="{x:Null}">
    <Button.Background>
        <ImageBrush ImageSource="/WpfApplication1;component/5.png" />
    </Button.Background>
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Border Name="border" Background="{TemplateBinding Background}"> <!--Consider this-->
                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background">
                        <Setter.Value>
                            <ImageBrush ImageSource="/WpfApplication1;component/5.png" />
                        </Setter.Value>
                    </Setter>
                    <Setter Property="BorderBrush" Value="Black"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Button.Template>
</Button>