CODEWITHSUNDEEP
silverlightwindows-phone-7bindingwindows-phone-8windows-phone
Subby
Subby

Reputation: 5480

Windows Phone Binding Image Location

I am trying to place a collection of images at certain places on a canvas through Binding.

For some reason, the images are displaying but are NOT at the locations which I have specified.

C#

_roomView.Room = new Room
{
   Items = new List<Item> {
   new Item {ImageUri = "/Escape;component/Images/Items/a.jpg", XPosition = 190, YPosition = 50},
   new Item {ImageUri = "/Escape;component/Images/Items/b.png", XPosition = 390, YPosition = 100},
   new Item {ImageUri = "/Escape;component/Images/Items/b.png", XPosition = 490, YPosition = 600}}
};

listBoxItems.ItemsSource = _roomView.Room.Items;

XML

<Canvas>
     <Image Source="{Binding ImageUri}" Stretch="None" Canvas.Left="{Binding Room.Items.XPosition}" Canvas.Top="{Binding Room.Items.YPosition}"/>
</Canvas>

XPosition and YPosition are of type int. I have tried changing them to double but the images still aren't being displayed where I want them to be. They only get displayed at the top left of the screen - on top of each other.

Can anyone see the problem?

Upvotes: 1

Views: 462

Answers (2)

Soonts
Soonts

Reputation: 21966

Your C# code has collection of images.

Your XAML only shows a single image. If the XAML is in the listbox data template, you'll get several canvases, with 1 image each.

To display a collection of images on the single Canvas, you could use e.g. <ItemsControl>, set ItemsPanel to a Canvas, and in the data template you specify a single image with source, canvas.left and canvas.top.

If you're trying to do what I've described with a ListBox instead of ItemsControl, it wont work because it has one more layer of UI elements between ItemsPanel and item, namely the item container.

P.S. Fastest way to troubleshoot such GUI problems - XAML Spy, I've bought myself a personal license. Evaluation is 21 days long, fully functional.

Upvotes: 1

JustinAngel
JustinAngel

Reputation: 16102

You're using the pack URI format which is only valid if your images have a Build Action of "Embedded Resource". Even then, I'm not sure this URI format is actually supported for Image.Source and if the URI has to be Relative or Absolute. Check the images Build Action (Right click --> Properties on those files) and try changing the UriKind.

Either way, unless you have a very good reason it's best to keep media assets as:
Build Action = Content and use the normal path URIs. Adding images to DLLs as Embedded Resources is bad for startup performance since it takes longer to load your bigger DLLs into the AppDomain.
It's also bad from a memory usage perspective since the DLLs loaded into memory are now bigger.

Bottom line:

<Image Source="myPicture.png" /> format is much better for performance than

<Image Source="myAssemblyName;component/myPicture.png" /> syntax.

Upvotes: 1

Related Questions