Over the weekend I was pounding away at my first ‘WinRT’ application which I plan to submit to the marketplace.  During this process I ran into some really odd issues with getting images to display in the UI at runtime.

Let me explain my issue:

I had images which were nested inside my Assets folder as below:
/Assets
  -> /Category
         -> /Animals
                -> horse.png

These images were being bound to a view which was not in the root of the solution but rather in a views folder as below:
/Views
  -> /Gameboard.xaml

Originally I was trying to use binding to the Image control to a ImageSource property.  In my ImageSource property I was doing something like below

public ImageSource Image
{
	get
	{
		var uri = new Uri("ms-appx:///Assets/Category/Animals/horse.png");
		return new Bitmapimage(uri);
	}
}

When I would put a break point in the property everything appeared right, however when I would bind to the UI no image would show up.    I then tried to play with the URI path by adding ../ by putting the full ‘pack’ uri in there but nothing seemed to work.  To prove that the image was NOT loading I also hooked up the ImageFailed event to the image control and of course that was helpful by providing a ‘network error’ value (that was helpful).

**** Note ****
I knew the logic above was give-or-take valid because when I changed it too use an image in the root of the Assets folder everything worked just fine
**** Note ****

After over an hour and a half of trying everything I could think of I decided to screw binding to an ImageSource and bind directly to the string value for the path. 

public string Image
{
	get
	{
		return "../Assets/Category/Animals/horse.png";
	}
}

When I changed my UI to bind to the new property everything magically worked as expected.

I am not sure if I was doing something wrong (likely the case) or if there is some hidden bug in WinRT, but I was able to get everything working.

Till next time,