CODEWITHSUNDEEP
c#wpfoverlay
Brian Var
Brian Var

Reputation: 6227

how to overlay an image over an image in WPF?

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:

Controls over a live video feed

Upvotes: 8

Views: 17781

Answers (2)

default
default

Reputation: 11635

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>

Upvotes: 7

Firoz
Firoz

Reputation: 7454

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

Upvotes: 12

Related Questions