Got Blank result when Adding Image to Canvas

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

Your code looks like you create an Image called imageB but you never set it. The line

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

seems strange, shouln't it be

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

Answer 2

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.

Answer 3

I had the same problem as you. after lots of search finally I've found the solution. this code will work as you expect:

BitmapImage img = new BitmapImage(new Uri("Assets/imageB.png", UriKind.Relative));
img.CreateOptions = BitmapCreateOptions.None;
Image imageB = new Image();
imageB.Source = img;
img.ImageOpened += (s, e) =>
{
    canvas.Children.Add(imageB);
};