how to overlay an image over an image in WPF?

Question

I'm trying to figure out how to overlay an image or textbox over an image in WPF. The base image will be hosting a video feed from a Kinect sensor and I want to overlay an image on it. For example the video feed will have a textbox on the feed that will update a counter or an image of a tree on top of the video feed.

Is there a straightforward way of achieving this in the layout? Is it just a matter of changing properties or adding a canvas?

The below picture better illustrates what it is I'm trying to do:

Answer 1

You can use two transparent canvas inside the Grid without any row and column then place your objects in Back and front Canvas accordingly they will overlap

that is:

<Grid>
    <VideoControl><!-- I've never tried video --></VideoControl>
    <TextBlock Text="My Text" />
</Grid>

Usually you specify <Grid.ColumnDefinitions> and <Grid.RowDefinitions> but since you do not du that here the controls will overlap

HTH

Answer 2

The usual way for me to overlay items in WPF is just to put all of the elements in a Grid. If you do not define any Columns or Rows the elements will overlap.

Example

<Grid>
  <Image Source="image on lowest layer" />
  <Image Source="overlaying image" />
</Grid>