WPF Button Mouseover Image

I am learning C# and XAML to build windows applications. I wanted to create a button that has an image as its background. But when hovering over the button, the background of the button should change to another "highlighted" image. I attempted to add the background images into Resources.resx. I had to create a custom button using xaml styles to get rid of the default highlight effect of a wpf button.

I created a custom button from some code I found on SO. The code is (in a new resource dictionary):

    <!-- This style is used for buttons, to remove the WPF default 'animated' mouse over effect -->
    <Style x:Key="StartMenuButtons" TargetType="Button">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Margin" Value="5"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Name="border" 
                        BorderThickness="0" 
                        Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">


                        <!-- UPDATE THE BUTTON BACKGROUND -->
                        <Setter Property="Background" Value="WHAT GOES HERE"  TargetName="border"/>


                    </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

What do I put so that the background changes to another image, whether it is in my resources.resx or another location? (Not sure where to put the image to access it). I searched SO but the solutions I found were not exactly what I am dealing with. If this is a duplicate question, I apologize.

Summary:

How do I change the background image of a button on a mouse over trigger in XAML? Where do I put the image so that it can be accessed in the trigger code?

Update This is what I have put as the trigger action, but the image does not update. I made sure to set the image build action to resource and put it in a folder called Resources.

The code is:

<ControlTemplate.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Background">
          <Setter.Value>
             <ImageBrush ImageSource="/Simon;component/Resources/btn_bg_hover.jpg" />
          </Setter.Value>
        </Setter>
     </Trigger>

The file structure is

Simon
    Simon
        Resources
            all the images
        Fonts
        bin
        obj
        Properties

Solution

The following is the complete code to allow for a mouseover image change on the button:

<!-- This style is used for buttons, to remove the WPF default 'animated' mouse over effect -->
    <Style x:Key="StartMenuButtons" TargetType="Button">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Margin" Value="5"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Name="border" 
                        BorderThickness="0" 
                        Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" TargetName="border">
                            <Setter.Value>
                                <ImageBrush ImageSource="Resources/btn_bg_hover.jpg" />
                            </Setter.Value>
                        </Setter>

                    </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

For the actual image, I placed it in the Resources folder that is in the root directory. After importing the images in there using the resources tool in visual studio, I updated the image build settings to Resource in the Properties pane.

Thanks for the solution dbaseman

I think it's easier to just add the image to an /Images folder in the project. Then this is the syntax you use:

<ControlTemplate TargetType="Button">
    <Border Name="border" BorderThickness="0" 
                Background="Transparent">
          <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background">
               <Setter.Value>
                   <ImageBrush ImageSource="/MyProjectName;component/Images/MyImage.jpg" />
               </Setter.Value>
            </Setter>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

(Assuming your image MyImage.jpg is in the Images folder in the root of your project.)

Just make sure that MyImage.jpg has its "Build Action" set to "Resource".

Here is another way to do this.

You can use the two events of the image MouseEnter and MouseLeave. Now in your code do this.

XAML

<Image x:Name="image1" HorizontalAlignment="Left" Height="142" Margin="64,51,0,0" VerticalAlignment="Top" Width="150" MouseEnter="image1_MouseEnter" MouseLeave="image1_MouseLeave"   />

C#

private void image1_MouseEnter(object sender, MouseEventArgs e)
{
    string packUri = @"pack://application:,,,/Resources/Polaroid.png";
    image1.Source = new ImageSourceConverter().ConvertFromString(packUri) as ImageSource;
}

private void image1_MouseLeave(object sender, MouseEventArgs e)
{
    string packUri = @"pack://application:,,,/Resources/PolaroidOver.png";
    image1.Source = new ImageSourceConverter().ConvertFromString(packUri) as ImageSource;
}