How can I overlay one image onto another?

Question

I would like to display an image composed of two images.

I want image rectangle.png to show with image sticker.png on top of it with its left-hand corner at pixel 10, 10.

Here is as far as I got, but how do I combine the images?

Image image = new Image();
image.Source = new BitmapImage(new Uri(@"c:\test\rectangle.png"));
image.Stretch = Stretch.None;
image.HorizontalAlignment = HorizontalAlignment.Left;

Image imageSticker = new Image();
imageSticker.Source = new BitmapImage(new Uri(@"c:\test\sticker.png"));

image.OverlayImage(imageSticker, 10, 10); //how to do this?

TheContent.Content = image;

Answer 1

You need a Panel to add both Image controls to. A Grid or Canvas will allow this, but I would go with the Grid as it will constrain the Image controls (thereby stretching or shrinking them as appropriate).

Image image = new Image();
image.Source = new BitmapImage(new Uri(@"c:\test\rectangle.png"));
image.Stretch = Stretch.None;
image.HorizontalAlignment = HorizontalAlignment.Left;

Image imageSticker = new Image();
imageSticker.Source = new BitmapImage(new Uri(@"c:\test\sticker.png"));
imageStiker.Margin = new Thickness(10, 10, 0, 0);

Grid grid = new Grid();
grid.Children.Add(image);
grid.Children.Add(imageSticker);

TheContent.Content = grid;

Answer 2

You can just put one Image control over the top of the other Image control in your View. Place both into a Grid or Canvas, and just overlay one of the images on top of the other. This also lets you using opacity to do blending, and works very well.

If you need to get them into the same image, there are a couple of options....

You could make a WritableBitmap out of the first image, then manually "paint" the other image pixels on top of the first one. This then can act as an image source for your image in the display.

Alternatively, you could do the overlay I mentioned above, and render this into a RenderTargetBitmap. This could then be used as your image source.