title: How to change an image source after clicking a button?
body: <p>I'm using an<code>Image</code> as a button. So I need the image source to be <code>/image1.png</code> by default, and when I click the Image, it will make an <code>if</code> function and change its image source to <code>/image2.png</code>. I changes the image correctly, the problem is that I have to click two times the image to change when it is first clicked.</p>
  
  <p>This is what I'm using:</p>
  
  <pre><code>public MainWindow()
      {
          InitializeComponent();
          IsPlaying = false;
          //PlayBtn.Source = (ImageSource)new ImageSourceConverter().ConvertFrom(@"C:\Users\myusername\Documents\Visual Studio 2013\Projects\Project1\Project1WPF\image1.png");
      }
  
  private void PlayBtn_MouseDown(object sender, MouseButtonEventArgs e)
      {
          if(IsPlaying == false)
          {
  
              PlayBtn.Source = (ImageSource)new ImageSourceConverter().ConvertFrom(@"C:\Users\myusername\Documents\Visual Studio 2013\Projects\Project1\Project1WPF\image1.png");
              IsPlaying = true;
          }else if(IsPlaying == true)
          {
  
              PlayBtn.Source = (ImageSource)new ImageSourceConverter().ConvertFrom(@"C:\Users\myusername\Documents\Visual Studio 2013\Projects\Project1\Project1WPF\image2.png");
              IsPlaying = false;
          }       
  </code></pre>