Question

I’m new to Windows Phone Dev., I intend to do:

1. Set the canvas background with Image A;
2. Add another Image B on top of Image A.

What I have achieved:

By using ImageBrush, I’m able to set the canvas background image, but I got a problem when trying to use Canvas.Children.Add(imageB) to put imageB on top of Image A. When running the app, it only show me the imageA with no imageB on top.

There’s no Null Reference Exception and I am sure that both Image A and B are loaded.

My question is: How to set canvas to display ImageB and keep imageB responsive to Manipulation event so I can touch and move it later?

Here’s my related code:

ImageBrush brush = new ImageBrush();
Image imageB = new Image();
imageB.Source = new BitmapImage(new Uri("/Assets/imageB.png", UriKind.Relative));

//...here I set the ImageBrush as imageA
canvas.Background = brush; // Can display imageA 

canvas.Children.Add(imageB);
imageB.ManipulationDelta += ImageB_ManipulationDelta;
imageB.ManipulationCompleted += ImageB_ManipulationCompleted;

The reason why I insist to put image B on top of Image A is I am planning to set EventHandler on Image B so that I can use Image B to repond to ManipulationDelta event.

I did some research on that:

Windowsphone geek: Working with Images

Windows Phone 7 dragging and flicking UI

But no luck.

Thanks for the help 🙂

Answer 1

I think I’ve just found where the problem is:

I didn’t set the Canvas.SetLeft and Canvas.SetTop, I should add two lines before using canvas.Children.Add() like:

...
Canvas.SetLeft(imageB, point.X);
Canvas.SetTop(imageB, point.Y);
canvas.Children.Add(imageB);
...

and viola, Problem solved.