title: How to overlay images in WPF?
body: <p>I have two images which I need to overlap.</p>
  
  <p>For ex- I need a solid circle on top of a solid rectangle. So, I can see the entire circle but only the corners of the rectangle. I do not want the circle to be transparent. The original <code>circle.png</code> does NOT have a rectangular border. Its border is along the boundaries of the circle only. Thus, ideally, the entire circle should not overlap the rectangle.</p>
  
  <p>This is the code for displaying an image:</p>
  
  <pre><code>                BitmapImage src = new BitmapImage();
                  src.BeginInit();
                  src.UriSource = new Uri(imgpath, UriKind.Absolute);
                  src.CacheOption = BitmapCacheOption.OnLoad;
                  src.EndInit();
                  ImageBrush ib = new ImageBrush(src);
                  ib.Viewbox = new Rect(UVRectangle.X / src.PixelWidth, UVRectangle.Y / src.PixelHeight, UVRectangle.Width / src.PixelWidth, UVRectangle.Height / src.PixelHeight);
                  gr.Background = ib; //gr is of type Grid
  </code></pre>
  
  <p>However, if I call this function twice, the second image (circle) completely covers the rectangle and thus, <strong>I end up seeing the background of the canvas</strong> instead of the corners of the rectangle.</p>
  
  <p>I think I need to merge the two images and then paint them. How should I go about doing this?</p>