How to draw/overlay an image file to a bitmap image?

Question

I have a video feed from a Kinect sensor hosted by an image stored as a bitmap. My question is how do I overlay an image, for example a .png on to the video fee

Answer 1

To create merged image you can use DrawingContext that gives you methods like DrawText or DrawImage and then render it using RenderTargetBitmap.Render:

var drawingVisual = new DrawingVisual();
var drawingContext = drawingVisual.RenderOpen();
drawingContext.DrawImage(BitmapSource.Create(colorFrame.Width, colorFrame.Height, 96, 96, PixelFormats.Bgr32, null, colorData, colorFrame.Width * colorFrame.BytesPerPixel), 
                          new Rect(new Size(colorFrame.Width, colorFrame.Height)));
var overlayImage = new BitmapImage(new Uri("Images/boxbag.jpg"));
drawingContext.DrawImage(overlayImage, 
                          new Rect(x, y, overlayImage.Width, overlayImage.Height));
drawingContext.Close();
var mergedImage = new RenderTargetBitmap(colorFrame.Width, colorFrame.Height, 96, 96, PixelFormats.Pbgra32);
mergedImage.Render(drawingVisual);

KinectVideo.Source = mergedImage;

Answer 2

If you just want display an Image on top of another UI control, then you can either just declare one after the other UI elements, or set the Panel.ZIndex property:

<Grid>
    <Border Background="Black" />
    <Image Source="/AppName;component/Images/ImageName.jpg" Width="50" Height="50" />
</Grid>

Or:

<Grid>
    <Image Source="/AppName;component/Images/ImageName.jpg" 
        Width="50" Height="50" Panel.ZIndex="1" />
    <Border Background="Black" />
</Grid>

To find out how to data bind a BitmapImage to an Image.ItemsSource property, please see the Bind Xaml bitmap image question here on StackOverflow. To position the Image in a specific place, you can either use the Image.Margin property or put it in a Canvas and use the Canvas.Left and Canvas.Top properties.