Question

I have a Canvas on which I have dynamically added some shapes. I now want to add an Image over the canvas.

Everything works fine, if I add Image out of Canvas but when I am trying to add the Image on the Canvas, the image is not showing up. Maybe it is hidden behind the Shapes drawn on Canvas.

My question is how can I bring the Image in front of the Canvas.

This is how I am adding image :

string strUri2 = String.Format(@"pack://application:,,,/MyFirstWPF;component/Images/tt.jpg");
image1.Source = new BitmapImage(new Uri(strUri2));

Note-> the shapes on canvas are added before adding the image.

Answer 1

You can do this 2 ways:

• change the Z-Index of the Image to bring it to the front of the Z-Order on the Canvas
• use a container that allows the Canvas to be overlaid with the Image element (e.g a Grid)

If you use the Z-Index method with the Canvas then to do it properly you have to concern yourself with the Z-Index of other elements on the Canvas….because you have to choose a Z-Index value that is bigger than everything else.

You could guess, and just pick a large Z-Index which you think will never be reached by the other elements, or you could scan through the children of the Canvas and find the highest Z-Index used, so that you can always set a higher one….so that you can ensure you “Bring to Front” the Image.

• BringToFront in WPF

---

(this is probably the same as what you were using when you say “Out of Canvas”)

There’s an alternative way which means you don’t have to explicitly bother with Z-Indexes, just use a Grid and specify the Canvas and Image as children…they will occupy the same cell, and so overlap each other…the Image being the last child will have the largest implied Z-Index.

<Grid>
    <Canvas x:Name="mycanvas"/>
    <Image x:Name="image1/>
</Grid>