title: WPF Image with two sources
body: <p>I'd like to extend Image class by adding second source. I want to define second source in XAML (like original source) and change these images when mouse enters/leaves this image.</p>
  
  <p>I tried myself with:</p>
  
  <pre><code>class MainMenuImageButton : Image
      {
          public static readonly DependencyProperty Source2Property;
          public ImageSource Source2 
          {
              get { return Source2; }
              set
              {
                  this.MouseEnter+=new System.Windows.Input.MouseEventHandler(MainMenuImageButton_MouseEnter);
              }
          }
          public void MainMenuImageButton_MouseEnter(object sender, MouseEventArgs e)
          {
              this.Source = Source2;
          }
      }
  </code></pre>
  
  <p>But it doesn't work and I think I do it tottaly wrong. Can somebody help?</p>
  
  <p><strong>[UPDATE]</strong></p>
  
  <p>I wrote this:</p>
  
  <pre><code>class MainMenuImageButton : Image
  {
      protected override HitTestResult HitTestCore(PointHitTestParameters hitTestParameters)
      {
          var source = (BitmapSource)Source;
          var x = (int)(hitTestParameters.HitPoint.X / ActualWidth * source.PixelWidth);
          var y = (int)(hitTestParameters.HitPoint.Y / ActualHeight * source.PixelHeight);
          var pixels = new byte[4];
          source.CopyPixels(new Int32Rect(x, y, 1, 1), pixels, 4, 0);
          if (pixels[3] &lt; 10) return null;
          return new PointHitTestResult(this, hitTestParameters.HitPoint);
      }
      public ImageSource Source1
      {
          get { return GetValue(ImageSourceProperty) as ImageSource; }
          set { base.SetValue(ImageSourceProperty, value); }
      }
      public static readonly DependencyProperty ImageSourceProperty = DependencyProperty.Register("Source1", typeof(ImageSource), typeof(MainMenuImageButton));
      public ImageSource Source2
      {
          get { return GetValue(ImageSource2Property) as ImageSource; }
          set { base.SetValue(ImageSource2Property, value); }
      }
      public static readonly DependencyProperty ImageSource2Property = DependencyProperty.Register("Source2", typeof(ImageSource), typeof(MainMenuImageButton));
      public MainMenuImageButton() : base() 
      {
          this.MouseEnter += new MouseEventHandler(MainMenuImageButton_MouseEnter);
          this.MouseLeave += new MouseEventHandler(MainMenuImageButton_MouseLeave);
      }
  
      void MainMenuImageButton_MouseLeave(object sender, MouseEventArgs e)
      {
          this.Source = this.Source1;
      }
  
      void MainMenuImageButton_MouseEnter(object sender, MouseEventArgs e)
      {
          this.Source = this.Source2;
      }
  }
  </code></pre>
  
  <p>But sometimes it works and sometimes there is exception: "An unhandled exception of type 'System.ArgumentException' occurred in PresentationCore.dll</p>
  
  <p>Additional information: The value is outside the expected range."</p>
  
  <hr>
  
  <p>I'm not sure if I understood, but I tried this:</p>
  
  <pre><code>class MainMenuImageButton : Image
  {
      public static readonly DependencyProperty Source2Property = DependencyProperty.Register("Source2", typeof(ImageSource), typeof(MainMenuImageButton), new PropertyMetadata(true));
      public ImageSource Source2 
      {
          get { return (ImageSource)GetValue(Source2Property); }
          set
          {
              BitmapImage logo = new BitmapImage(new Uri(value.ToString(), UriKind.Relative));
              SetValue(Source2Property, logo); 
              this.MouseEnter+=new System.Windows.Input.MouseEventHandler(MainMenuImageButton_MouseEnter);
          }
      }
      public void MainMenuImageButton_MouseEnter(object sender, MouseEventArgs e)
      {
          this.Source = Source2;
      }
  }
  </code></pre>
  
  <p>And still nothing. Wham am I doing wrong?</p>