c# - changing image background of button on hover and click

Question

I added a button then changed it's background to a picture.. when it run if I hover on the button the picture is gone and when I click it will become solid white I want to change that .. I want to display the picture on hover and click

how to do this ?? please help me

im using visual studio 2013 - windows store - c#/xaml

here is my xaml code for the btton

 <Button Content="Asia" HorizontalAlignment="Left" Margin="232,366,0,0" VerticalAlignment="Top" Height="395" Width="235" BorderThickness="0">
        <Button.Background>
            <ImageBrush ImageSource="south amirica.png"/>
        </Button.Background>
    </Button>

do I change something here ??

Answer 1

Behaviour you're describing is part of default Template for a Button. To customize this behaviour you can define your custom Button.Template:

<Button Content="Asia" HorizontalAlignment="Left" Margin="232,366,0,0" VerticalAlignment="Top" Height="395" Width="235">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Grid>
                <Grid.Background>
                    <ImageBrush ImageSource="south amirica.png"/>
                </Grid.Background>
                <ContentPresenter/>
            </Grid>
        </ControlTemplate>
    </Button.Template>
</Button>

Be aware that this will also remove all other effects like for example button press effect but you can add it to your Template if you want

Answer 2

Try this

<Button Height="35" Width="200">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Grid>
                <Grid.Resources>
                    <BitmapImage x:Key="NormalButton" UriSource="Assets/NormalButton.png"></BitmapImage>
                    <BitmapImage x:Key="OnMouseOver" UriSource="Assets/OnMouseOver.png"></BitmapImage>
                    <BitmapImage x:Key="OnPresed" UriSource="Assets/OnPresed.png"></BitmapImage>
                </Grid.Resources>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal"/>
                        <VisualState x:Name="PointerOver">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="ImageSource" Storyboard.TargetName="Border">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource OnMouseOver}"/>
                                </ObjectAnimationUsingKeyFrames>                     
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Pressed">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="ImageSource" Storyboard.TargetName="Border">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource OnPresed}"/>
                                </ObjectAnimationUsingKeyFrames>                                   
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Grid>
                    <Grid.Background>
                        <ImageBrush x:Name="Border" ImageSource="{StaticResource NormalButton}"></ImageBrush>
                    </Grid.Background>                      
                    <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Grid>
            </Grid>
        </ControlTemplate>
    </Button.Template>        
</Button>