Windows Phone Image Binding

Question

I want to put images in my ListBox using Binding.

Below is the object containing the URI's:

_roomView.Room = new Room
        {
            Items = new List<Item> {
            new Item {ItemType = ItemType.BlueKey, ImageUri = "/Escape;component/Images/Items/a.jpg"},
            new Item {ItemType = ItemType.Bracelet, ImageUri = "/Escape;component/Images/Items/b.png"},
            new Item {ItemType = ItemType.Money, ImageUri = "/Escape;component/Images/Items/b.png"}}
        };
        DataContext = _roomView;

Below is the XML:

  <ListBox x:Name="Mylist">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Margin="5">
                        <Image Source="{Binding Room.Items.ImageUri}" Stretch="None" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

The images aren't showing.

Can anyone see where I am going wrong?

Answer 1

If image doesn't show - check pathes; For example my code for binding

 public class Country
{       
    public String name
    {
        get;
        set;
    }       
    public String Flag
    {
        get
        {
            return "/Image/Countries/" + name + ".png";
        }
    }
}


<Image Width="100" Height="140" HorizontalAlignment="Left" Stretch="UniformToFill">
    <Image.Source>
       <BitmapImage UriSource="{Binding Flag}" CreateOptions="BackgroundCreation" />
    </Image.Source>
</Image>   

If You are using images from the project be sure that thay Build to content and copy always to output directory.(properties of the images )

By the way if you want to show images from the Internet You need to use LowProfileImageLoader You can read more about it http://blogs.msdn.com/b/delay/archive/2010/09/02/keep-a-low-profile-lowprofileimageloader-helps-the-windows-phone-7-ui-thread-stay-responsive-by-loading-images-in-the-background.aspx

 <Image  delay:LowProfileImageLoader.UriSource= "{Binding Flag}" HorizontalAlignment="Left" Stretch="Fill"   VerticalAlignment="Center" Width="24" Height="16" Margin="0,0,10,0"  />

Answer 2

Instead of doing

DataContext = _roomView;

I did:

Mylist.ItemsSource = _roomView.Room.Items;

and in the XML:

<Image Source="{Binding ImageUri}" Stretch="None" />

The above shows "ImageUri" instead of Room.Items.ImageUri since I am already passing in the Rooom.Items.