title: WPF Button Mouseover Image
body: <p>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.</p>
  
  <p>I created a custom button from some code I found on SO. The code is (in a new resource dictionary):</p>
  
  <pre><code>    &lt;!-- This style is used for buttons, to remove the WPF default 'animated' mouse over effect --&gt;
      &lt;Style x:Key="StartMenuButtons" TargetType="Button"&gt;
          &lt;Setter Property="OverridesDefaultStyle" Value="True"/&gt;
          &lt;Setter Property="Margin" Value="5"/&gt;
          &lt;Setter Property="Template"&gt;
              &lt;Setter.Value&gt;
                  &lt;ControlTemplate TargetType="Button"&gt;
                      &lt;Border Name="border" 
                          BorderThickness="0" 
                          Background="{TemplateBinding Background}"&gt;
                          &lt;ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" /&gt;
                      &lt;/Border&gt;
                      &lt;ControlTemplate.Triggers&gt;
                          &lt;Trigger Property="IsMouseOver" Value="True"&gt;
  
  
                          &lt;!-- UPDATE THE BUTTON BACKGROUND --&gt;
                          &lt;Setter Property="Background" Value="WHAT GOES HERE"  TargetName="border"/&gt;
  
  
                      &lt;/Trigger&gt;
                      &lt;/ControlTemplate.Triggers&gt;
                  &lt;/ControlTemplate&gt;
              &lt;/Setter.Value&gt;
          &lt;/Setter&gt;
      &lt;/Style&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p><strong>Summary:</strong></p>
  
  <p>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?</p>
  
  <p><strong>Update</strong>
  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 <em>Resources</em>.</p>
  
  <p>The code is:</p>
  
  <pre><code>&lt;ControlTemplate.Triggers&gt;
      &lt;Trigger Property="IsMouseOver" Value="True"&gt;
          &lt;Setter Property="Background"&gt;
            &lt;Setter.Value&gt;
               &lt;ImageBrush ImageSource="/Simon;component/Resources/btn_bg_hover.jpg" /&gt;
            &lt;/Setter.Value&gt;
          &lt;/Setter&gt;
       &lt;/Trigger&gt;
  </code></pre>
  
  <p>The file structure is</p>
  
  <pre><code>Simon
      Simon
          Resources
              all the images
          Fonts
          bin
          obj
          Properties
  </code></pre>
  
  <p><strong>Solution</strong></p>
  
  <p>The following is the complete code to allow for a mouseover image change on the button:</p>
  
  <pre><code>&lt;!-- This style is used for buttons, to remove the WPF default 'animated' mouse over effect --&gt;
      &lt;Style x:Key="StartMenuButtons" TargetType="Button"&gt;
          &lt;Setter Property="OverridesDefaultStyle" Value="True"/&gt;
          &lt;Setter Property="Margin" Value="5"/&gt;
          &lt;Setter Property="Template"&gt;
              &lt;Setter.Value&gt;
                  &lt;ControlTemplate TargetType="Button"&gt;
                      &lt;Border Name="border" 
                          BorderThickness="0" 
                          Background="{TemplateBinding Background}"&gt;
                          &lt;ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" /&gt;
                      &lt;/Border&gt;
                      &lt;ControlTemplate.Triggers&gt;
                          &lt;Trigger Property="IsMouseOver" Value="True"&gt;
                              &lt;Setter Property="Background" TargetName="border"&gt;
                              &lt;Setter.Value&gt;
                                  &lt;ImageBrush ImageSource="Resources/btn_bg_hover.jpg" /&gt;
                              &lt;/Setter.Value&gt;
                          &lt;/Setter&gt;
  
                      &lt;/Trigger&gt;
                      &lt;/ControlTemplate.Triggers&gt;
                  &lt;/ControlTemplate&gt;
              &lt;/Setter.Value&gt;
          &lt;/Setter&gt;
      &lt;/Style&gt;
  </code></pre>
  
  <p>For the actual image, I placed it in the <em>Resources</em> folder that is in the root directory. After importing the images in there using the resources tool in visual studio, I updated the image <em>build settings</em> to <em>Resource</em> in the Properties pane.</p>
  
  <p><strong>Thanks for the solution dbaseman</strong></p>